ก่อนหน้านี้คุณตั้งค่าอุปกรณ์เอาต์พุตเสียงปลายทางได้เฉพาะสำหรับ <video> และ <audio> ด้วย HTMLMediaElement.setSinkId() ใน Web Audio นั้น AudioContext ใช้อุปกรณ์เริ่มต้นและทำให้ผู้ใช้เปลี่ยนอุปกรณ์เอาต์พุตเสียงของระบบด้วยตนเองได้
จาก Chrome 110 คุณสามารถใช้ AudioContext.setSinkId() เพื่อส่งเอาต์พุตเสียงใน Web Audio ไปยังอุปกรณ์ที่ได้รับอนุญาตโดยใช้โปรแกรมได้ทางโปรแกรม
ซึ่งมีประโยชน์มากในกรณีของการสื่อสารแบบเรียลไทม์ต่างๆ ตัวอย่างเช่น เว็บแอปสามารถใช้ตัวเลือกนี้เพื่อนำทางเอาต์พุตไปยังอุปกรณ์เอาต์พุตเสียงที่เจาะจงแบบเป็นโปรแกรมได้ เช่น ชุดหูฟังบลูทูธหรือลำโพง
กำหนดเส้นทางเอาต์พุตเสียงไปยังอุปกรณ์ที่เจาะจง
ก่อนอื่นคุณต้องมีตัวระบุของอุปกรณ์เอาต์พุตเสียงที่ต้องการใช้เป็นปลายทาง ดูรายการอุปกรณ์สื่อที่พร้อมใช้งานกับ navigator.mediaDevices.enumerateDevices() กรองเฉพาะอุปกรณ์เอาต์พุตเสียง และรับแอตทริบิวต์ deviceId ของอุปกรณ์เอาต์พุตเสียงที่คุณต้องการ ค่า "" ของสตริงที่ว่างเปล่าสามารถใช้เป็นอุปกรณ์เริ่มต้นสำหรับ deviceId ได้ด้วย
เมื่อคุณมีตัวระบุอุปกรณ์เอาต์พุตเสียงแล้ว ให้สร้าง AudioContext และเรียกใช้ audioContext.setSinkId(deviceId) เมื่อเสร็จสมบูรณ์ สัญญาที่ส่งกลับมานี้จะตอบกลับเมื่อกำหนดเส้นทางเสียงไปยังอุปกรณ์เอาต์พุตที่เชื่อมต่อที่เลือกไว้ ซึ่งอาจล้มเหลวหากปิด AudioContext แล้ว
ตัวอย่างด้านล่างแสดงวิธีขอสิทธิ์เข้าถึงไมโครโฟนหากจำเป็น และนำเอาต์พุตเสียงใน Web Audio ไปยังอุปกรณ์เอาต์พุตเครื่องแรกที่พร้อมใช้งาน
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);
โปรดทราบว่าคุณยังส่ง deviceId เป็นพารามิเตอร์ sinkId ได้ด้วยเมื่อสร้าง AudioContext
const audioContext = new AudioContext({ sinkId: deviceId });
แสดงผลเสียงด้วย AudioContext ที่ปิดเสียง
ตอนนี้คุณสามารถระบุ "อุปกรณ์เอาต์พุตแบบปิดเสียง" ใน Web Audio เพื่อลดการใช้พลังงานให้เหลือน้อยที่สุดได้แล้ว ในครั้งนี้ ให้ส่ง { type: "none" } ไปยัง AudioContext.setSinkId() แทนค่าสตริง
โปรดทราบว่านาฬิกาเสียงที่เข้าถึงได้ผ่านทาง audioContext.currentTime จะยังคงเลื่อนไปข้างหน้าเพื่อแสดงผลกราฟเสียง เป้าหมายหลักของ AudioContext ที่ปิดเสียงนี้คือการแสดงผลกราฟเสียงโดยไม่เปิดเสียง กรณีการใช้งานหลักคือการวิเคราะห์อินพุตไมโครโฟนโดยไม่ส่งเสียง
// Silent Web Audio output.
await audioContext.setSinkId({ type: "none" });
การตรวจหาฟีเจอร์
หากต้องการตรวจสอบว่าระบบรองรับ AudioContext.setSinkId() หรือไม่ ให้ใช้
if ("setSinkId" in AudioContext.prototype) {
// AudioContext.setSinkId() is supported.
}
ตัวอย่าง
ทดลองเล่นกับ AudioContext.setSinkId() ได้ที่ https://sinkid.glitch.me/
การสนับสนุนเบราว์เซอร์
AudioContext.setSinkId() พร้อมใช้งานใน Chrome 110 ขึ้นไป
ความคิดเห็น
ทีม Chrome และชุมชนมาตรฐานเว็บต้องการทราบข้อมูลเกี่ยวกับประสบการณ์ที่คุณได้รับจาก AudioContext.setSinkId() โปรดแสดงความคิดเห็นโดยแสดงความคิดเห็นในปัญหาใหม่ของ GitHub ที่มีอยู่หรือยื่นเรื่อง
ลิงก์ที่มีประโยชน์
- ข้อกำหนดของ WebAudio
- การตรวจสอบ TAG
- การสาธิต | แหล่งที่มาของข้อมูลประชากร
- ข้อบกพร่องของ Chromium
- รายการ ChromeStatus.com
กิตติกรรมประกาศ
ขอขอบคุณ Hongchan Choi และ Michael Wilson ที่อ่านบทความนี้
รูปภาพปฏิทินโดย Steve Harvey ใน Unsplash