تغيير جهاز الإخراج الوجهة في Web Audio

فرانسوا بوفورت
فرانسوا بوفورت
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 });

عرض الصوت مع صوت Context مكتوم

يمكنك الآن تحديد "جهاز إخراج صامت" في 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://sinkid.glitch.me/ للعب مع AudioContext.setSinkId().

المتصفحات المتوافقة

يتوفّر AudioContext.setSinkId() في Chrome 110 أو الإصدارات الأحدث.

إضافة ملاحظات

يرغب فريق Chrome ومنتدى معايير الويب في التعرّف على تجاربك في استخدام AudioContext.setSinkId(). يُرجى تقديم ملاحظاتك من خلال التعليق على مشاكل GitHub الحالية أو ملء بيانات جديدة.

شكر وتقدير

شكرًا لكل من هونغشان تشوي ومايكل ويلسون لمراجعة هذه المقالة.

صورة في التقويم من تصوير ستيف هارفي على Unsplash