Share
Vad hände med ljud på webben? För en tid var webben de plattform för att visa upp din smak i låtar. Från MIDI-versionerna av The Final Countdown bubblande i bakgrunden, för att spela upp MySpace mp3-filer i ditt ansikte, var ljudet överallt.
Inte längre. Efter att ha blivit brända av dessa oroliga användarupplevelser, håller webutvecklare sig bra borta från det. Tyvärr har ljudet tagit en baksätning på webben, medan infödda appar blomstrar.
Tänk på meddelandet ljudet du hör när du tar emot ett e-postmeddelande eller den lilla popen när du drar för att uppdatera Twitter-appen. Sådana appar visar hur ljud kan vara en integrerad del av en stor användarupplevelse.
I denna handledning visar jag dig hur du tar med dig ljud på webben, på ett bra sätt!
Web Audio API är ett kraftfullt och högpresterande sätt att manipulera ljud i webbläsaren. Innan du fortsätter denna handledning kanske du vill kolla in den föregående handledningen i denna serie där jag täckte hur man gör ett grundläggande ljud med hjälp av JavaScript samt spela en mp3-fil.
För denna handledning kommer vi att mocka upp en betalningssida som ger oss ljudåterkoppling att vår betalning är framgångsrik. Jag använder Bootstrap för att göra sakerna snyggare snabbare.
Lägg till ljud i din webbapp Min butik
Är du redo att köpa den här produkten?
Du märker längst ner till att jag har inkluderat en fil som heter "success-sound.js". Det här är där vi skriver vår kod för att ge ljudåterkoppling till användaren när betalningen är framgångsrik. När du har skapat den här filen är det första vi vill göra, skapa en AudioContext. Du kanske kommer ihåg från den senaste handledningen att en AudioContext är hur vi öppnar Web Audio APIs olika funktioner.
var context = new AudioContext ();
En av de bästa sakerna med Web Audio API är att det låter oss skapa ljud från början utan att ens titta på en ljudfil. Vi gör detta med hjälp av oscillatorer.
Oscillatorer är ett sätt att skapa en ton som vi kan höra. De gör det genom att generera en periodisk våg vid en viss frekvens. Formen på denna våg varierar, men de vanligaste typerna är sinus-, kvadrat-, triangel- och sågtandvågor. Dessa typer av vågor låter olika. Låt oss skapa två trekantvågoscillatorer.
var osc1 = context.createOscillator (), osc2 = context.createOscillator (); osc1.type = 'triangel'; osc2.type = 'triangel';
Oscillatorer är ganska höga som standard, så om vi inte vill ge våra användare rädsla för sina liv, bör vi sänka volymen lite. Eftersom Web Audio API fungerar genom att knyta noder tillsammans för att leda ljud runt, skapar och kopplar vi våra oscillatorer till en GainNode.
var volym = context.createGain (); volym.gain.value = 0,1;
Gain noder multiplicera volymen av ljudet som kommer in med det nummer du anger. Så i detta fall kommer volymen att vara en tiondel av signalen som skickas till den.
Låt oss ansluta allt.
// Anslut oscillatorer till GainNode osc1.connect (volym); osc2.connect (volym); // Anslut GainNode till högtalarna volume.connect (context.destination);
Kontrollera sedan att vi har gjort det direkt genom att spela oscillatorerna i två sekunder.
// Hur lång tid spelar oscillatorn för (i sekunder) var duration = 2; // När du börjar spela oscillatorerna var startTime = context.currentTime; // Starta oscillatorerna osc1.start (startTime); osc2.start (starttime); // Stäng oscillatorerna 2 sekunder från nu osc1.stop (startTime + duration); osc1.stop (starttid + varaktighet);
Vid denna tidpunkt bör du höra en ton när du laddar om sidan. Inte det mest fantastiska ljudet, jag är säker på att du håller med, men det är en början!
Oscillatorerna som vi skapat spelar med en standardfrekvens. Genom att ändra frekvensen kan vi ändra den musikaliska noten du hör när den spelas. Det här är vad som gör vår ton lite mer tilltalande och är nyckeln till den känsla som du vill åberopa när din användare hör det. Låt oss ändra vår oscillator för att spela på notis "B4", vilket är 493.883Hz.
var frekvens = 493.883; osc1.frequency.value = frequency; osc2.frequency.value = frequency;
Nu om vi laddar om sidan hörs tonen i en annan tonhöjd. Du kanske tänker på denna punkt, "Varför spelar vi två oscillatorer med exakt samma tonhöjd?" Tja, det leder oss till ett litet knep vi kan göra för att göra tonljudet lite trevligare.
Om vi avskyr våra oscillatorer för att göra sina frekvenser lite annorlunda, slutar vi med en fin kör effekt, vilket gör vår ton ljud mycket rikare.
var frekvens = 493.883; osc1.frequency.value = frekvens + 1; osc2.frequency.value = frekvens - 2;
Medan vårt lilla ljud låter mycket bättre slutar det ganska plötsligt. För att göra detta mindre, bör vi snabbt sänka volymen i slutet av ljudet. detta kallas också "fading out". Detta görs via AudioParams som används för att automatisera värdena för ljudnod, till exempel förstärkning och frekvens. Vi kommer att gå in i AudioParams mer detaljerat i nästa handledning i den här serien.
// Ange volymen till 0,1 precis före slutet av tonen volume.gain.setValueAtTime (0.1, startTime + duration - 0.05); // Gör volymen ramp ner till noll 0,1 sekunder efter slutet av tonen volym.gain.linearRampToValueAtTime (0, startTime + duration);
Vad vi säger här är att se till att volymen är 0,1, 0,05 sekunder innan tonen slutar. Håll sedan volymen nedåt tills den når noll samtidigt som tonen slutar.
Låt oss sätta upp vår kod hittills i en enda funktion och se vad vi har.
// Spela oscillatorer vid viss frekvens och för en viss tid var playNote = funktion (frekvens, starttid, varaktighet) var osc1 = context.createOscillator (), osc2 = context.createOscillator (), volym = context.createGain (); // Ställ oscillatorvågstyp osc1.type = 'triangle'; osc2.type = 'triangel'; volym.gain.value = 0,1; // Ställ in noddirigering osc1.connect (volym); osc2.connect (volym); volume.connect (context.destination); // Detune oscillatorer för kör effekt osc1.frequency.value = frekvens + 1; osc2.frequency.value = frekvens - 2; // Fade out volume.gain.setValueAtTime (0.1, startTime + duration - 0.05); volume.gain.linearRampToValueAtTime (0, startTime + duration); // Starta oscillatorer osc1.start (startTime); osc2.start (starttime); // Stoppa oscillatorer osc1.stop (startTime + duration); osc2.stop (starttid + varaktighet); ;
För att göra denna funktion lite kraftfullare har jag tagit bort några av variablerna och tillåtet att dessa värden skickas in. Detta gör att vi kan spela olika noteringar vid olika frekvenser. Nu är det dags att bli kreativ!
Tänk på vad du vill att dina användare ska känna när de bara har köpt något från din webbutik. Det är en positiv upplevelse - någon har köpt något de ville ha för att göra sitt liv bättre på något sätt, inga fel uppstod och transaktionen behandlades framgångsrikt.
Audiovis, indikation på framgång är faktiskt ganska enkel. En musikalisk motiv som går upp i tonhöjd i slutet låter alltid mycket mer glädjande än den som går ner. Du behöver inte ens ha en melodi eller en hel massa anteckningar för att förmedla detta. För att bevisa denna teori, låt oss bara använda två enkla anteckningar för vårt framgångsmotiv.
// Spela en 'B' nu som varar i 0.116 sekunder playNote (493.883, context.currentTime, 0.116); // Spela en 'E' precis som den föregående noteringen avslutas, som varar i 0,222 sekunder playNote (659.255, context.currentTime + 0.116, 0.232);
Ahh, det söta ljudet av framgång.
Kom ihåg att om du spelar med oscillatorer inte är din idé om kul kan du använda en mp3-fil istället. Läs igenom den tidigare handledningen för att se hur.
Det är bäst att paketera dessa två playNote samtal till ett enda funktionssamtal så vi har en enkel krok för att spela vårt ljud.
var playSuccessSound = function () // Spela en 'B' nu som varar i 0.116 sekunder playNote (493.883, context.currentTime, 0.116); // Spela en 'E' precis som den föregående noteringen avslutas, som varar i 0,222 sekunder playNote (659.255, context.currentTime + 0.116, 0.232); ;
Det är nu upp till dig hur du vill utlösa det här ljudet och vilken händelse du vill spela den i reaktion på. För syftet med denna handledning. låt oss förfalska ett Ajax-samtal som tar tre sekunder. Vi använder det här för att låtsas att någon transaktion på serversidan händer.
var myFakeAjaxCall = funktion (återuppringning) setTimeout (funktion () callback ();, 3000); ;
Allt vi behöver göra nu är att lägga till en händelse lyssnare på vår Köp nu-knapp.
Accentsconagua
$ ('# buy-now-button'). klicka (funktion () myFakeAjaxCall (funktion () playSuccessSound ();););Klicka på knappen, vänta tre sekunder och dansa sedan med glädje när du hör ljudbekräftelsen att din transaktion lyckades.
För att ändra texten på knappen för att visa visuellt att något har hänt, ger Bootstrap vissa knapphjälpfunktioner att byta i texten som tillhandahålls i en datattribut. Hur det här fungerar ligger utanför ramen för denna artikel, men här är koden för fullständighet.
$ ('# buy-now-button'). Klicka på (funktion ) var det = detta, $ btn = $ (detta). . knappen ('komplett');););Jag hoppas att du har hittat denna handledning användbar och att det uppmuntras dig att lägga till ljud (ansvarsfullt!) Till din webbapp. Koden för denna handledning finns på GitHub, samt en demonstration av vårt slutliga ljud. Nästa handledning i denna serie är för dig som har fångat oscillatorbuggen; vi kommer att bygga en webb ljudsyntetiserare.
