Hingga saat ini, perangkat output audio tujuan hanya dapat disetel untuk <video> dan <audio> dengan HTMLMediaElement.setSinkId(). Di Web Audio, AudioContext menggunakan perangkat default, sehingga pengguna harus mengubah perangkat output audio sistem secara manual.
Mulai Chrome 110, Anda dapat menggunakan AudioContext.setSinkId() untuk mengarahkan output audio secara terprogram di Web Audio ke perangkat yang diizinkan.
Hal ini sangat membantu dalam berbagai skenario komunikasi real-time. Misalnya, aplikasi web dapat menggunakan ini untuk mengarahkan output secara terprogram ke perangkat output audio tertentu seperti headset Bluetooth atau speaker ponsel.
Mengirim output audio ke perangkat tertentu
Pertama, Anda memerlukan ID perangkat output audio yang ingin digunakan sebagai tujuan. Dapatkan daftar perangkat media yang tersedia dengan navigator.mediaDevices.enumerateDevices(), filter hanya pada perangkat output audio, dan dapatkan atribut deviceId dari perangkat output audio pilihan Anda. Nilai string kosong "" juga dapat digunakan sebagai perangkat default untuk deviceId.
Setelah Anda memiliki ID perangkat output audio, buat AudioContext dan panggil audioContext.setSinkId(deviceId). Jika berhasil, promise yang ditampilkan akan diselesaikan saat audio dirutekan ke perangkat output terhubung yang dipilih. Metode ini dapat gagal jika AudioContext ditutup.
Contoh di bawah menunjukkan cara meminta akses mikrofon jika diperlukan dan mengarahkan output audio di Web Audio 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 menentukan "perangkat output senyap" di Web Audio untuk meminimalkan konsumsi daya. Kali ini, alih-alih nilai string, teruskan { type: "none" } ke AudioContext.setSinkId().
Perhatikan bahwa clock audio yang dapat diakses melalui audioContext.currentTime akan tetap berlanjut untuk merender grafik audio. Tujuan utama AudioContext yang dibisukan ini adalah untuk merender grafik audio tanpa menghasilkan suara yang dapat didengar. Kasus penggunaan utamanya adalah menganalisis input mikrofon tanpa mengeluarkan 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://codepen.io/web-dot-dev/pen/emNwEaN/ untuk mencoba 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 dengan AudioContext.setSinkId(). Berikan masukan dengan mengomentari masalah GitHub yang ada atau melaporkan masalah baru di GitHub.
Link bermanfaat
Ucapan terima kasih
Terima kasih kepada Hongchan Choi dan Michael Wilson yang telah meninjau artikel ini.
Foto gambar kalender oleh Steve Harvey di Unsplash.