Como você pode ouvir “Yanny” e “Laurel” usando a API de áudio da web

Recentemente, um clipe de áudio perguntando aos ouvintes se eles ouviam a palavra “Yanny” ou “Laurel” confundiu completamente o mundo e colocou amigo contra amigo no debate online.

O clipe e a enquete “Yanny or Laurel” foram postados no Instagram, Reddit e outros sites por alunos do ensino médio que disseram ter sido gravado de um site de vocabulário reproduzido pelos alto-falantes de um computador. Agora, centenas de milhares de pessoas estão envolvidas em um debate sobre o que ouvem. Tem deixado as pessoas loucas e levando a defesas apaixonadas de ambos os lados.

No entanto, a mágica por trás desse debate é bastante simples. Ouvidos diferentes têm zonas de frequência sensíveis diferentes para o mesmo clipe de áudio. Além disso, diferentes alto-falantes têm respostas diferentes para frequências de áudio diferentes.

Este tutorial apresentará os detalhes sobre como usar a API de áudio da web e JavaScript simples para criar uma ferramenta que o ajudará a ouvir “Yanny” e “Laurel”. Então você poderá vencer qualquer um desses debates. :)

Se você quer apenas experimentar a ferramenta, ela está ao vivo AQUI. Basta abrir o navegador, reproduzir o áudio e tentar encontrar os pontos ideais para “Yanny” e “Laurel” enquanto move o controle deslizante de frequência.

Como funciona

Vamos falar sobre a parte principal primeiro. Para ouvir a palavra diferente, você precisa aumentar de alguma forma o volume para uma faixa de frequência específica que depende de seus ouvidos. Felizmente, o áudio API Web já tem algo pronto para nós: BiquadFilterNode.

Existem diferentes tipos de que BiquadFilterNodevocê pode usar. Para este caso, iremos apenas com o bandpassfiltro.

Um filtro passa-banda é um dispositivo ou circuito eletrônico que permite a passagem de sinais entre duas frequências específicas, mas que discrimina sinais em outras frequências. (fonte)

E para um filtro passa-banda, na maioria das vezes, precisamos apenas definir o valor da frequência central que queremos aumentar ou diminuir, em vez do início e do fim da faixa de frequência. Usamos um Qvalor para controlar a largura da faixa de frequência. Quanto maior Qfor, mais estreita será a faixa de frequência. Verifique a Wikipedia para mais detalhes.

Esse é todo o conhecimento que precisamos saber neste momento. Agora, vamos escrever o código.

Inicialização da API de áudio da web

const AudioContext = window.AudioContext || window.webkitAudioContext;

const audioContext = new AudioContext();

Crie nós de áudio junto com a configuração e a cadeia de sinal

// the audio tag in HTML, where holds the original audio clipconst audioTag = document.getElementById('audioTag');

// create audio source in web audio apiconst sourceNode = 

audioContext.createMediaElementSource(audioTag);

const filterNode = audioContext.createBiquadFilter();

filterNode.type = 'bandpass'; // bandpass filterfilterNode.frequency.value = 1000 // set the center frequency

// set the gain to the frequency rangefilterNode.gain.value = 100;

// set Q value, 5 will make a fair band width for this casefilterNode.Q.value = 5;

// connect nodessourceNode.connect(filterNode);filterNode.connect(gainNode);gainNode.connect(audioContext.destination);

Arquivo HTML de amostra

  Yanny vs Laurel Web Audio API 

Adicionando IU do controle deslizante de frequência

Para facilitar o ajuste da frequência central de nosso filtro passa-banda, devemos adicionar um controle deslizante para controlar o valor.

  Yanny vs Laurel Web Audio API 
Frequency: 1000 Hz
 ; // add event listener for slider to change frequency value slider.addEventListener('input', e => {

 filterNode.frequency.value = e.target.value; label.innerHTML = `Frequency: ${e.target.value}Hz`;

 }, false); 

Bug createMediaElementSource no iOS Safari

Descobri que createMediaElementSourcenão funciona no iOS Safari e Chrome. Para resolver isso, você deve usar createBufferSourcepara criar um AudioBufferNode para armazenar e reproduzir o áudio em vez da tag de áudio HTML.

Por favor, veja o código aqui para mais detalhes.

Agora você se tornou uma ferramenta para poder ouvir “Yanny” e “Laurel”. Basta abrir seu navegador, reproduzir o áudio e tentar encontrar o ponto ideal enquanto move o controle deslizante de frequência.

Se você quiser apenas experimentar a ferramenta, ela está ao vivo AQUI.

Eu escrevo código para áudio e web e toco guitarra no YouTube. Se você quiser ver mais coisas minhas ou saber mais sobre mim, você sempre pode me encontrar em:

Local na rede Internet:

//haochuan.io/

GitHub:

//github.com/haochuan

Médio:

//medium.com/@haochuan

YouTube: //www.youtube.com/channel/UCNESazgvF_NtDAOJrJMNw0g