Wijzig het doeluitvoerapparaat in Web Audio

François Beaufort
François Beaufort
GitHub

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 audio-uitvoerapparaat van het systeem handmatig moest wijzigen.

Vanaf Chrome 110 kun je AudioContext.setSinkId() gebruiken om de audio-uitvoer in Web Audio programmatisch naar elk toegestaan ​​apparaat te sturen.

Dit is met name handig in diverse realtime communicatiescenario's. Een webapplicatie kan dit bijvoorbeeld gebruiken om programmatisch de uitvoer naar een specifiek audio-uitvoerapparaat te sturen, zoals een Bluetooth-headset of speakerphone.

Stuur de audio-uitvoer naar een specifiek apparaat.

Allereerst heb je de identificatiecode nodig van het audio-uitvoerapparaat dat je als bestemming wilt gebruiken. Haal de lijst met beschikbare media-apparaten op met navigator.mediaDevices.enumerateDevices() , filter op alleen audio-uitvoerapparaten en haal het attribuut deviceId op van het audio-uitvoerapparaat van je keuze. De lege tekenreeks "" kan ook worden gebruikt als standaardapparaat voor deviceId .

Zodra je de identificatiecode van het audio-uitvoerapparaat hebt, maak je een AudioContext aan en roep audioContext.setSinkId(deviceId) aan. Bij succes wordt de geretourneerde promise opgelost wanneer de audio naar het gekozen aangesloten uitvoerapparaat wordt doorgestuurd. Het kan mislukken als de AudioContext wordt gesloten.

Het onderstaande voorbeeld laat zien hoe u, indien nodig, toegang tot de microfoon kunt aanvragen en de audio-uitvoer in Web Audio naar het eerst 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 aanmaken van een AudioContext .

const audioContext = new AudioContext({ sinkId: deviceId });

Audio renderen met een gedempt AudioContext

Je kunt nu een "stil uitvoerapparaat" specificeren in Web Audio om het stroomverbruik te minimaliseren. Geef dit keer in plaats van een tekenreekswaarde { type: "none" } door aan AudioContext.setSinkId() .

Houd er rekening mee dat de audioklok, toegankelijk via audioContext.currentTime , nog steeds zal doorlopen om de audiografiek weer te geven. Het hoofddoel van deze gedempte AudioContext is om de audiografiek weer te geven zonder hoorbaar geluid te produceren. Het primaire gebruiksscenario zou het analyseren van microfooninput zijn zonder geluid te maken.

// Silent Web Audio output.
await audioContext.setSinkId({ type: "none" });

Kenmerkdetectie

Om te controleren of AudioContext.setSinkId() wordt ondersteund, gebruikt u:

if ("setSinkId" in AudioContext.prototype) {
  // AudioContext.setSinkId() is supported.
}

Steekproef

Een demo om te experimenteren met AudioContext.setSinkId() is beschikbaar op https://codepen.io/web-dot-dev/pen/emNwEaN/ .

Browserondersteuning

AudioContext.setSinkId() is beschikbaar in Chrome 110 of later.

Feedback

Het Chrome-team en de webstandaardgemeenschap willen graag meer horen over uw ervaringen met AudioContext.setSinkId() . Geef feedback door te reageren op bestaande GitHub-issues of door nieuwe issues aan te maken.

Dankbetuigingen

Met dank aan Hongchan Choi en Michael Wilson voor het nakijken van dit artikel.