Introdução

A forma como consumimos áudio em nossos celulares, computadores e outros dispositivos está mudando, e a pandemia certamente influenciou nosso modelo de consumo. Um termo que vem ganhando destaque no mundo do áudio é “áudio espacial”. Este artigo mostrará como criar uma experiência de áudio espacial usando as Video APIs da Vonage e o SDK da Resonance em navegadores da Web.

Está curioso para saber como seria a experiência de áudio espacial? Confira nossa demonstração abaixo e use fones de ouvido para assistir ao Video.

Um pouco da história do áudio

Antes de falarmos sobre áudio espacial/áudio 3D, vamos falar sobre os canais de áudio e como eles se diferenciam.

Mono

O áudio “Mono” (que significa “um”) é um áudio de canal único, no qual o som reproduzido no fone direito é o mesmo que o reproduzido no fone esquerdo. Todos os sons são distribuídos uniformemente entre os dois fones.

Estéreo

O áudio estéreo é um áudio de dois canais, no qual é possível ouvir sons diferentes reproduzidos no fone direito e no fone esquerdo. É possível distinguir o som de uma guitarra sendo tocada à direita e o som de passos à esquerda.

Som surround

Foi realizado um trabalho exclusivo sobre como o áudio é mixado e reproduzido. O áudio mono e/ou estéreo é mixado de acordo com o número de alto-falantes e subwoofers na configuração de áudio (5.1, 7.1, etc., o que equivale a 5 alto-falantes e 1 subwoofer ou 7 alto-falantes e 1 subwoofer) e reproduzido por todos os alto-falantes e subwoofers para criar uma sensação de som surround.

Binaural

Essa é uma versão aprimorada do som estéreo, na qual a gravação requer dois microfones omnidirecionais. Quando esse áudio é reproduzido, você ouve os sons como se estivesse fisicamente presente no local.

Áudio espacial

O áudio espacial permite posicionar o som em qualquer ponto de um espaço 3D. Isso significa que você pode distinguir as fontes sonoras não apenas à esquerda e à direita, mas também acima, abaixo, à frente e atrás. O áudio espacial engana o cérebro humano ao atrasar o tempo em que o som chega aos nossos ouvidos esquerdo e direito e ao utilizar frequências mais altas e mais baixas. O crescimento do setor de RV impulsionou a popularidade do áudio espacial.

Você deveria se interessar pelo áudio espacial?

Fadiga das videoconferências - O áudio nas videoconferências produz uma experiência auditiva pouco natural, já que todo o som provém do mesmo alto-falante e da mesma distância. Esse ambiente sonoro sintético difere da experiência auditiva da vida real, na qual o som é posicional, direcional e esférico. O áudio espacial pode recriar uma experiência auditiva semelhante à da vida real, posicionando o som em um espaço 3D.

Espaços de RA e RV - O áudio espacial proporciona uma experiência imersiva em espaços de RA/RV. O áudio desempenha um papel fundamental nos espaços de RA/RV, tanto quanto os elementos visuais e as ações.

Criação de aplicativos sociais - Os aplicativos de transmissão ao vivo de áudio e Video introduziram o áudio espacial para tornar as conversas mais envolventes e interativas.

Experiência de áudio espacial utilizando as Video APIs da Vonage e o SDK da Resonance

Nosso incrível Engenheiro de Soluções para Clientes, Rajkiran Talusani, criou um guia prático sobre como criar uma experiência de áudio espacial usando o Vonage Video SDK e o Resonance SDK. Siga as instruções abaixo.

Requisitos

• SDK de Video da Vonage

• SDK do Resonance

Preciso de algum hardware específico?

Não, você só precisa de um fone de ouvido estéreo ou de um dispositivo compatível para reproduzir o áudio. Não é necessário um microfone especial para este exemplo específico.

Configuração inicial

O áudio de ressonância nos permite posicionar o ouvinte em um ponto específico no espaço 3D, identificado pelas coordenadas x, y e z. Assim, é possível posicionar qualquer número de fontes de áudio em diferentes pontos, e o áudio de ressonância misturará os fluxos de áudio de forma a criar a sensação de que você está em um espaço físico.

Spatial Audio - Virtual Room Example

O primeiro passo é criar um AudioContext e um nó Gain para controlar o volume do áudio do Resonance

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

Em seguida, defina uma sala em 3D e os materiais das paredes

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

Para todos os tipos de materiais de parede disponíveis, você pode consultar a documentação de áudio do Resonance.

Em seguida, criamos uma instância do Resonance Audio e a conectamos ao audioContext por meio do resonanceGain. Além disso, definimos a posição inicial do ouvinte no centro da sala (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);

Conecte os assinantes à Resonance Audio

Em seguida, sempre que um assinante é adicionado à sessão, conectamos a saída do assinante ao áudio do 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;
  }

Observe que definimos o volume do assinante como 0, pois não queremos ouvir diretamente o áudio do assinante. Em vez disso, encaminhamos o áudio do assinante pelo Resonance.

Primeiro, localizamos o video elemento do assinante e, em seguida, obtemos o fluxo de áudio do assinante usando videoElem.srcObject, que retorna um MediStream. Em seguida, criamos uma “fonte de áudio Resonance” e conectamos o fluxo de áudio do assinante a essa fonte. Você pode definir a posição inicial da fonte do assinante para um valor padrão. Alteraremos isso mais tarde, quando o layout estiver finalizado ou tiver sido redimensionado.

Atribuir posições de origem aos assinantes

Sempre que você adicionar um novo assinante ao layout ou quando o layout for redimensionado, você deve reatribuir as posições de origem com base na posição relativa do assinante no layout.

Cada participante pode ter seu próprio layout.

Neste trecho de código, colocamos o ouvinte no centro da esfera e, em seguida, posicionamos os assinantes ao redor da borda da meia-esfera (aproximadamente).

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

Alternando entre os modos espacial e mono

Se você quiser ativar o modo espacial, basta definir o valor do ganho `resonanceGain` como 1 e definir o volume de todos os assinantes como 0. Da mesma forma, para ativar o modo mono, defina o volume de todos os assinantes como 50 e o valor do ganho `resonanceGain` como 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);
  }
  }

Compatibilidade com navegadores

Embora todos os navegadores devam ser compatíveis, encontramos alguns problemas durante os testes. O Firefox funciona conforme o esperado, mas descobrimos que o Chrome para desktop não habilita o cancelamento de eco quando o áudio é encaminhado por meio do WebAudio (bug do Chrome). Isso significa que, se algum dos participantes não estiver usando fones de ouvido, isso pode prejudicar a experiência de áudio de todos. A solução alternativa para esse problema é rotear o áudio processado por meio de uma conexão peer de loopback e conectá-lo a um elemento de áudio.

Corrija o seguinte:

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

O Safari (14.1.2) também apresenta alguns problemas de áudio, mas a versão 15.x parece estar funcionando bem.

Melhorias futuras

Embora tenhamos posicionado as fontes sonoras no espaço 3D, elas são fontes pontuais — ou seja, emitem som em todas as direções. Como uma melhoria futura, você pode transformá-las em fontes direcionais, de modo que cada assinante emita sons apenas na direção do ouvinte.

Conclusão

Hoje, criamos uma experiência de áudio espacial usando as Video APIs da Vonage e o SDK da Resonance, posicionando os participantes em diferentes partes de uma sala virtual. Agora você pode se divertir ainda mais nas reuniões virtuais ativando o áudio espacial. Confira o código-fonte completo se estiver animado para criar isso por conta própria.