Robert Moog a creat unul dintre primii sintetizatori de modulare comerciali. Invențiile sale au constat din bănci de fire și butoane, permițând muzicienilor să creeze sunete pe care nu le-au mai auzit până acum. Aceste instrumente nu erau nici ieftine, costând mii de dolari pentru modelul cel mai de bază.

Acum, datorită API-ului Web Audio, putem crea propriul nostru synth sonor asemănător pe care îl putem configura pentru conținutul inimii noastre pentru suma totală de $ 0. Nu numai asta, putem distribui sinteh nostru instantaneu oricui în lume datorită web-ului.

Dacă nu ați citit tutorialele anterioare din seria Web Audio, vă sugeram să le întoarceți și să le citiți înainte de a le întreprinde, deoarece acoperă elementele de bază ale utilizării API-ului Web Audio și crearea unui sunet de la zero.

Noțiuni de bază

Să începem prin crearea unei pagini HTML de bază.

         
 
sintetizator!
 
  

Și un stil de bază în nostru stiluri / main.css fişier.

corp font-family: sans-serif;  .container margin: auto; lățime: 800px; 

Tastatură

Poate că cel mai important lucru pe care-l are nevoie synth este o tastatură. Din fericire, am creat un fragment de JavaScript care va adăuga o tastatură virtuală în pagina dvs. Descărcați o copie a Qwerty Hancock și trimiteți-o în partea inferioară a paginii.

Apoi adăugați o div divizată la pagina dvs. cu un id de "tastatură".

Acesta este locul pe care va fi introdus tastatura.

Vom dori, de asemenea, să înființăm un fișier JavaScript dedicat pentru synth-ul nostru, așadar să îl creăm și să-l referim după ce am inclus Qwerty Hancock.

În cadrul synth.js vom iniția tastatura noastră urmând următoarele.

var tastatură = nou QwertyHancock (id: 'tastatură', lățime: 600, înălțime: 150, octave: 2);

Aceasta ne spune pagina noastră să introducă o instanță a tastaturii noastre în elementul cu id de "tastatură", să o redimensioneze la 600 x 150 px și să facă numărul de taste de pe tastatură să acopere două octave. Salvați și actualizați browserul dvs. pentru a vedea o tastatură minunată pe ecran. Utilizați tastele, atingeți sau mouse-ul pentru a vedea notele aprinse pe măsură ce le apăsați.

Qwerty Hancock ne oferă doi ascultători de evenimente, keyup și Tasta în jos. Acestea ne permit să cârlig în tastatură și să scriem codul care se declanșează atunci când tastatura este apăsată. De asemenea, ne spune ce notă a fost presată și frecvența corespunzătoare în hertz.

keyboard.keyDown = funcție (notă, frecvență) console.log ('Notă', notă, 'a fost apăsat'); console.log ('Frecvența sa este', frecvența); ; keyboard.keyUp = funcție (notă, frecvență) console.log ('Notă', notă, 'a fost lansat'); console.log ("Frecvența sa a fost", frecvența); ;

Oscilează sălbatic

Să începem un oscilator atunci când este apăsată o tastă. O vom opri după o secundă, astfel încât să nu continue pentru totdeauna.

var context = nou AudioContext (); keyboard.keyDown = funcție (notă, frecvență) var osc = context.createOscillator (); osc.connect (context.destination); osc.start (context.currentTime); osc.stop (context.currentTime + 1); ;

De ce creăm oscilatorul în interior Tasta în jos funcţie? Nu e ineficient? Oscilatoarele sunt proiectate să fie ușoare și să fie aruncate după utilizare. De fapt, le puteți folosi numai o singură dată. Gândiți-vă la ele ca la niște artificii audio bizare.

Acum când apăsăm o tastă, auzim un sunet. Este un pic cam tare, asa ca sa creem a gainNode pentru a acționa ca control principal al volumului.

var context = nou AudioContext (), masterVolume = context.createGain (); masterVolume.gain.value = 0.3; masterVolume.connect (context.destination); keyboard.keyDown = funcție (notă, frecvență) var osc = context.createOscillator (); osc.connect (masterVolume); masterVolume.connect (context.destination); osc.start (context.currentTime); osc.stop (context.currentTime + 1); ;

O tastatură care redă o singură notă de câteva ori nu este foarte distractivă, așa că să conectăm frecvența la oscilator înainte de a începe să o jucăm.

osc.frequency.value = frecvență;

Minunat. Acum trebuie să oprim jocul oscilatorului după ce ridicăm o cheie mai degrabă decât după o secundă. Pentru că noi creăm oscilatorul înăuntru Tasta în jos trebuie să ținem evidența oscilatorului care joacă ce frecvență pentru a opri atunci când cheia este eliberată. O modalitate simplă de a face acest lucru este de a crea un obiect gol și a adăuga frecvențele ca chei, împreună cu care oscilatorul joacă acea frecvență ca valoare.

var oscilatoare = ; keyboard.keyDown = funcție (notă, frecvență) // codul anterior aici oscilatoare [frecvență] = osc; osc.start (context.currentTime); ;

Aceasta înseamnă că putem folosi cu ușurință frecvența pe care o obținem de la noi noteUp pentru a opri acel oscilator specific.

keyboard.keyUp = funcție (notă, frecvență) oscilatori [frecvență] .stop (context.currentTime); ;

Acum avem un sintetizator care funcționează (foarte simplu) în browser! Ok, nu sună bine în acest moment, dar să vedem dacă putem schimba asta.

Primul lucru pe care trebuie să îl faceți este să schimbați tipul de undă al ieșirilor oscilatorului. Există patru tipuri de bază de alegere: sinus, pătrat, triunghi și fierăstrău. Fiecare formă diferită a valurilor diferă. Redați-le cu ele și alegeți preferatul dvs. Pentru acest exemplu, voi alege "sawtooth".

osc.type = "fierăstrău";

Acolo, sună mai bine.

Este foarte rar veți găsi un sintetizator care utilizează un singur oscilator. Cele mai multe sintete își înmulțesc sunetul prin combinarea diferitelor oscilatoare de diferite tipuri. Să vedem cum sună dacă adăugăm altul. Amintiți-vă, trebuie să dubleze toate conexiunile noastre și va trebui să adăugăm oscilatoare de aceeași frecvență la o matrice. Aceasta înseamnă că putem itera peste ei pentru a opri toate oscilatoarele care joacă aceeași notă.

keyboard.keyDown = funcție (notă, frecvență) var osc = context.createOscillator (), osc2 = context.createOscillator (); osc.frequency.value = frecvență; osc.type = "fierăstrău"; osc2.frequency.value = frecvență; osc2.type = 'triunghi'; osc.connect (masterVolume); osc2.connect (masterVolume); masterVolume.connect (context.destination); oscilatoare [frecvență] = [osc, osc2]; osc.start (context.currentTime); osc2.start (context.currentTime); ; keyboard.keyUp = funcție (notă, frecvență) oscilatori [frecvență] .forFiecare (funcție (oscilator) oscillator.stop (context.currentTime);); ;

Pentru a termina lucrurile, să folosim un truc pe care l-am învățat în tutorialul anterior. Putem adăuga un pic de cor pentru a adăuga mai mult strălucire la sunetul nostru, prin detuning ușor oscilatoarele.

osc.detune.value = -10; osc2.detune.value = 10;

Frumoasă, un Kraftwerk sintetic ar fi mândru de! Joacă împreună cu articolul finit sau furculița repo pe GitHub pentru a optimiza conținutul de sinteză în inima ta.