حتى الآن، كان من الممكن ضبط جهاز مصدر إخراج الصوت الوجهة على <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 الحالية أو الإبلاغ عن مشاكل جديدة.
روابط مفيدة
الإقرارات
نشكر هونغشان تشوي ومايكل ويلسون على مراجعة هذه المقالة.