Finora, l'impostazione del dispositivo di output audio di destinazione era possibile solo per <video> e <audio> con HTMLMediaElement.setSinkId(). In Web Audio, AudioContext utilizzava il dispositivo predefinito, lasciando all'utente la possibilità di modificare manualmente il dispositivo di uscita audio del sistema.
A partire da Chrome 110, puoi utilizzare AudioContext.setSinkId() per indirizzare in modo programmatico l'output audio in Web Audio a qualsiasi dispositivo consentito.
Ciò è particolarmente utile in una serie di scenari di comunicazione in tempo reale. Ad esempio, un'app web può utilizzarlo per indirizzare programmaticamente l'output a un dispositivo di output audio specifico, come un auricolare Bluetooth o un vivavoce.
Instradare l'uscita audio a un dispositivo specifico
Innanzitutto, devi avere l'identificatore del dispositivo di output audio che vuoi utilizzare come destinazione. Recupera l'elenco dei dispositivi multimediali disponibili con navigator.mediaDevices.enumerateDevices(), filtra solo i dispositivi di output audio e recupera l'attributo deviceId del dispositivo di output audio che preferisci. Il valore della stringa vuota "" può essere utilizzato anche come dispositivo predefinito per deviceId.
Una volta ottenuto l'identificatore del dispositivo di output audio, crea un AudioContext e chiama audioContext.setSinkId(deviceId). In caso di esito positivo, la promessa restituita viene risolta quando l'audio viene indirizzato al dispositivo di output connesso scelto. Può non riuscire se AudioContext è chiuso.
L'esempio seguente mostra come richiedere l'accesso al microfono, se necessario, e indirizzare l'output audio in Web Audio al primo dispositivo di output disponibile.
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);
Tieni presente che puoi anche passare deviceId come parametro sinkId durante la creazione di un AudioContext.
const audioContext = new AudioContext({ sinkId: deviceId });
Esegui il rendering dell'audio con un AudioContext disattivato
Ora puoi specificare un "dispositivo di output silenzioso" in Web Audio per ridurre al minimo il consumo energetico. Questa volta, anziché un valore stringa, trasmetti { type: "none" } a AudioContext.setSinkId().
Tieni presente che l'orologio audio accessibile tramite audioContext.currentTime continuerà ad avanzare per eseguire il rendering del grafico audio. Lo scopo principale di questo AudioContext silenziato è quello di eseguire il rendering del grafico audio senza produrre suoni udibili. Il caso d'uso principale sarebbe l'analisi dell'input del microfono senza emettere suoni.
// Silent Web Audio output.
await audioContext.setSinkId({ type: "none" });
Rilevamento delle funzionalità
Per verificare se AudioContext.setSinkId() è supportato, utilizza:
if ("setSinkId" in AudioContext.prototype) {
// AudioContext.setSinkId() is supported.
}
Esempio
Una demo è disponibile all'indirizzo https://codepen.io/web-dot-dev/pen/emNwEaN/ per provare AudioContext.setSinkId().
Supporto browser
AudioContext.setSinkId() è disponibile in Chrome 110 o versioni successive.
Feedback
Il team di Chrome e la community degli standard web vogliono conoscere le tue esperienze con AudioContext.setSinkId(). Fornisci un feedback commentando i problemi di GitHub esistenti o segnalandone di nuovi.
Link utili
Ringraziamenti
Grazie a Hongchan Choi e Michael Wilson per aver esaminato questo articolo.
Foto dell'immagine del calendario di Steve Harvey su Unsplash.