Fino a ora, 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 di sistema.
A partire da Chrome 110, puoi utilizzare AudioContext.setSinkId() per indirizzare in modo programmatico l'uscita audio in Web Audio a qualsiasi dispositivo consentito.
Questo è particolarmente utile in una serie di scenari di comunicazione in tempo reale. Ad esempio, un'app web può utilizzarlo per indirizzare in modo programmatico l'output a un dispositivo di output audio specifico, come un auricolare o un vivavoce Bluetooth.
Indirizzare l'uscita audio a un dispositivo specifico
Innanzitutto, devi avere l'identificatore del dispositivo di uscita audio che vuoi utilizzare come destinazione. Recupera l'elenco dei dispositivi multimediali disponibili con navigator.mediaDevices.enumerateDevices(), filtra solo sui dispositivi di uscita audio e recupera l'attributo deviceId del dispositivo di uscita audio che preferisci. Il valore "" stringa vuota può essere utilizzato anche come dispositivo predefinito per deviceId.
Una volta ottenuto l'identificatore del dispositivo di uscita 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 l'AudioContext è chiuso.
L'esempio seguente mostra come richiedere l'accesso al microfono, se necessario, e indirizzare l'uscita 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 quando crei un AudioContext.
const audioContext = new AudioContext({ sinkId: deviceId });
Eseguire 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 di stringa, passa { 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 disattivato è eseguire il rendering del grafico audio senza produrre suoni udibili. Il caso d'uso principale è l'analisi dell'input del microfono senza emettere suoni.
// Silent Web Audio output.
await audioContext.setSinkId({ type: "none" });
Rilevamento di funzionalità
Per verificare se AudioContext.setSinkId() è supportato, utilizza:
if ("setSinkId" in AudioContext.prototype) {
// AudioContext.setSinkId() is supported.
}
Esempio
Una demo è disponibile all'indirizzo https://sinkid.glitch.me/ per giocare con 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 esistenti o segnalandone di nuovi su GitHub.
Link utili
Ringraziamenti
Grazie a Hongchan Choi e Michael Wilson per aver esaminato questo articolo.
Immagine del calendario di Steve Harvey su Unsplash.