de _haochuan

Cum puteți auzi atât „Yanny”, cât și „Laurel” folosind API-ul Web Audio

Cum puteti auzi atat „Yanny cat si „Laurel folosind API ul
https://www.highsnobiety.com/p/yanny-versus-laurel-audio-meme

Recent, un clip audio care îi întreabă pe ascultători dacă aud cuvântul „Yanny” sau „Laurel” a nedumerit complet lumea și a împotrivit prietenul cu prietenul în dezbaterea online.

Clipul și sondajul „Yanny or Laurel” au fost postate pe Instagram, Reddit și alte site-uri de către elevii de liceu care au spus că a fost înregistrat de pe un site de vocabular care se juca prin difuzoarele de pe un computer. Acum sute de mii de oameni sunt angajați într-o dezbatere despre ceea ce aud. I-a înnebunit pe oameni și a condus la apărări pasionale de ambele părți.

Cu toate acestea, magia din spatele acestei dezbateri este destul de simplă. Urechile diferite au zone de frecvență sensibile diferite pentru același clip audio. De asemenea, difuzoarele diferite au răspunsuri diferite la diferite frecvențe audio.

Acest tutorial va trece prin detalii despre cum să utilizați API-ul Web Audio și JavaScript simplu pentru a crea un instrument care vă va ajuta să auziți atât „Yanny” și “Dafin.” Atunci vei putea câștiga oricare dintre aceste dezbateri. 🙂

Dacă doriți doar să încercați instrumentul, acesta este live AICI. Deschideți browserul, redați sunetul și încercați să găsiți punctele dulci pentru „Yanny” și „Laurel” în timp ce deplasați glisorul de frecvență.

Cum functioneaza

Să vorbim mai întâi despre partea cheie. Pentru a auzi cuvântul diferit, trebuie să creșteți cumva volumul pentru un anumit interval de frecvență, care depinde de urechi. Din fericire, API-ul Web Audio are deja ceva pregătit pentru noi: BiquadFilterNode.

Există diferite tipuri de BiquadFilterNode poți să folosești. Pentru acest caz, vom merge doar cu bandpass filtru.

Un filtru bandpass este un dispozitiv sau circuit electronic care permite să treacă semnale între două frecvențe specifice, dar care discriminează semnale la alte frecvențe. (sursă)

Și pentru un filtru bandpass, de cele mai multe ori trebuie doar să definim valoarea frecvenței centrale pe care dorim să o amplificăm sau să o tăiem, în loc de începutul și sfârșitul intervalului de frecvență. Folosim un Q valoare pentru a controla lățimea domeniului de frecvență. Cu cât este mai mare Q este, cu atât gama de frecvențe va fi mai îngustă. Consultați Wikipedia pentru mai multe detalii.

Aceasta este toată cunoașterea pe care trebuie să o cunoaștem în acest moment. Acum, să scriem codul.

Inițializare API Web Audio

const AudioContext = window.AudioContext || window.webkitAudioContext;
const audioContext = new AudioContext();

Creați noduri audio împreună cu configurarea și lanțul de semnal

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

Exemplu de fișier HTML

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Yanny vs Laurel Web Audio API</title></head><body>  <div id="container">    <audio id='audioTag' crossorigin="anonymous" src="https://www.freecodecamp.org/news/how-you-can-hear-both-yanny-and-laurel-using-the-web-audio-api-306051cfcede/yanny-laurel.wav" controls loop></audio>    <hr>    <input type="range" min="20" max="10000" value="20" step="1" class="slider" id="freqSlider">  </div>  <script src="https://www.freecodecamp.org/news/how-you-can-hear-both-yanny-and-laurel-using-the-web-audio-api-306051cfcede/script.js"></script></body></html>

Adăugarea UI glisor de frecvență

Pentru a face mai ușoară ajustarea frecvenței centrale a filtrului nostru bandpass, ar trebui să adăugăm un glisor pentru a controla valoarea.

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Yanny vs Laurel Web Audio API</title></head><body>  <div id="container">    <audio id='audioTag' src="https://www.freecodecamp.org/news/how-you-can-hear-both-yanny-and-laurel-using-the-web-audio-api-306051cfcede/yanny-laurel.wav" controls loop></audio>    <hr>    <input type="range" min="50" max="4000" value="1000" step="1" class="slider" id="freqSlider">    <br>    <p id="freqLabel" >Frequency: 1000 Hz</p>  </div>  <script>;    // 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);  <script src="https://www.freecodecamp.org/news/how-you-can-hear-both-yanny-and-laurel-using-the-web-audio-api-306051cfcede/script.js"></script><;/body></html>

bug-ul createMediaElementSource în iOS Safari

am gasit asta createMediaElementSource nu va funcționa în iOS Safari și Chrome. Pentru a rezolva acest lucru, trebuie să utilizați createBufferSource pentru a crea un AudioBufferNode pentru a stoca și reda sunetul în loc de eticheta audio HTML.
Te rog vezi codul aici pentru mai multe detalii.

Acum te-ai făcut un instrument, astfel încât să poți auzi atât „Yanny”, cât și „Laurel”. Deschideți browserul, redați sunetul și încercați să găsiți locul dulce în timp ce deplasați glisorul de frecvență.

Dacă doriți să încercați instrumentul, acesta este live AICI.

Scriu cod pentru audio și web și cânt la chitară pe YouTube. Dacă doriți să vedeți mai multe lucruri de la mine sau să aflați mai multe despre mine, mă puteți găsi oricând pe:

Site web:
https://haochuan.io/

GitHub:
https://github.com/haochuan

Mediu:
https://medium.com/@haochuan

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