حتى الآن، كان من الممكن ضبط جهاز إخراج الصوت الوجهة على <video> و<audio> باستخدام HTMLMediaElement.setSinkId() فقط. في Web Audio، كان AudioContext يستخدم الجهاز التلقائي، ما يضطر المستخدم إلى تغيير جهاز إخراج الصوت في النظام يدويًا.
بدءًا من الإصدار 110 من Chrome، يمكنك استخدام 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.
}
عيّنة
يتوفّر عرض توضيحي على https://codepen.io/web-dot-dev/pen/emNwEaN/ لتجربة AudioContext.setSinkId().
دعم المتصفح
يتوفّر AudioContext.setSinkId() في الإصدار 110 من Chrome أو الإصدارات الأحدث.
الملاحظات
يريد فريق Chrome ومنتدى معايير الويب معرفة تجاربك مع AudioContext.setSinkId(). يُرجى تقديم الملاحظات من خلال التعليق على مشاكل GitHub الحالية أو الإبلاغ عن مشاكل جديدة.
روابط مفيدة
الإقرارات
نشكر هونغشان تشوي ومايكل ويلسون على مراجعة هذه المقالة.
صورة التقويم من ستيف هارفي على Unsplash