Einführung

Die Art und Weise, wie wir Audio auf unseren Mobil-, Desktop- und anderen Geräten konsumieren, verändert sich, und die Pandemie hat unser Konsummodell definitiv beeinflusst. Ein Schlagwort, das im Zusammenhang mit Audio immer wieder auftaucht, ist "Spatial Audio". Dieser Artikel zeigt Ihnen, wie Sie mit den Vonage Video APIs und dem Resonance SDK auf Webbrowsern ein räumliches Audioerlebnis schaffen können.

Sind Sie neugierig, wie das räumliche Audioerlebnis sein wird? Schauen Sie sich unsere Beispiel-Demo unten an und verwenden Sie bitte ein Headset, um das Video anzusehen.

Ein Stück Audiogeschichte

Bevor wir über Spatial Audio/3D Audio sprechen, sollten wir über Audiokanäle und ihre Unterschiede sprechen.

Mono

Mono-Audio ist ein Einkanal-Audio, bei dem der Ton, der im rechten Ohrhörer wiedergegeben wird, auch im linken Ohrhörer wiedergegeben wird. Jeder Ton wird gleichmäßig auf beide Ohrstöpsel verteilt.

Stereo

Bei Stereo-Audio handelt es sich um Zweikanal-Audio, bei dem Sie unterschiedliche Töne im rechten und linken Ohrhörer hören können. Sie können einen Gitarrenton auf der rechten Seite und Schritte auf der linken Seite unterscheiden.

Surround-Sound

Die Art und Weise, wie die Audiodaten gemischt und wiedergegeben werden, ist Gegenstand eigener Entwicklungen. Mono- und/oder Stereoton wird für die Anzahl der Lautsprecher und Subwoofer in der Audioanlage gemischt (5.1, 7.1 usw., was 5 Lautsprechern und 1 Subwoofer oder 7 Lautsprechern und 1 Subwoofer entspricht) und über alle Lautsprecher und Subwoofer wiedergegeben, um ein Surround-Sound-Gefühl zu erzeugen.

Binaural

Dies ist eine verbesserte Version von Stereo, bei der für die Aufnahme zwei omnidirektionale Mikrofone erforderlich sind. Bei der Wiedergabe dieses Tons hören Sie die Geräusche so, als wären Sie physisch an dem Ort anwesend.

Spatial Audio

Mit Spatial Audio können Sie den Ton überall im 3D-Raum positionieren. Das bedeutet, dass Sie nicht nur zwischen linken und rechten Klangquellen unterscheiden können, sondern auch zwischen oben, unten, vorne und hinten. Spatial Audio trickst das menschliche Gehirn aus, indem es den Zeitpunkt, zu dem der Ton unser linkes und rechtes Ohr erreicht, verzögert und höhere und niedrigere Frequenzen verwendet. Das Wachstum im VR-Bereich hat die Popularität von Spatial Audio gefördert.

Sollten Sie sich für Spatial Audio interessieren?

Ermüdung bei Videokonferenzen - Der Ton bei Videokonferenzen erzeugt ein unnatürliches Hörerlebnis, da alle Töne aus demselben Lautsprecher und aus derselben Entfernung kommen. Diese synthetische Klanglandschaft unterscheidet sich von einem realen Hörerlebnis, bei dem der Klang positionsbezogen, gerichtet und sphärisch ist. Spatial Audio kann durch die Positionierung des Tons in einem 3D-Raum ein realistisches Hörerlebnis erzeugen.

AR- und VR-Räume - Spatial Audio erzeugt ein immersives Erlebnis in AR/VR-Räumen. Audio spielt in AR-/VR-Räumen eine ebenso wichtige Rolle wie visuelle Elemente und Aktionen.

Soziale Apps entwickeln - Audio-/Video-Livestreaming-Apps haben räumliches Audio eingeführt, um Unterhaltungen ansprechender und interaktiver zu gestalten.

Räumliches Audioerlebnis mit Vonage Video APIs und Resonance SDK

Unser hervorragender Customer Solution Engineer Rajkiran Talusani hat eine Anleitung zum Aufbau eines räumlichen Audioerlebnisses mit Vonage Video SDK und Resonance SDK erstellt. Bitte folgen Sie den Anweisungen unten.

Anforderungen

• Vonage Video SDK

• Resonanz-SDK

Benötige ich spezielle Hardware?

Nein, Sie benötigen lediglich ein Stereo-Headset/einen Kopfhörer oder ein kompatibles Gerät für die Wiedergabe des Tons. Für dieses spezielle Beispiel benötigen Sie kein spezielles Mikrofon.

Erstmalige Einrichtung

