Até agora, só era possível definir o dispositivo de saída de áudio de destino para <video> e <audio> com HTMLMediaElement.setSinkId(). No Web Audio, o AudioContext usava o dispositivo padrão, deixando que o usuário mudasse o dispositivo de saída de áudio do sistema manualmente.
No Chrome 110, é possível usar AudioContext.setSinkId() para direcionar a saída de áudio no Web Audio para qualquer dispositivo permitido.
Isso é especialmente útil em vários cenários de comunicação em tempo real. Por exemplo, um app da Web pode usar isso para direcionar a saída de forma programática para um dispositivo de saída de áudio específico, como um fone de ouvido ou viva-voz Bluetooth.
Encaminhar a saída de áudio para um dispositivo específico
Primeiro, você precisa do identificador do dispositivo de saída de áudio que quer usar como destino. Receba a lista de dispositivos de mídia disponíveis com navigator.mediaDevices.enumerateDevices(), filtre apenas os dispositivos de saída de áudio e receba o atributo deviceId do dispositivo de saída de áudio escolhido. O valor de string vazia "" também pode ser usado como o dispositivo padrão para deviceId.
Depois de ter o identificador do dispositivo de saída de áudio, crie um AudioContext e chame audioContext.setSinkId(deviceId). Se o processo for bem-sucedido, a promessa retornada será resolvida quando o áudio for roteado para o dispositivo de saída conectado escolhido. Ele pode falhar se o AudioContext estiver fechado.
O exemplo abaixo mostra como solicitar o acesso ao microfone, se necessário, e direcionar a saída de áudio no Web Audio para o primeiro dispositivo de saída disponível.
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);
Também é possível transmitir o deviceId como um parâmetro sinkId ao criar um AudioContext.
const audioContext = new AudioContext({ sinkId: deviceId });
Renderizar áudio com um AudioContext desativado
Agora é possível especificar um "dispositivo de saída silencioso" no Web Audio para minimizar o consumo de energia. Dessa vez, em vez de um valor de string, transmita { type: "none" } para AudioContext.setSinkId().
O relógio de áudio acessível por audioContext.currentTime ainda avança para renderizar o gráfico de áudio. O objetivo principal desse AudioContext desativado é renderizar o gráfico de áudio sem produzir som audível. O caso de uso principal seria analisar a entrada do microfone sem emitir sons.
// Silent Web Audio output.
await audioContext.setSinkId({ type: "none" });
Detecção de recursos
Para verificar se o AudioContext.setSinkId() tem suporte, use:
if ("setSinkId" in AudioContext.prototype) {
// AudioContext.setSinkId() is supported.
}
Exemplo
Uma demonstração está disponível em https://sinkid.glitch.me/ para você testar o AudioContext.setSinkId().
Suporte ao navegador
AudioContext.setSinkId() está disponível no Chrome 110 ou mais recente.
Feedback
A equipe do Chrome e a comunidade de padrões da Web querem saber sobre suas experiências com o AudioContext.setSinkId(). Envie feedback comentando sobre problemas atuais ou registrando novos problemas do GitHub.
Links úteis
- Especificação do WebAudio
- Análise da TAG
- Demonstração | Fonte da demonstração
- Bug do Chromium
- Entrada do ChromeStatus.com
Agradecimentos
Agradecemos a Hongchan Choi e Michael Wilson pela revisão deste artigo.
Foto da imagem do calendário de Steve Harvey no Unsplash.