Introduction

La façon dont nous consommons l'audio sur nos appareils mobiles, de bureau et autres est en train de changer, et la pandémie a définitivement influencé notre modèle de consommation. L'un des mots à la mode autour de l'audio est "l'audio spatial". Cet article vous montrera comment créer une expérience audio spatiale en utilisant les API Video de Vonage et le SDK Resonance sur les navigateurs Web.

Curieux de savoir comment se déroulera l'expérience audio spatiale ? Consultez notre exemple de démonstration ci-dessous et utilisez un casque pour regarder la vidéo.

Un peu d'histoire de l'audio

Avant de parler de l'audio spatial/audio 3D, parlons des canaux audio et de leurs différences.

Mono

Le son mono (qui signifie un seul) est un son à canal unique dans lequel le son diffusé dans l'oreillette droite est le même que celui diffusé dans l'oreillette gauche. Chaque son est diffusé uniformément dans les deux oreillettes.

Stéréo

L'audio stéréo est un son à deux canaux dans lequel vous pouvez entendre des sons différents dans l'oreillette droite et dans l'oreillette gauche. Vous pouvez distinguer un son de guitare joué dans l'oreille droite et des bruits de pas dans l'oreille gauche.

Son ambiophonique

Des travaux exclusifs ont été réalisés sur la manière dont l'audio est mélangé et lu. Le son mono et/ou stéréo est mixé en fonction du nombre de haut-parleurs et de caissons de basse de la configuration audio (5.1, 7.1, etc., ce qui correspond à 5 haut-parleurs et 1 caisson de basse ou à 7 haut-parleurs et 1 caisson de basse) et reproduit par tous les haut-parleurs et caissons de basse afin de créer une sensation de son ambiophonique.

Binaural

Il s'agit d'une version améliorée de la stéréo où l'enregistrement nécessite deux microphones omnidirectionnels. Lorsque cet enregistrement est lu, vous entendez les sons comme si vous étiez physiquement présent sur les lieux.

Audio spatiale

L'audio spatial vous permet de positionner le son n'importe où dans un espace 3D. Cela signifie que vous pouvez non seulement distinguer les sources sonores entre la gauche et la droite, mais aussi au-dessus, au-dessous, à l'avant et à l'arrière. L'audio spatial trompe le cerveau humain en retardant le moment où le son atteint nos oreilles gauche et droite et en utilisant des fréquences plus élevées et plus basses. La croissance de l'espace VR a stimulé la popularité de l'audio spatial.

Faut-il s'intéresser à l'audio spatial ?

Fatigue liée aux vidéoconférences - Le son des vidéoconférences produit une expérience d'écoute peu naturelle, car tout le son provient du même haut-parleur et de la même distance. Ce paysage sonore synthétique est différent d'une expérience d'écoute réelle où le son est positionné, directionnel et sphérique. L'audio spatial peut recréer une expérience d'écoute réelle en positionnant le son dans un espace 3D.

Espaces AR et VR L'audio spatial produit une expérience immersive dans les espaces AR/VR. L'audio joue un rôle clé dans les espaces AR/VR, au même titre que les visuels et les actions.

Création d'applications sociales - Les apps de live-streaming audio/vidéo ont introduit l'audio spatial pour rendre les conversations plus engageantes et interactives.

Expérience audio spatiale à l'aide des API Video de Vonage et du SDK Resonance

Notre ingénieur solution client Rajkiran Talusani a créé un guide "HOW TO" sur la création d'une expérience audio spatiale à l'aide de Vonage Video SDK et Resonance SDK. Veuillez suivre les instructions ci-dessous.

Exigences

• SDK Video de Vonage

• Resonance SDK

Ai-je besoin de matériel particulier ?

Non, vous avez simplement besoin d'un casque stéréo/d'écouteurs ou d'un appareil compatible pour restituer le son. Vous n'avez pas besoin d'un microphone spécial pour cet exemple particulier.

Configuration initiale

L'audio par résonance nous permet de placer l'auditeur à une position spécifique dans l'espace 3D, identifiée par les coordonnées x, y et z. Vous pouvez alors placer un nombre quelconque de sources audio à différentes positions. Vous pouvez ensuite placer un nombre quelconque de sources audio à différentes positions et l'audio par résonance mélangera les flux audio pour donner l'impression que vous vous trouvez dans un espace physique.

Spatial Audio - Virtual Room Example