Resonance Audio ermöglicht es uns, den Zuhörer an einer bestimmten Position im 3D-Raum zu platzieren, die durch die x-, y- und z-Koordinaten identifiziert wird. Sie können dann eine beliebige Anzahl von Audioquellen an verschiedenen Positionen platzieren und Resonance Audio würde die Audioströme so mischen, dass es klingt, als befänden Sie sich in einem physischen Raum.

Spatial Audio - Virtual Room Example

Der erste Schritt besteht darin, einen AudioContext und einen Gain-Knoten zu erstellen, um die Lautstärke der Resonanz zu steuern

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

Definieren Sie nun einen 3D-Raum und seine Wandmaterialien

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

Alle verfügbaren Wandmaterialtypen finden Sie in der Resonance-Audio-Dokumentation.

Als nächstes erstellen wir eine Instanz von Resonance Audio und verbinden sie über resonanceGain mit dem audioContext. Legen Sie außerdem die Anfangsposition des Hörers in der Mitte des Raums fest (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);

Abonnenten mit Resonance Audio verbinden

Wenn dann ein Teilnehmer zur Sitzung hinzugefügt wird, verbinden wir den Ausgang des Teilnehmers mit Resonance Audio.

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

Bitte beachten Sie, dass wir die Teilnehmerlautstärke auf 0 gesetzt haben, weil wir die Teilnehmer nicht direkt hören wollen. Stattdessen leiten wir den Ton des Teilnehmers durch Resonance.

Zuerst suchen wir das video Element des Abonnenten und erhalten dann den Audiostream des Abonnenten mit videoElem.srcObject, das einen MediStream zurückgibt. Dann erstellen wir eine "Resonanz-Audioquelle" und verbinden den Abonnenten-Audiostream mit dieser Quelle. Sie können die Anfangsposition der Abonnentenquelle auf einen Standardwert setzen. Wir werden dies später ändern, wenn das Layout fertiggestellt oder in der Größe verändert ist.

Quellpositionen zu Abonnenten zuordnen

Immer wenn Sie dem Layout einen neuen Abonnenten hinzugefügt haben oder die Größe des Layouts geändert wurde, sollten Sie die Quellpositionen auf der Grundlage der relativen Position des Abonnenten im Layout neu zuweisen.

Jeder Teilnehmer kann sein eigenes Layout haben.

In diesem Ausschnitt platzieren wir den Hörer in der Mitte der Kugel und platzieren dann die Teilnehmer um den Rand der Halbkugel (ungefähr).

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

Umschalten zwischen Spatial und Mono

Wenn Sie den räumlichen Modus aktivieren möchten, müssen Sie lediglich den Wert für die Resonanzverstärkung (resonanceGain) auf 1 und die Lautstärke aller Teilnehmer auf 0 setzen. Um den Monomodus zu aktivieren, setzen Sie die Lautstärke aller Teilnehmer auf 50 und die Resonanzverstärkung (resonanceGain) auf 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);
  }
  }

Browser-Kompatibilität

Obwohl alle Browser kompatibel sein sollten, sind wir beim Testen auf einige Probleme gestoßen. Firefox funktioniert wie erwartet, aber wir haben festgestellt, dass Chrome auf dem Desktop die Echounterdrückung nicht aktiviert, wenn Audio über WebAudio geleitet wird (Chrome-Fehler). Das bedeutet, wenn einer der Teilnehmer kein Headset trägt, kann dies zu einem schlechten Audioerlebnis für alle führen. Die Abhilfe für dieses Problem besteht darin, das verarbeitete Audio über eine Loopback-Peer-Verbindung zu leiten und eine Verbindung zu einem Audioelement herzustellen.

Fix unten:

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) führt auch einige Audioprobleme ein, aber 15.x scheint gut zu funktionieren.

Künftige Verbesserungen

Obwohl wir die Schallquellen im 3D-Raum platziert haben, handelt es sich um Punktquellen - sie strahlen Schall in alle Richtungen ab. Als zukünftige Verbesserung können Sie sie zu gerichteten Quellen machen, so dass jeder Teilnehmer den Schall nur in die Richtung des Zuhörers abstrahlt.

Schlussfolgerung

Heute haben wir mithilfe der Vonage Video APIs und des Resonance SDK ein räumliches Audioerlebnis geschaffen, indem wir die Teilnehmer in verschiedenen Teilen eines virtuellen Raums positioniert haben. Sie können jetzt mehr Spaß in virtuellen Meetings haben, indem Sie räumliches Audio aktivieren. Bitte sehen Sie sich den vollständigen Quellcode wenn Sie Lust haben, dies selbst zu bauen.