Modifier le périphérique de sortie de destination dans Web Audio

François Beaufort
François Beaufort
GitHub

Jusqu'à présent, il n'était possible de définir l'appareil de sortie audio de destination que pour <video> et <audio> avec HTMLMediaElement.setSinkId(). Dans Web Audio, AudioContext utilisait l'appareil par défaut, ce qui obligeait l'utilisateur à modifier manuellement le périphérique de sortie audio du système.

À partir de Chrome 110, vous pouvez utiliser AudioContext.setSinkId() pour diriger de manière programmatique la sortie audio dans Web Audio vers n'importe quel appareil autorisé.

Cela est particulièrement utile dans divers scénarios de communication en temps réel. Par exemple, une application Web peut l'utiliser pour diriger de manière programmatique la sortie vers un périphérique de sortie audio spécifique, tel qu'un casque Bluetooth ou un haut-parleur.

Router la sortie audio vers un appareil spécifique

Tout d'abord, vous avez besoin de l'identifiant de l'appareil de sortie audio que vous souhaitez utiliser comme destination. Obtenez la liste des appareils multimédias disponibles avec navigator.mediaDevices.enumerateDevices(), filtrez sur les appareils de sortie audio uniquement, puis obtenez l'attribut deviceId de l'appareil de sortie audio de votre choix. La valeur de chaîne vide "" peut également être utilisée comme appareil par défaut pour deviceId.

Une fois que vous disposez de l'identifiant du périphérique de sortie audio, créez un AudioContext et appelez audioContext.setSinkId(deviceId). Si l'opération réussit, la promesse renvoyée est résolue lorsque l'audio est acheminé vers l'appareil de sortie connecté choisi. Il peut échouer si l'AudioContext est fermé.

L'exemple ci-dessous montre comment demander l'accès au micro si nécessaire et diriger la sortie audio dans Web Audio vers le premier périphérique de sortie disponible.

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);

Notez que vous pouvez également transmettre le deviceId en tant que paramètre sinkId lorsque vous créez un AudioContext.

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

Afficher du contenu audio avec un AudioContext coupé

Vous pouvez désormais spécifier un "dispositif de sortie silencieux" dans Web Audio pour réduire la consommation d'énergie. Cette fois, au lieu d'une valeur de chaîne, transmettez { type: "none" } à AudioContext.setSinkId().

Notez que l'horloge audio accessible via audioContext.currentTime continuera de progresser pour afficher le graphique audio. L'objectif principal de cet AudioContext désactivé est de générer le graphique audio sans produire de son audible. Le cas d'utilisation principal consiste à analyser l'entrée du micro sans émettre de son.

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

Détection de fonctionnalités

Pour vérifier si AudioContext.setSinkId() est compatible, utilisez:

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

Échantillon

Une démonstration est disponible sur https://sinkid.glitch.me/ pour vous permettre de jouer avec AudioContext.setSinkId().

Prise en charge des navigateurs

AudioContext.setSinkId() est disponible dans Chrome 110 ou version ultérieure.

Commentaires

L'équipe Chrome et la communauté des normes Web souhaitent connaître vos expériences avec AudioContext.setSinkId(). Veuillez nous faire part de vos commentaires en commentant des problèmes GitHub existants ou en en créant de nouveaux.

Remerciements

Merci à Hongchan Choi et Michael Wilson d'avoir relu cet article.

Image de l'agenda par Steve Harvey sur Unsplash.