เปลี่ยนอุปกรณ์เอาต์พุตปลายทางใน Web Audio

François Beaufort
François Beaufort
GitHub

ก่อนหน้านี้ การตั้งค่าอุปกรณ์เอาต์พุตเสียงปลายทางใช้ได้กับ <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 ที่ปิดเสียงนี้คือการแสดงผลกราฟเสียงโดยไม่ทำให้เกิดเสียงที่ได้ยิน Use Case หลักคือการวิเคราะห์อินพุตไมโครโฟนโดยไม่ส่งเสียง

// 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 ที่มีอยู่หรือแจ้งปัญหาใหม่

ขอขอบคุณ

ขอขอบคุณ Hongchan Choi และ Michael Wilson ที่ตรวจสอบบทความนี้

รูปภาพปฏิทินโดย Steve Harvey ใน Unsplash