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

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

تاکنون، تنظیم دستگاه خروجی صدای مقصد فقط برای <video> و <audio> با استفاده از HTMLMediaElement.setSinkId() امکان‌پذیر بود. در Web Audio ، AudioContext از دستگاه پیش‌فرض استفاده می‌کرد و کاربر می‌توانست دستگاه خروجی صدای سیستم را به صورت دستی تغییر دهد.

از کروم ۱۱۰، می‌توانید از AudioContext.setSinkId() برای هدایت خروجی صدا در Web Audio به هر دستگاه مجاز، به صورت برنامه‌نویسی شده استفاده کنید.

این امر به ویژه در انواع سناریوهای ارتباطی بلادرنگ مفید است. به عنوان مثال، یک برنامه وب می‌تواند از این قابلیت برای هدایت خروجی به یک دستگاه خروجی صوتی خاص مانند هدست بلوتوث یا بلندگوی تلفن استفاده کند.

خروجی صدا را به یک دستگاه خاص هدایت کنید

ابتدا، به شناسه دستگاه خروجی صوتی که می‌خواهید به عنوان مقصد استفاده کنید نیاز دارید. لیست دستگاه‌های رسانه‌ای موجود را با navigator.mediaDevices.enumerateDevices() دریافت کنید، فقط دستگاه‌های خروجی صوتی را فیلتر کنید و ویژگی deviceId دستگاه خروجی صوتی مورد نظر خود را دریافت کنید. مقدار رشته خالی "" همچنین می‌تواند به عنوان دستگاه پیش‌فرض برای deviceId استفاده شود.

وقتی شناسه دستگاه خروجی صدا را پیدا کردید، یک AudioContext ایجاد کنید و audioContext.setSinkId(deviceId) را فراخوانی کنید. در صورت موفقیت، promise برگردانده شده زمانی حل می‌شود که صدا به دستگاه خروجی متصل انتخاب شده هدایت شود. اگر 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.
}

نمونه

یک نسخه آزمایشی برای کار با AudioContext.setSinkId() در آدرس https://codepen.io/web-dot-dev/pen/emNwEaN/ موجود است.

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

AudioContext.setSinkId() در کروم ۱۱۰ یا بالاتر در دسترس است.

بازخورد

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

تقدیرنامه‌ها

با تشکر از هونگچان چوی و مایکل ویلسون برای بررسی این مقاله.