Tot nu toe was het instellen van het doelapparaat voor audio-uitvoer alleen mogelijk voor <video> en <audio> met HTMLMediaElement.setSinkId() . In Web Audio gebruikte AudioContext het standaardapparaat, waardoor de gebruiker het audio-uitvoerapparaat van het systeem 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 verschillende realtime communicatiescenario's. Een webapp kan dit bijvoorbeeld gebruiken om de uitvoer programmatisch naar een specifiek audio-uitvoerapparaat te sturen, zoals een Bluetooth-headset of luidsprekertelefoon.
Leid de audio-uitvoer naar een specifiek apparaat
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 deviceId kenmerk op van het audio-uitvoerapparaat van uw keuze. De lege tekenreeks "" waarde kan ook worden gebruikt als het standaardapparaat voor deviceId .
Zodra u de ID van het audio-uitvoerapparaat hebt, maakt u een AudioContext en roept u audioContext.setSinkId(deviceId) aan. Bij succes wordt de geretourneerde belofte opgelost wanneer de audio naar het gekozen aangesloten uitvoerapparaat wordt gerouteerd. Het kan mislukken als de AudioContext wordt gesloten.
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 kunt doorgeven als een sinkId -parameter bij het maken van een AudioContext .
const audioContext = new AudioContext({ sinkId: deviceId });
Geef audio weer met een gedempte AudioContext
U kunt nu een "stil uitvoerapparaat" opgeven in Web Audio om het stroomverbruik te minimaliseren. Geef deze keer, in plaats van een tekenreekswaarde, { type: "none" } door aan AudioContext.setSinkId() .
Merk op dat de audioklok die toegankelijk is via audioContext.currentTime nog steeds doorgaat om de audiografiek weer te geven. Het belangrijkste doel van deze gedempte AudioContext is om de audiografiek weer te geven zonder hoorbaar geluid te produceren. Het primaire gebruiksscenario zou het analyseren van microfooninvoer zijn zonder geluid te maken.
// 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://sinkid.glitch.me/ om te spelen met AudioContext.setSinkId() .
Browser-ondersteuning
AudioContext.setSinkId() is beschikbaar in Chrome 110 of hoger.
Feedback
Het Chrome-team en de webstandaardgemeenschap willen graag horen over uw ervaringen met AudioContext.setSinkId() . Geef feedback door commentaar te geven op bestaande of nieuwe GitHub-problemen in te dienen.
Handige links
Dankbetuigingen
Met dank aan Hongchan Choi en Michael Wilson voor het beoordelen van dit artikel.
Kalenderafbeelding foto door Steve Harvey op Unsplash .