Share
Hva skjedde med lyd på nettet? For en tid var nettet de plattform for å vise frem din smak i melodier. Fra MIDI-versjoner av The Final Countdown boblende i bakgrunnen, for å autoplaying MySpace mp3s blir kastet i ansiktet, var lyden overalt.
Ikke nå lenger. Etter å ha blitt brent av disse brukeropplevelsene, fortsetter webutviklere godt bort fra det. Dessverre har lyden tatt en baksete på nettet, mens innfødte apps blomstrer.
Tenk på varselet du hører når du mottar en e-post, eller den lille popen når du drar for å oppdatere Twitter-appen. Slike programmer viser hvordan lyd kan være integrert i en flott brukeropplevelse.
I denne veiledningen vil jeg vise deg hvordan du tar med lyden tilbake på nettet, på en god måte!
Web Audio API er en kraftig og effektiv måte å manipulere lyd på i nettleseren. Før du fortsetter denne opplæringen, vil du kanskje sjekke ut forrige veiledning i denne serien der jeg dekket hvordan du lager en grunnleggende lyd ved hjelp av JavaScript, så vel som å spille en mp3-fil.
For denne opplæringen skal vi lure opp en betalingsside som gir oss lyd tilbakemelding om at betalingen vår er vellykket. Jeg bruker Bootstrap for å få ting til å se bedre ut raskere.
Legg til lyd i webappen din Min butikk
Er du klar til å kjøpe denne varen?
Du vil merke helt nederst at jeg har tatt med en fil som heter "success-sound.js". Dette er hvor vi skal skrive vår kode for å gi lyd tilbakemelding til brukeren når betalingen er vellykket. Når du har opprettet denne filen, er det første vi ønsker å lage en AudioContext. Du kan kanskje huske fra den siste opplæringen at en AudioContext er hvordan vi får tilgang til Web Audio APIs ulike funksjoner.
var context = new AudioContext ();
En av de beste tingene med Web Audio API er at det lar oss lage lyder fra grunnen uten å se på en lydfil. Vi gjør dette ved hjelp av oscillatorer.
Oscillatorer er en måte å skape en tone vi kan høre på. De gjør dette ved å generere en periodisk bølge ved en bestemt frekvens. Formen på denne bølgen varierer, men de vanligste typene er sinus-, firkant-, trekant- og sawtooth bølger. Disse typer bølger lyder annerledes. La oss lage to trekantbølge-oscillatorer.
var osc1 = context.createOscillator (), osc2 = context.createOscillator (); osc1.type = 'triangle'; osc2.type = 'triangle';
Oscillatorer er ganske høye som standard, så med mindre vi vil gi brukerne frykt for deres liv, bør vi skru ned volumet litt. Fordi Web Audio API fungerer ved å knytte knuter sammen for å lede lyd rundt, oppretter og kobler vi oscillatorene til en GainNode.
var volum = context.createGain (); volum.gain.value = 0,1;
Gain noder multiplisere volumet av lyden som kommer inn med nummeret du angir. Så i dette tilfellet vil volumet være en tiendedel av signalet som sendes til det.
La oss koble alt sammen.
// Koble oscillatorer til GainNode osc1.connect (volum); osc2.connect (volum); // Koble GainNode til høyttalerne volume.connect (context.destination);
Sjekk så at vi har gjort det ved å spille oscillatorene i to sekunder.
// Hvor lang tid å spille oscillator for (i sekunder) var duration = 2; // Når du skal begynne å spille oscillatorene, var startTime = context.currentTime; // Start oscillatorene osc1.start (startTime); osc2.start (starttid); // Stopp oscillatorene 2 sekunder fra nå osc1.stop (startTime + varighet); osc1.stop (starttid + varighet);
På dette punktet bør du høre en tone når du oppdaterer siden din. Ikke den mest fantastiske lyden, jeg er sikker på at du er enig, men det er en start!
Oscillatorene vi har opprettet, spiller på en standardfrekvens. Ved å endre denne frekvensen kan vi endre musikknotatet du hører når det spilles. Dette er hva som vil gjøre tonen vår litt mer behagelig og er nøkkelen til følelsen du vil bruke når brukeren hører det. La oss forandre oscillatoren vår for å spille på notatet "B4", som er 493.883Hz.
var frekvens = 493.883; osc1.frequency.value = frequency; osc2.frequency.value = frekvens;
Nå, hvis vi oppdaterer siden, vil du høre tonen på en annen tonehøyde. Du kan tenke på dette punktet, "Hvorfor spiller vi to oscillatorer med nøyaktig samme tonehøyde?" Vel, dette fører oss til et lite triks vi kan gjøre for å få vår tone lyd litt finere.
Hvis vi avgrenser oscillatorene våre for å gjøre deres frekvenser litt annerledes, slutter vi med en fin kor-effekt, noe som gjør vår tone lyd mye rikere.
var frekvens = 493.883; osc1.frequency.value = frekvens + 1; osc2.frequency.value = frekvens - 2;
Mens vår lille lyd høres mye bedre, slutter den ganske bratt. For å gjøre dette mindre, bør vi raskt skru ned volumet på slutten av lyden; dette er også kjent som "fading out". Dette gjøres via AudioParams som brukes til å automatisere verdiene av lyd noder, for eksempel forsterkning og frekvens. Vi vil gå inn i AudioParams i mye mer detalj i neste opplæring i denne serien.
// Sett volumet til 0,1 like før slutten av tonen volume.gain.setValueAtTime (0,1, startTime + varighet - 0,05); // Gjør volum rampen ned til null 0,1 sekunder etter slutten av tone volum.gain.linearRampToValueAtTime (0, startTime + varighet);
Det vi sier her, er å sørge for at volumet er på 0,1, 0,05 sekunder før tonen er ferdig. Fortsett å skru volumet ned til det når null samtidig som tonen vår er ferdig.
La oss pakke inn koden vår så langt inn i en enkelt funksjon og se hva vi har.
// Spill oscillatorer på bestemte frekvenser og for en viss tid var playNote = funksjon (frekvens, starttid, varighet) var osc1 = context.createOscillator (), osc2 = context.createOscillator (), volum = context.createGain (); // Sett oscillatorbølge type osc1.type = 'triangle'; osc2.type = 'triangle'; volum.gain.value = 0,1; // Konfigurere node ruting osc1.connect (volum); osc2.connect (volum); volume.connect (context.destination); // Detune oscillatorer for kor effekt osc1.frequency.value = frekvens + 1; osc2.frequency.value = frekvens - 2; // Fade out volume.gain.setValueAtTime (0,1, startTime + varighet - 0,05); volume.gain.linearRampToValueAtTime (0, startTime + varighet); // Start oscillatorer osc1.start (startTime); osc2.start (starttid); // Stopp oscillatorer osc1.stop (startTime + varighet); osc2.stop (starttid + varighet); ;
For å gjøre denne funksjonen litt kraftigere, har jeg fjernet noen av variablene og tillatt disse verdiene å bli sendt inn. Dette tillater oss å spille forskjellige notater på forskjellige frekvenser. Nå er det på tide å bli kreativ!
Tenk på hva du vil at brukerne skal føle når de nettopp har kjøpt noe fra nettbutikken din. Det er en positiv opplevelse - noen har kjøpt noe de ønsket for å gjøre livet bedre på en eller annen måte, ingen feil oppstod, og transaksjonen ble behandlet med hell.
Audiovis, indikasjon på suksess er faktisk ganske enkelt. En musikalsk motiv som går opp i tonehøyde på slutten høres alltid mye mer glede enn en som går ned. Du trenger ikke engang å ha en melodi eller en hel del notater for å formidle dette. For å bevise denne teorien, la oss bare bruke to enkelt notater for vårt suksessmotiv.
// Spill en 'B' nå som varer i 0.116 sekunder playNote (493.883, context.currentTime, 0.116); // Spill en 'E' akkurat som forrige notat avsluttes, som varer i 0,222 sekunder playNote (659.255, context.currentTime + 0.116, 0.232);
Ahh, den søte lyden av suksess.
Husk at hvis du spiller med oscillatorer, ikke er ideen om moro, kan du bruke en mp3-fil i stedet. Les av forrige veiledning for å se hvordan.
Det er best å pakke disse to playNote kaller inn i en enkelt funksjons samtale så vi har en enkel krok til å spille av lyden vår.
var playSuccessSound = funksjon () // Spill en 'B' nå som varer i 0.116 sekunder playNote (493.883, context.currentTime, 0.116); // Spill en 'E' akkurat som forrige notat avsluttes, som varer i 0,222 sekunder playNote (659.255, context.currentTime + 0.116, 0.232); ;
Det er nå opp til deg hvordan du vil utløse denne lyden og hvilken hendelse du ønsker å spille den i reaksjon på. I forbindelse med denne opplæringen. la oss falle et Ajax-anrop som tar tre sekunder. Vi bruker dette til å late som om noen server-side transaksjon skjer.
var myFakeAjaxCall = funksjon (tilbakering) setTimeout (funksjon () callback ();, 3000); ;
Alt vi trenger å gjøre nå er å legge til en hendelselytter på vår Kjøp nå-knapp.
Accentsconagua
$ ('# buy-now-button'). klikk (funksjon () myFakeAjaxCall (funksjon () playSuccessSound ();););Klikk på knappen, vent i tre sekunder, og dans med glede når du hører lydbekreftelsen om at transaksjonen din var vellykket.
For å endre teksten på knappen for å indikere visuelt at noe har skjedd, gir Bootstrap noen knapphjelpsfunksjoner for å bytte i teksten som er gitt i et datatributt. Hvordan dette virker er utenfor rammen av denne artikkelen, men her er koden for fullstendighet.
$ ('# buy-now-button'). klikk (funksjon () var det = dette, $ btn = $ (dette). knapp ('laster'); myFakeAjaxCall (funksjon () playSuccessSound (); $ btn .button ('complete');););Jeg håper du har funnet denne opplæringen nyttig, og at det oppfordres deg til å legge til lyd (ansvarlig!) Til din webapp. Koden for denne opplæringen er på GitHub, samt en demonstrasjon av vår endelige lyd. Den neste opplæringen i denne serien er for de av dere som har tatt oscillatorbuggen; vi skal bygge en web lyd synthesizer.
