Share
Ce sa întâmplat cu audio pe web? Pentru o vreme webul a fost platformă pentru a vă arăta gustul în melodii. De la versiunile MIDI ale The Countdown Final, în fundal, la redarea automată a mp3-urilor MySpace care au fost aruncate în fața ta, sunetul era peste tot.
Nu mai. După ce au fost arse de aceste atrocități ale utilizatorilor, dezvoltatorii web rămân departe de el. Din păcate sunetul a luat o backseat pe web, în timp ce aplicațiile native înflorește.
Gândiți-vă la sunetul de notificare pe care-l auziți când primiți un e-mail sau în micul pop atunci când trageți pentru a reîmprospăta aplicația Twitter. Aceste aplicații arată cum sunetul poate fi integrat într-o experiență extraordinară a utilizatorului.
În acest tutorial vă voi arăta cum să aduceți sunetul înapoi pe web, într-un mod bun!
API-ul Web Audio este un mod puternic și performant de manipulare a sunetului în browser. Înainte de a continua acest tutorial, poate doriți să verificați tutorialul anterior din această serie în care am abordat cum să faceți un sunet de bază utilizând JavaScript, precum și să redați un fișier mp3.
Pentru acest tutorial vom face o machetă a unei pagini de plată care ne oferă feedback audio că plata noastră are succes. Voi folosi Bootstrap pentru a face lucrurile să arate mai repede.
Adăugați sunet la aplicația web Magazinul meu
Sunteți gata să cumpărați acest articol?
Veți observa că în partea inferioară am inclus un fișier numit "success-sound.js". Aici vom scrie codul nostru pentru a oferi utilizatorilor feedback-ul audio atunci când plata lor este de succes. Odată ce ați creat acest fișier, primul lucru pe care vrem să îl facem este să creați un AudioContext. Este posibil să vă amintiți din ultimul tutorial că un AudioContext este modul în care accesăm diferitele funcții ale Web Audio API.
var context = nou AudioContext ();
Unul dintre cele mai bune lucruri despre Web Audio API este că ne permite să creăm sunete de la zero fără să ne uităm nici măcar la un fișier audio. Facem asta folosind oscilatoare.
Oscilatoarele sunt o modalitate de a crea un ton pe care îl putem auzi. Ei fac acest lucru prin generarea unui val periodic la o anumită frecvență. Forma acestui val variază, dar cele mai obișnuite tipuri sunt valurile sinusoidale, pătrate, triunghiulare și de fierăstrău. Aceste tipuri de valuri sună diferit. Să creăm oscilatoare cu două triunghiuri.
var osc1 = context.createOscillator (), osc2 = context.createOscillator (); osc1.type = 'triunghi'; osc2.type = 'triunghi';
Oscilatoarele sunt destul de puternice în mod implicit, așa că, dacă nu vrem să dăm utilizatorilor noștri frica vieții lor, ar trebui să scădem puțin volumul. Deoarece API-ul Web Audio funcționează prin legarea nodurilor împreună la sunetul țevilor în jurul nostru, noi creăm și conectăm oscilatoarele noastre la un GainNode.
var volum = context.createGain (); volume.gain.value = 0.1;
Câștigați noduri înmulțind volumul sunetului care intră cu numărul pe care îl specificați. Deci, în acest caz, volumul va fi de o zecime din semnalul care îi este transmis.
Să conectăm totul.
// conectați oscilatoarele la oscilatorul osc1.connect (volum); osc2.connect (volum); // Conectați GainNode la volumul vorbitorilor volume.connect (context.destination);
Apoi, verificați că am reușit să jucăm oscilatoarele timp de două secunde.
// Cât timp să jucați oscilatorul pentru (în secunde) var duration = 2; // Când începeți să jucați oscilatoarele var startTime = context.currentTime; // Porniți oscilatoarele osc1.start (startTime); osc2.start (STARTTIME); // Opriți oscilatoarele la 2 secunde de acum osc1.stop (startTime + duration); osc1.stop (durata startTime +);
În acest moment ar trebui să auziți un sunet când reîncărcați pagina. Nu sunetul cel mai uimitor, sunt sigur că veți fi de acord, dar este un început!
Oscilatoarele pe care le-am creat se joacă la o frecvență prestabilită. Prin schimbarea acestei frecvențe, putem schimba nota muzicală pe care o auziți când este redată. Aceasta este ceea ce va face tonul nostru un pic mai plăcut și este esențial pentru sentimentul pe care doriți să îl invocați atunci când utilizatorul îl aude. Să ne schimbăm oscilatorul pentru a juca la nota "B4", care este de 493.883Hz.
var frecvență = 493,883; osc1.frequency.value = frecvență; osc2.frequency.value = frecvență;
Acum, dacă reîncărcați pagina, veți auzi tonul la un pas diferit. S-ar putea să te gândești la acest punct: "De ce jucăm două oscilatoare cu același pitch?" Ei bine, asta ne conduce la un mic truc pe care îl putem face pentru a ne face sunetul mai bun.
Dacă ne detonează oscilatoarele pentru a face ca frecvențele lor să fie ușor diferite, ajungem la un efect de cor, ducând sunetul mult mai bogat.
var frecvență = 493,883; osc1.frequency.value = frecvența + 1; osc2.frequency.value = frecvența - 2;
În timp ce sunetul nostru mic sună mult mai bine, se termină destul de brusc. Pentru a face acest lucru mai puțin jarring, ar trebui să reducem rapid volumul la sfârșitul sunetului; acest lucru este, de asemenea, cunoscut sub numele de "fading out". Acest lucru se face prin intermediul AudioParams care sunt utilizate pentru a automatiza valorile nodurilor audio, cum ar fi câștigul și frecvența. Vom intra în AudioParams cu mult mai multe detalii în următorul tutorial din această serie.
// Setați volumul să fie 0.1 chiar înainte de sfârșitul tonului volum.gain.setValueAtTime (0.1, startTime + durată - 0.05); // Efectuați rampa volumului la zero la 0,1 secunde după terminarea tonului volume.gain.linearRampToValueAtTime (0, startTime + duration);
Ceea ce spunem aici este să vă asigurați că volumul este la 0,1, 0,05 secunde înainte ca tonul să se termine. Apoi, continuați să rotiți volumul până când ajunge la zero, în același timp, terminând tonul.
Să terminăm codul până acum într-o singură funcție și să vedem ce avem.
// Redați oscilatoarele la o anumită frecvență și pentru o anumită perioadă de timp var playNote = funcție (frecvență, startTime, durată) var osc1 = context.createOscillator (), osc2 = context.createOscillator (), volume = context.createGain (); // Setați tipul oscilatorului osc1.type = 'triangle'; osc2.type = 'triunghi'; volume.gain.value = 0.1; // Configurați rotația nodului osc1.connect (volum); osc2.connect (volum); volume.connect (context.destination); // Oscilatoarele de detonare pentru efectul choral osc1.frequency.value = frecvența + 1; osc2.frequency.value = frecvența - 2; // Fade out volume.gain.setValueAtTime (0.1, startTime + durata - 0.05); volume.gain.linearRampToValueAtTime (0, startTime + durată); // începe oscilatoarele osc1.start (startTime); osc2.start (STARTTIME); // Opriți oscilatoarele osc1.stop (startTime + durată); osc2.stop (durata startTime +); ;
Pentru a face această funcție un pic mai puternică, am eliminat câteva variabile și le-am permis acestor valori să treacă. Aceasta ne permite să jucăm note diferite la frecvențe diferite. Acum este timpul să deveniți creativi!
Gândiți-vă la ceea ce doriți ca utilizatorii dvs. să se simtă atunci când tocmai au cumpărat ceva de la magazinul dvs. online. Este o experiență pozitivă - cineva a cumpărat ceva pe care l-au dorit pentru a-și face viața mai bună, nu au apărut erori și tranzacția a fost procesată cu succes.
Din punct de vedere audio, indicarea succesului este de fapt destul de simplă. Un motiv muzical care se ridică la pas la capăt sună întotdeauna mult mai bucuros decât unul care coboară. Nici măcar nu trebuie să aveți o melodie sau o grămadă de note pentru a transmite acest lucru. Pentru a dovedi această teorie, să folosim doar două note singulare pentru motivul nostru de succes.
// Redați un "B" acum care durează 0.116 secunde playNote (493.883, context.currentTime, 0.116); // Redați un "E" la fel ca nota precedentă terminând, care durează 0.232 secunde playNote (659.255, context.currentTime + 0.116, 0.232);
Ahh, sunetul dulce al succesului.
Amintiți-vă, dacă jocul cu oscilatoarele nu este ideea dvs. de distracție, puteți folosi un fișier mp3. Citește tutorialul anterior pentru a vedea cum.
Cel mai bine este să înfășurați cele două playNote sună într-o singură funcție, așa că avem un cârlig ușor în sunetul nostru.
var playSuccessSound = functie () // Joaca acum 'B', care dureaza 0.116 secunde playNote (493.883, context.currentTime, 0.116); // Redați un "E" la fel ca nota precedentă terminând, care durează 0.232 secunde playNote (659.255, context.currentTime + 0.116, 0.232); ;
Acum depinde de tine modul în care doriți să declanșați acest sunet și ce eveniment vreți să îl jucați ca reacție. În scopul acestui tutorial. să falsăm un apel Ajax care durează trei secunde. Vom folosi acest lucru pentru a pretinde că se întâmplă o anumită tranzacție de pe server.
var myFakeAjaxCall = funcție (callback) setTimeout (funcție () callback ();, 3000); ;
Tot ce trebuie să facem acum este să adăugați un ascultare a evenimentului la butonul nostru de cumpărare acum.
Accentsconagua
$ ('# buy-now-button') faceți clic pe (funcția () myFakeAjaxCall (funcția () playSuccessSound ();););Faceți clic pe buton, așteptați trei secunde, apoi dansați cu bucurie pe măsură ce auziți confirmarea audio că tranzacția a avut succes.
Pentru a schimba textul pe buton pentru a indica vizual că sa întâmplat ceva, Bootstrap oferă câteva funcții de ajutor pentru butoane pentru a schimba textul furnizat într-un atribut de date. Cum funcționează acest lucru este în afara domeniului de aplicare al acestui articol, dar aici este codul de completitudine.
$ (butonul "buy-now-button"), faceți clic (funcția () var that = this, $ btn = $ (this) .button ('complete');)););Sper că ați găsit acest tutorial util și că vă încurajați să adăugați sunet (responsabil!) La aplicația dvs. Web. Codul acestui tutorial este pe GitHub, precum și un demo al sunetului nostru final. Următorul tutorial din această serie este pentru cei dintre voi care au prins bug-ul oscilatorului; vom construi un sintetizator de sunet web.