La première étape consiste à créer un AudioContext et un nœud Gain pour contrôler le volume audio de la résonance.

audioContext = new AudioContext();
  resonanceGain = audioContext.createGain();

Ensuite, définissez une pièce en 3D et ses matériaux muraux.

let roomDimensions = {
  width: roomWidth,
  height: roomHeight,
  depth: roomDepth,
  };
  
  let roomMaterials = {
  left: 'uniform',
  right: 'uniform',
  up: 'uniform',
  down: 'uniform',
  front: 'uniform',
  back: 'uniform'
  };

Pour connaître tous les types de matériaux muraux disponibles, vous pouvez consulter la documentation audio de Resonance.

Ensuite, nous créons une instance de Resonance Audio et la connectons à l'audioContext via resonanceGain. Nous définissons également la position initiale de l'auditeur au centre de la pièce (0,0,0).

resonanceAudioScene = new ResonanceAudio(audioContext,{
  ambisonicOrder: 1
  });
  
  resonanceAudioScene.output.connect(resonanceGain);
  resonanceGain.connect(audioContext.destination);
  resonanceAudioScene.setRoomProperties(roomDimensions, roomMaterials);
  resonanceAudioScene.setListenerPosition(0, 0, 0);

Connecter les abonnés à Resonance Audio

Ensuite, chaque fois qu'un abonné est ajouté à la session, nous connectons la sortie de l'abonné à l'audio Resonance.

