Tot nu toe was het instellen van het audio-uitvoerapparaat alleen mogelijk voor <video> en <audio> met HTMLMediaElement.setSinkId() . In Web Audio gebruikte AudioContext het standaardapparaat, waardoor de gebruiker het systeemaudio-uitvoerapparaat handmatig kon wijzigen.
Vanaf Chrome 110 kunt u AudioContext.setSinkId() gebruiken om de audio-uitvoer in Web Audio programmatisch naar elk toegestaan apparaat te sturen.
Dit is vooral handig in diverse realtime communicatiescenario's. Een webapp kan dit bijvoorbeeld gebruiken om de uitvoer programmatisch door te sturen naar een specifiek audio-uitvoerapparaat, zoals een Bluetooth-headset of speakerphone.
Audio-uitvoer naar een specifiek apparaat routeren
Eerst hebt u de ID nodig van het audio-uitvoerapparaat dat u als bestemming wilt gebruiken. Haal de lijst met beschikbare media-apparaten op met navigator.mediaDevices.enumerateDevices() , filter alleen op audio-uitvoerapparaten en haal het kenmerk deviceId van het gewenste audio-uitvoerapparaat. De lege tekenreekswaarde "" kan ook worden gebruikt als standaardapparaat voor deviceId .
Zodra u de identificatie van het audio-uitvoerapparaat hebt, maakt u een AudioContext aan en roept u audioContext.setSinkId(deviceId) aan. Bij succes wordt de geretourneerde promise omgezet wanneer de audio naar het gekozen aangesloten uitvoerapparaat wordt geleid. Dit kan mislukken als de AudioContext gesloten is.
In het onderstaande voorbeeld ziet u hoe u indien nodig microfoontoegang kunt aanvragen en de audio-uitvoer in Web Audio naar het eerste beschikbare uitvoerapparaat kunt sturen.
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);
Houd er rekening mee dat u de deviceId ook als sinkId -parameter kunt doorgeven bij het maken van een AudioContext .
const audioContext = new AudioContext({ sinkId: deviceId });
Audio renderen met een gedempte AudioContext
U kunt nu een "stil uitvoerapparaat" in Web Audio specificeren om het stroomverbruik te minimaliseren. Deze keer geeft u in plaats van een tekenreekswaarde { type: "none" } door aan AudioContext.setSinkId() .
Houd er rekening mee dat de audioklok, die toegankelijk is via audioContext.currentTime , nog steeds vooruit zal gaan om de audiografiek te renderen. Het hoofddoel van deze gedempte AudioContext is om de audiografiek te renderen zonder hoorbaar geluid te produceren. De primaire toepassing zou het analyseren van microfooninput zijn zonder geluid te produceren.
// Silent Web Audio output.
await audioContext.setSinkId({ type: "none" });
Functiedetectie
Om te controleren of AudioContext.setSinkId() wordt ondersteund, gebruikt u:
if ("setSinkId" in AudioContext.prototype) {
// AudioContext.setSinkId() is supported.
}
Steekproef
Er is een demo beschikbaar op https://codepen.io/web-dot-dev/pen/emNwEaN/ om te spelen met AudioContext.setSinkId() .
Browserondersteuning
AudioContext.setSinkId() is beschikbaar in Chrome 110 of later.
Feedback
Het Chrome-team en de webstandaardencommunity willen graag uw ervaringen met AudioContext.setSinkId() horen. Geef feedback door te reageren op bestaande GitHub-problemen of door nieuwe problemen te melden.
Nuttige links
Dankbetuigingen
Dank aan Hongchan Choi en Michael Wilson voor het beoordelen van dit artikel.
Kalenderafbeeldingfoto door Steve Harvey op Unsplash .