دستگاه خروجی مقصد را در Web Audio تغییر دهید

فرانسوا بوفور
François Beaufort

تا کنون، تنظیم دستگاه خروجی صوتی مقصد فقط برای <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);

توجه داشته باشید که هنگام ایجاد AudioContext می توانید deviceId به عنوان پارامتر sinkId نیز ارسال کنید.

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://sinkid.glitch.me/ برای بازی با AudioContext.setSinkId() موجود است.

پشتیبانی از مرورگر

AudioContext.setSinkId() در Chrome 110 یا جدیدتر موجود است.

بازخورد

تیم Chrome و انجمن استانداردهای وب می‌خواهند درباره تجربیات شما با AudioContext.setSinkId() بشنوند. لطفاً با اظهار نظر در مورد مشکلات موجود یا ثبت مشکلات جدید GitHub ، بازخورد خود را ارائه دهید.

سپاسگزاریها

با تشکر از Hongchan Choi و Michael Wilson برای بررسی این مقاله.

عکس تقویم توسط استیو هاروی در Unsplash .