Finora era possibile impostare il dispositivo di output audio di destinazione solo per <video> e <audio> con HTMLMediaElement.setSinkId(). In Audio web, AudioContext utilizzava il dispositivo predefinito, lasciando all'utente la modifica manuale del dispositivo di output audio di sistema.
A partire da Chrome 110, puoi usare AudioContext.setSinkId() per indirizzare in modo programmatico l'output audio in Web Audio a qualsiasi dispositivo consentito.
Ciò è particolarmente utile in una varietà di scenari di comunicazione in tempo reale. Ad esempio, un'app web può utilizzare questa opzione per indirizzare in modo programmatico l'uscita a un dispositivo di output audio specifico, come le cuffie o il vivavoce Bluetooth.
Indirizza l'uscita audio a un dispositivo specifico
Innanzitutto, è necessario l'identificatore del dispositivo di output audio che vuoi utilizzare come destinazione. Visualizza l'elenco dei dispositivi multimediali disponibili con navigator.mediaDevices.enumerateDevices(), filtra solo i dispositivi di output audio e ottieni l'attributo deviceId del dispositivo di output audio di tua scelta. 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). Se l'operazione va a buon fine, la promessa restituita si risolve quando l'audio viene indirizzato al dispositivo di output connesso scelto. L'operazione può non riuscire se 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 passare deviceId come parametro sinkId anche quando crei 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 di corrente. Questa volta, invece di un valore stringa, passa { type: "none" } a AudioContext.setSinkId().
Tieni presente che l'orologio audio accessibile tramite audioContext.currentTime avanzerà comunque per il rendering del grafico audio. L'obiettivo principale di questo audioContext disattivato è il rendering del grafico audio senza produrre suoni udibili. Il caso d'uso principale sarebbe analizzare l'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
È disponibile una demo all'indirizzo https://sinkid.glitch.me/ per giocare con AudioContext.setSinkId().
Supporto del browser
AudioContext.setSinkId() è disponibile in Chrome 110 o versioni successive.
Feedback
Il team di Chrome e la community degli standard web vogliono conoscere la tua esperienza con AudioContext.setSinkId(). Fornisci un feedback commentando i problemi esistenti o presentando nuovi problemi di GitHub.
Link utili
- Specifiche di WebAudio
- Revisione TAG
- Demo | Origine della demo
- Bug di Chromium
- Voce ChromeStatus.com
Ringraziamenti
Grazie a Hongchan Choi e Michael Wilson per aver letto questo articolo.
Foto dell'immagine del calendario di Steve Harvey su Unsplash.