До сих пор установка целевого устройства вывода звука была возможна только для <video> и <audio> с помощью HTMLMediaElement.setSinkId() . В Web Audio AudioContext использовалось устройство по умолчанию, и пользователю приходилось вручную менять системное устройство вывода звука.
Начиная с Chrome 110 вы можете использовать AudioContext.setSinkId() для программного направления аудиовыхода в Web Audio на любое разрешенное устройство.
Это особенно полезно в различных сценариях коммуникации в реальном времени. Например, веб-приложение может использовать это для программного перенаправления вывода на определённое аудиоустройство, например, Bluetooth-гарнитуру или спикерфон.
Направить аудиовыход на определенное устройство
Во-первых, вам нужен идентификатор аудиоустройства, которое вы хотите использовать в качестве назначения. Получите список доступных медиаустройств с помощью 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.
}
Образец
Демонстрация с AudioContext.setSinkId() доступна по адресу https://codepen.io/web-dot-dev/pen/emNwEaN/ .
Поддержка браузеров
AudioContext.setSinkId() доступен в Chrome 110 и более поздних версиях.
Обратная связь
Команда Chrome и сообщество веб-стандартов хотят узнать о вашем опыте использования AudioContext.setSinkId() . Пожалуйста, поделитесь своим мнением, оставив комментарий к существующим проблемам или отправив сообщение о новых проблемах на GitHub .
Полезные ссылки
Благодарности
Благодарим Хонгчана Чоя и Майкла Уилсона за рецензирование этой статьи.
Фотография календаря Стива Харви на Unsplash .