Hingga saat ini, setelan perangkat output audio tujuan hanya dapat dilakukan untuk <video> dan <audio> dengan HTMLMediaElement.setSinkId(). Di Audio Web, AudioContext menggunakan perangkat default, sehingga pengguna harus mengubah perangkat output audio sistem secara manual.
Dari 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 speakerphone.
Merutekan 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 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. Tindakan 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
Sekarang Anda dapat menentukan "perangkat output senyap" di Web Audio untuk meminimalkan konsumsi daya. Kali ini, teruskan { type: "none" } ke AudioContext.setSinkId(), bukan nilai string.
Perhatikan bahwa jam audio yang dapat diakses melalui audioContext.currentTime akan tetap maju untuk merender grafik audio. Sasaran utama AudioContext yang dibisukan ini adalah merender grafik audio tanpa menghasilkan suara yang dapat didengar. Kasus penggunaan utamanya adalah 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 bermain 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 dengan AudioContext.setSinkId(). Berikan masukan dengan memberikan komentar pada masalah GitHub yang ada atau mengajukan masalah baru.
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.