Hingga saat ini, menyetel perangkat output audio tujuan hanya dapat dilakukan untuk <video> dan <audio> dengan HTMLMediaElement.setSinkId(). Pada Audio Web, AudioContext menggunakan perangkat default, sehingga pengguna dapat mengubah perangkat output audio sistem secara manual.
Mulai Chrome 110, Anda dapat menggunakan AudioContext.setSinkId() untuk mengarahkan output audio di Audio Web secara terprogram ke perangkat apa pun yang diizinkan.
Hal ini sangat membantu dalam berbagai skenario komunikasi real-time. Misalnya, aplikasi web dapat menggunakannya untuk mengarahkan output secara terprogram ke perangkat output audio tertentu seperti headset Bluetooth atau speaker ponsel.
Merutekan output audio ke perangkat tertentu
Pertama, Anda memerlukan ID perangkat output audio yang ingin Anda gunakan sebagai tujuan. Dapatkan daftar perangkat media yang tersedia dengan navigator.mediaDevices.enumerateDevices(), filter pada perangkat output audio saja, dan dapatkan atribut deviceId perangkat output audio pilihan Anda. Nilai "" string kosong juga dapat digunakan sebagai perangkat default untuk deviceId.
Setelah memiliki ID perangkat output audio, buat AudioContext dan panggil audioContext.setSinkId(deviceId). Jika berhasil, promise yang ditampilkan akan di-resolve saat audio dirutekan ke perangkat output terhubung yang dipilih. Modifikasi ini bisa gagal jika AudioContext ditutup.
Contoh di bawah menunjukkan cara meminta akses mikrofon jika diperlukan dan mengarahkan output audio di Audio Web ke perangkat output pertama yang tersedia.
const permission = await navigator.permissions.query({ name: "microphone" });
if (permission.state == "prompt") {
// More audio outputs are available when user grants access to the mic.
const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
stream.getTracks().forEach((track) => track.stop());
}
// Request a list of media devices and filter audio output devices.
const devices = await navigator.mediaDevices.enumerateDevices();
const audioOutputs = devices.filter(device => device.kind == "audiooutput");
const audioContext = new AudioContext();
// Pick the first available audio output.
const deviceId = audioOutputs[0].deviceId;
await audioContext.setSinkId(deviceId);
Perhatikan bahwa Anda juga dapat meneruskan deviceId sebagai parameter sinkId saat membuat AudioContext.
const audioContext = new AudioContext({ sinkId: deviceId });
Merender audio dengan AudioContext yang dibisukan
Anda kini dapat menetapkan "perangkat output senyap" di Audio Web untuk meminimalkan konsumsi daya. Kali ini, teruskan { type: "none" } ke AudioContext.setSinkId(), bukan nilai string.
Perlu diketahui bahwa jam audio yang dapat diakses melalui audioContext.currentTime akan tetap maju untuk merender grafik audio. Tujuan utama dari AudioContext yang dibisukan ini adalah untuk merender grafik audio tanpa menghasilkan suara yang dapat didengar. Kasus penggunaan utamanya akan menganalisis input mikrofon tanpa membuat suara.
// Silent Web Audio output.
await audioContext.setSinkId({ type: "none" });
Deteksi fitur
Untuk memeriksa apakah AudioContext.setSinkId() didukung, gunakan:
if ("setSinkId" in AudioContext.prototype) {
// AudioContext.setSinkId() is supported.
}
Contoh
Demo tersedia di https://sinkid.glitch.me/ untuk dimainkan dengan AudioContext.setSinkId().
Dukungan browser
AudioContext.setSinkId() tersedia di Chrome 110 atau yang lebih baru.
Masukan
Tim Chrome dan komunitas standar web ingin mengetahui pengalaman Anda menggunakan AudioContext.setSinkId(). Berikan masukan dengan mengomentari masalah GitHub yang sudah ada atau baru.
Link bermanfaat
Ucapan terima kasih
Terima kasih kepada Hongchan Choi dan Michael Wilson telah meninjau artikel ini.
Foto gambar kalender oleh Steve Harvey di Unsplash.