Até agora, só era possível definir o dispositivo de saída de áudio de destino para <video> e <audio> com HTMLMediaElement.setSinkId(). Em Web Audio, o AudioContext usava o dispositivo padrão, deixando para o usuário a tarefa de mudar manualmente o dispositivo de saída de áudio do sistema.
A partir do Chrome 110, você pode usar AudioContext.setSinkId() para direcionar programaticamente 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 web app pode usar isso para direcionar programaticamente a saída para um dispositivo de saída de áudio específico, como um fone de ouvido Bluetooth ou um viva-voz.
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 de sua escolha. 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 a operação for bem-sucedida, a promessa retornada será resolvida quando o áudio for encaminhado para o dispositivo de saída conectado escolhido. Pode falhar se o AudioContext estiver fechado.
O exemplo abaixo mostra como solicitar 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 silenciado
Agora você pode especificar um "dispositivo de saída silencioso" no Web Audio para minimizar o consumo de energia. Desta vez, em vez de um valor de string, transmita { type: "none" } para AudioContext.setSinkId().
O relógio de áudio acessível em audioContext.currentTime ainda vai avançar para renderizar o gráfico de áudio. O principal objetivo desse AudioContext silenciado é renderizar o gráfico de áudio sem produzir som audível. O principal caso de uso 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 AudioContext.setSinkId() é compatível, use:
if ("setSinkId" in AudioContext.prototype) {
// AudioContext.setSinkId() is supported.
}
Exemplo
Uma demonstração está disponível em https://codepen.io/web-dot-dev/pen/emNwEaN/ para você testar AudioContext.setSinkId().
Suporte ao navegador
O 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 AudioContext.setSinkId(). Envie feedback comentando problemas atuais ou registrando novos problemas no GitHub.
Links úteis
Agradecimentos
Agradecemos a Hongchan Choi e Michael Wilson por revisarem este artigo.
Foto da imagem da agenda de Steve Harvey no Unsplash.