function connectVideoToResonanceAudio(subscriber,x=1,y=0,z=1) {
  if(!isSupported)
  return;
  let subscriberId = subscriber.id;
  subscriber.setAudioVolume(0);
  
  console.log("Adding streamId="+subscriber.stream.id+" to the
  map");
  // find the video element 
  var videoElem = subscriber.element.querySelector('video');
  if(videoElem == undefined){
  console.log("Video Element null in connectVideoToResonanceAudio. Something terribly wrong");
  return;
  }
  
  let audioElementSource =
  audioContext.createMediaStreamSource(videoElem.srcObject);
  let source = resonanceAudioScene.createSource();
  audioElementSource.connect(source.input);
  source.setPosition(x, y, z);
  resonanceSources\[subscriberId] = source;
  }

Veuillez noter que nous avons réglé le volume de l'abonné sur 0 car nous ne voulons pas entendre directement l'audio de l'abonné. Au lieu de cela, nous acheminons l'audio de l'abonné à travers Resonance.

Tout d'abord, nous trouvons l'élément video de l'abonné, puis nous obtenons le flux audio de l'abonné à l'aide de videoElem.srcObject, qui renvoie un MediStream. Nous créons ensuite une "source audio de résonance" et connectons le flux audio de l'abonné à cette source. Vous pouvez définir la position initiale de la source de l'abonné sur une valeur par défaut. Nous la modifierons ultérieurement lorsque la mise en page sera finalisée ou redimensionnée.

Attribuer des postes sources aux abonnés

Lorsque vous ajoutez un nouvel abonné à la mise en page ou que la mise en page est redimensionnée, vous devez réaffecter les positions des sources en fonction de la position relative de l'abonné sur la mise en page.

Chaque participant peut avoir sa propre mise en page.

Dans cet extrait, nous plaçons l'auditeur au centre de la sphère et nous plaçons ensuite les abonnés autour du bord de la demi-sphère (approximativement).

  function adjustAudioSourcePositions(streams, numSpeakersVisible, layoutDiv){\
  // find the center point of the video layout in pixels 
  let layoutRect = document.getElementById(layoutDiv).getBoundingClientRect();
  let layoutCenterX = layoutRect.left + (layoutRect.width/2);
  let layoutCenterZ = layoutRect.top + (layoutRect.height/2);
  // convert pixels to room dimensions in meters
  let scaleX = roomWidth/layoutRect.width;
  let scaleZ = roomHeight/layoutRect.height;
  for(i=0;i<numSpeakersVisible && i <streams.length;i++){
  /* for each subscriber, get the bounding box and find the center relative to
  the center of layoutContainer */
  let subscriberRect =
  document.getElementById(streams\[i].subscriber.id).getBoundingClientRect();
  let subscriberCenterX = subscriberRect.left + (subscriberRect.width/2);
  let subscriberCenterZ = subscriberRect.top + (subscriberRect.height/2);
  
  let relativeX = (subscriberCenterX - layoutCenterX)*scaleX;
  let relativeZ = (subscriberCenterZ - layoutCenterZ)*scaleZ;
  /* lets keep people closer to the center of screen further away on Y axis, so
  it should be like people sitting in half spherical shape */
  let Y = 2 * (1 - (Math.abs(relativeX)/(roomWidth/2)));
  setSourcePosition(streams\[i].subscriber.id,relativeX,Y,relativeZ);
  }
  }

Commutation entre Spatial et Mono

Si vous souhaitez activer le mode spatial, il vous suffit de régler la valeur du gain de résonanceGain sur 1 et de régler le volume de tous les abonnés sur 0. De même, pour activer le mode mono, réglez le volume de tous les abonnés sur 50 et la valeur du gain de résonanceGain sur 0.

  function changeMode(mode){
  if(!isSupported)
  return;
  if(mode == MODE_SPATIAL){
  console.log("mode is spatial now");
  resonanceGain.gain.value=1;
  setSubscribersVolume(0);
  }
  else if(mode == MODE_NONE){
  console.log("mode is mono now");
  resonanceGain.gain.value=0;
  setSubscribersVolume(50);
  }
  }
  
  
  function setSubscribersVolume(vol){
  if(!isSupported)
  return;
  for (var streamId in subscriberMap) {
  subscriberMap\[streamId].setAudioVolume(vol);
  }
  }

Compatibilité des navigateurs

Bien que tous les navigateurs devraient être compatibles, nous avons rencontré quelques problèmes lors de nos tests. Firefox fonctionne comme prévu, mais nous avons constaté que Chrome n'active pas l'annulation de l'écho lorsque l'audio est acheminé via WebAudio (bogue de Chrome). Cela signifie que si l'un des participants ne porte pas de casque, cela peut créer une mauvaise expérience audio pour tout le monde. La solution à ce problème consiste à acheminer l'audio traité via une connexion peer loopback et à se connecter à un élément audio.

Correction ci-dessous :

function fixChrome687574(loopbackDestination, audioContext,
  resonanceGainNode,audioEl){
  const outboundPeerConnection = new RTCPeerConnection();
  const inboundPeerConnection = new RTCPeerConnection();
  const onError = e => {
    console.error("RTCPeerConnection loopback initialization error", e);
  };
  outboundPeerConnection.addEventListener("icecandidate", e => {
  inboundPeerConnection.addIceCandidate(e.candidate).catch(onError);
  });
  inboundPeerConnection.addEventListener("icecandidate", e => {
  outboundPeerConnection.addIceCandidate(e.candidate).catch(onError);
  });
  inboundPeerConnection.addEventListener("track", e => {
  audioEl.srcObject = e.streams[0];
  });
  resonanceGainNode.connect(loopbackDestination);
  loopbackDestination.stream.getTracks().forEach(track => {
  outboundPeerConnection.addTrack(track, loopbackDestination.stream);
  });
  outboundPeerConnection.createOffer().then(offer => {
  outboundPeerConnection.setLocalDescription(offer).catch(onError);
  
  inboundPeerConnection
  .setRemoteDescription(offer)
  .then(() => {
  inboundPeerConnection
  .createAnswer()
  .then(answer => {
  answer.sdp = answer.sdp.replace('useinbandfec=1', 'useinbandfec=1', 'stereo=1');
  inboundPeerConnection.setLocalDescription(answer).catch(onError);
  outboundPeerConnection.setRemoteDescription(answer).catch(onError);
  })
  .catch(onError);
  })
  .catch(onError);
  });
  }

Safari (14.1.2) introduit également quelques problèmes audio, mais la version 15.x semble fonctionner correctement.

Améliorations futures

Bien que nous ayons placé les sources sonores dans l'espace 3D, il s'agit de sources ponctuelles, c'est-à-dire qu'elles émettent des sons dans toutes les directions. Une amélioration future consisterait à en faire des sources directionnelles, de sorte que chaque abonné n'émette des sons que dans la direction de l'auditeur.

Conclusion

Aujourd'hui, nous avons construit une expérience audio spatiale à l'aide des API Video de Vonage et du SDK Resonance en positionnant les abonnés dans différentes parties d'une salle virtuelle. Vous pouvez maintenant vous amuser davantage lors de réunions virtuelles en activant l'audio spatial. Veuillez consulter le code source complet si vous êtes enthousiaste à l'idée de créer cette expérience par vous-même.