Hogyan hallhatja mind a „Yannyt”, mind a „Laurelt” a Web Audio API használatával

A közelmúltban egy audio klip, amely megkérdezte a hallgatóktól, hallják-e a „Yanny” vagy a „Laurel” szót, teljesen zavarba ejtette a világot, és az online vitában a barátot baráttal szembeállította.

A klipet és a „Yanny vagy Laurel” közvélemény-kutatást középiskolás diákok tették közzé az Instagram-on, a Reddit-en és más oldalakon, és azt mondták, hogy egy szókincs weboldaláról rögzítették, amely a számítógép hangszóróin keresztül játszik. Most emberek százezrei vesznek részt vitában a hallottakról. Ez megbolondította az embereket és szenvedélyes védekezéshez vezetett mindkét oldalon.

A vita varázsa azonban meglehetősen egyszerű. Különböző fülek különböző érzékeny frekvenciájú zónákkal rendelkeznek ugyanazon hangklip számára. Emellett a különböző hangszórók különböző válaszokat adnak a különböző hangfrekvenciákra.

Ez az oktatóanyag bemutatja a Web Audio API és az egyszerű JavaScript használatának részleteit az eszköz létrehozásához, amely segít hallani mind a „Yanny”, mind a „Laurel ” szót . Akkor bármelyik vitát megnyerheti. :)

Ha csak ki akarja próbálni az eszközt, akkor ITT élőben. Csak nyissa meg a böngészőt, játssza le a hangot, és próbálja megtalálni a „Yanny” és a „Laurel” édes pontjait, miközben mozgatja a frekvencia csúszkáját.

Hogyan működik

Először beszéljünk a legfontosabb részről. A különböző szavak meghallgatásához valamilyen módon növelnie kell a hangerőt egy adott frekvenciatartományban, amely a fülétől függ. Szerencsére a Web Audio API már valami kész minket: BiquadFilterNode.

Különböző típusok BiquadFilterNodehasználhatók. Ebben az esetben csak a bandpassszűrővel járunk .

A sávszűrő olyan elektronikus eszköz vagy áramkör, amely lehetővé teszi a két meghatározott frekvencia közötti jelek áthaladását, de megkülönbözteti a többi frekvencia jeleit. (forrás)

A sávszűrő esetében pedig legtöbbször csak meg kell határoznunk a középfrekvencia értéket, amelyet növelni vagy csökkenteni akarunk, a frekvenciatartomány kezdete és vége helyett. Egy Qértéket használunk a frekvenciatartomány szélességének szabályozására. Minél nagyobb Q, annál szűkebb a frekvenciatartomány. Nézze meg a Wikipédiát további részletekért.

Ennyi a tudás, amit tudnunk kell ezen a ponton. Most írjuk meg a kódot.

Web Audio API inicializálása

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

Hozzon létre audio csomópontokat a beállítással és a jellánccal együtt

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

Minta HTML fájl

  Yanny vs Laurel Web Audio API 

Frekvencia csúszka felhasználói felület hozzáadása

Sáváteresztő szűrőnk középfrekvenciájának beállításának megkönnyítése érdekében hozzá kell adnunk egy csúszkát az érték vezérléséhez.

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

createMediaElementSource hiba az iOS Safari böngészőben

Megállapítottam, hogy createMediaElementSourceez nem fog működni az iOS Safari és a Chrome böngészőben. Ennek megoldásához createBufferSourcelétre kell hoznia egy AudioBufferNode-ot, amely a hangot a HTML hangcímke helyett tárolja és lejátssza.

Kérjük, olvassa el a kódot itt.

Most készítettél magadnak egy eszközt, hogy hallhasd a „Yanny” -t és a „Laurelt” is. Csak nyissa meg a böngészőt, játssza le a hangot, és próbálja megtalálni az édes helyet a frekvencia csúszka mozgatása közben.

Ha csak kipróbálni szeretné az eszközt, akkor ITT élőben.

Írok kódot hanghoz és internethez, és gitározok a YouTube-on. Ha többet szeretne látni tőlem, vagy többet szeretne megtudni rólam, mindig megtalálhatja:

Weboldal:

//haochuan.io/

GitHub:

//github.com/haochuan

Közepes:

//medium.com/@haochuan

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