Share
Wat is er gebeurd met audio op internet? Voor een tijd was het web de platform om te pronken met je smaak in deuntjes. Van MIDI-versies van The Final Countdown die op de achtergrond borrelen, naar het afspelen van MySpace mp3's die in je gezicht worden gegooid, het geluid was overal.
Niet meer. Nadat ze gebrand zijn door deze gruweldaden voor gebruikerservaringen, blijven webontwikkelaars er ver van verwijderd. Jammer genoeg heeft geluid een achterbank op het web, terwijl native apps floreren.
Denk aan het meldingsgeluid dat u hoort wanneer u een e-mail ontvangt, of de kleine knaller wanneer u eraan trekt om de Twitter-app te verversen. Zulke apps laten zien hoe geluid een integraal onderdeel kan zijn van een geweldige gebruikerservaring.
In deze tutorial laat ik je zien hoe je geluid op een goede manier terug kunt brengen naar het web!
De Web Audio API is een krachtige, krachtige manier om geluid in de browser te manipuleren. Voordat je verder gaat met deze tutorial, wil je misschien eerst de vorige tutorial in deze serie bekijken waarin ik heb besproken hoe je een basisgeluid maakt met JavaScript en een mp3-bestand afspeelt.
Voor deze zelfstudie gaan we een betalingspagina bespotten die ons feedback geeft over het feit dat onze betaling succesvol is. Ik zal Bootstrap gebruiken om dingen sneller mooier te laten lijken.
Voeg geluid toe aan uw web-app Mijn winkel
Ben je klaar om dit item te kopen??
Je zult helemaal onderaan merken dat ik een bestand heb toegevoegd genaamd "success-sound.js". Hier zullen we onze code schrijven om de gebruiker feedback te geven wanneer zijn betaling succesvol is. Als je dit bestand eenmaal hebt gemaakt, is het eerste dat we willen doen een AudioContext maken. U herinnert zich misschien uit de vorige tutorial dat een AudioContext is hoe we de verschillende functies van de Web Audio API gebruiken.
var context = new AudioContext ();
Een van de beste dingen aan de Web Audio API is dat het ons in staat stelt om geluiden vanaf het begin te creëren zonder zelfs maar naar een audiobestand te kijken. We doen dit met behulp van oscillatoren.
Oscillatoren zijn een manier om een toon te creëren die we kunnen horen. Ze doen dit door een periodieke golf op een bepaalde frequentie te genereren. De vorm van deze golf varieert, maar de meest voorkomende typen zijn sinus-, vierkant-, driehoek- en zaagtandgolven. Dit soort golven klinkt allemaal anders. Laten we twee driehoeksgolfoscillatoren maken.
var osc1 = context.createOscillator (), osc2 = context.createOscillator (); osc1.type = 'triangle'; osc2.type = 'triangle';
Oscillatoren zijn standaard vrij luid, dus tenzij we onze gebruikers de schrik van hun leven willen geven, moeten we het volume wat lager zetten. Omdat de Web Audio API werkt door knopen samen te ketenen om geluid rond te leiden, creëren en verbinden we onze oscillatoren met een GainNode.
var volume = context.createGain (); volume.gain.value = 0.1;
Gain-knooppunten vermenigvuldigen het volume van het geluid dat binnenkomt met het nummer dat u opgeeft. In dit geval zal het volume dus een tiende van het signaal zijn dat eraan wordt doorgegeven.
Laten we alles verbinden.
// Sluit oscillatoren aan op de GainNode osc1.connect (volume); osc2.connect (volume); // Verbind GainNode met de speakers volume.connect (context.destination);
Controleer dan of we het goed hebben gedaan door de oscillators twee seconden lang te bespelen.
// Hoelang speel je een oscillator voor (in seconden) var duration = 2; // Wanneer beginnen met het spelen van de oscillatoren var startTime = context.currentTime; // Start de oscillatoren osc1.start (startTime); osc2.start (startTime); // Stop de oscillators 2 seconden vanaf nu osc1.stop (startTime + duur); osc1.stop (startTime + duur);
Op dit punt hoort u een toon wanneer u uw pagina opnieuw laadt. Niet het meest verbazingwekkende geluid, ik weet zeker dat je het hiermee eens bent, maar het is een begin!
De oscillators die we hebben gemaakt, spelen op een standaardfrequentie. Door deze frequentie te veranderen, kunnen we de muzieknoot die je hoort veranderen wanneer deze wordt gespeeld. Dit is wat onze toon een beetje aangenamer zal maken en het is de sleutel tot het gevoel dat je wilt oproepen wanneer je gebruiker het hoort. Laten we onze oscillator veranderen om te spelen bij noot "B4", die 493.883Hz is.
var-frequentie = 493.883; osc1.frequency.value = frequentie; osc2.frequency.value = frequentie;
Als we de pagina opnieuw laden, hoor je de toon op een andere toonhoogte. Misschien denk je op dit moment: "Waarom spelen we twee oscillators met precies dezelfde toonhoogte?" Welnu, dit leidt ons naar een kleine truc die we kunnen doen om onze toon een beetje leuker te laten klinken.
Als we onze oscillators detunden om hun frequenties iets anders te maken, krijgen we een mooi choruseffect, waardoor onze toon veel rijker klinkt.
var-frequentie = 493.883; osc1.frequency.value = frequentie + 1; osc2.frequency.value = frequentie - 2;
Terwijl ons kleine geluid veel beter klinkt, eindigt het nogal abrupt. Om dit minder schokkend te maken, moeten we het volume aan het einde van het geluid snel verlagen; dit wordt ook wel "uitfaden" genoemd. Dit gebeurt via AudioParams die worden gebruikt om de waarden van audioknooppunten, zoals versterking en frequentie, te automatiseren. We zullen in de volgende tutorial in deze serie in meer detail op AudioParams ingaan.
// Stel het volume in op 0,1 vóór het einde van het toonvolume.gain.setValueAtTime (0,1, startTime + duur - 0,05); / / Maak het volume helling naar nul 0,1 seconden na het einde van de toon volume.gain.linearRampToValueAtTime (0, startTime + duur);
Wat we hier zeggen, is ervoor zorgen dat het volume 0,1, 0,05 seconden is voordat onze toon is voltooid. Blijf het volume zachter zetten totdat het nul is, op hetzelfde moment dat onze toon is afgelopen.
Laten we onze code tot nu toe in één functie samenvatten en zien wat we hebben.
// Speel oscillatoren op een bepaalde frequentie en gedurende een bepaalde tijd var playNote = function (frequency, startTime, duration) var osc1 = context.createOscillator (), osc2 = context.createOscillator (), volume = context.createGain (); // Stel oscillator-wave type in osc1.type = 'triangle'; osc2.type = 'triangle'; volume.gain.value = 0.1; // Stel knooppuntroutering in osc1.connect (volume); osc2.connect (volume); volume.connect (context.destination); // Detune oscillators voor choruseffect osc1.frequency.value = frequentie + 1; osc2.frequency.value = frequentie - 2; // Fade out volume.gain.setValueAtTime (0,1, startTime + duur - 0,05); volume.gain.linearRampToValueAtTime (0, startTime + duur); // Start oscillatoren osc1.start (startTime); osc2.start (startTime); // Stop oscillatoren osc1.stop (startTime + duur); osc2.stop (startTime + duur); ;
Om deze functie wat krachtiger te maken, heb ik een aantal variabelen verwijderd en toestemming gegeven om deze waarden door te geven. Hierdoor kunnen we verschillende noten op verschillende frequenties spelen. Nu is het tijd om creatief te worden!
Denk na over wat u wilt dat uw gebruikers voelen als ze net iets hebben gekocht in uw online winkel. Het is een positieve ervaring - iemand heeft iets gekocht wat hij wilde om zijn leven op de een of andere manier te verbeteren, er deden zich geen fouten voor en de transactie werd met succes verwerkt.
Qua audio is de indicatie van succes eigenlijk vrij simpel. Een muzikaal motief dat aan het eind omhoog gaat in de toonhoogte klinkt altijd veel vreugdevoller dan een die naar beneden gaat. Je hoeft niet eens een deuntje of een hele hoop noten te hebben om dit over te brengen. Om deze theorie te bewijzen, laten we gewoon twee enkele tonen gebruiken voor ons succesmotief.
// Speel een 'B' af die 0,11 seconden meegaat playNote (493.883, context.currentTime, 0.116); // Speel een 'E' net zoals de vorige noot eindigt, die duurt 0,232 seconden playNote (659.255, context.currentTime + 0.116, 0.232);
Ah, het zoete geluid van succes.
Onthoud dat als spelen met oscillators niet jouw idee van plezier is, je in plaats daarvan een mp3-bestand kunt gebruiken. Lees de vorige tutorial om te zien hoe.
Het is het beste om deze twee in te pakken playNote doet een beroep op één functieaanroep, dus we hebben een gemakkelijke manier om ons geluid te horen.
var playSuccessSound = function () // Speel een 'B' af dat 0,11 seconden meegaat playNote (493.883, context.currentTime, 0.116); // Speel een 'E' net zoals de vorige noot eindigt, die duurt 0,232 seconden playNote (659.255, context.currentTime + 0.116, 0.232); ;
Het is nu aan jou hoe je dit geluid wilt activeren en welke gebeurtenis je wilt spelen in reactie daarop. Voor de doeleinden van deze zelfstudie. laten we een Ajax-oproep nep maken die drie seconden duurt. We gebruiken dit om te doen alsof er een transactie aan de server plaatsvindt.
var myFakeAjaxCall = function (callback) setTimeout (function () callback ();, 3000); ;
Het enige wat we nu moeten doen is een gebeurtenislistener toevoegen aan onze knop Nu kopen.
Accentsconagua
$ ('# buy-now-button'). click (function () myFakeAjaxCall (function () playSuccessSound ();););Klik op de knop, wacht drie seconden en dans dan vrolijk terwijl je de audio-bevestiging hoort dat je transactie succesvol was.
Om de tekst op de knop te wijzigen om visueel aan te geven dat er iets is gebeurd, biedt Bootstrap enkele knophulpfuncties om de tekst in een gegevensattribuut om te wisselen. Hoe dit werkt valt buiten het bestek van dit artikel, maar hier is de code voor volledigheid.
$ ('# buy-now-button'). klik (functie () var that = this, $ btn = $ (this) .button ('loading'); myFakeAjaxCall (function () playSuccessSound (); $ btn .button ('compleet');););Ik hoop dat je deze tutorial nuttig hebt gevonden en dat het je wordt aangemoedigd om geluid (verantwoordelijk!) Toe te voegen aan je webapp. De code voor deze tutorial staat op GitHub, evenals een demo van ons uiteindelijke geluid. De volgende zelfstudie in deze serie is voor degenen onder u die de oscillatorbug hebben gepakt; we zullen een webaudiosynthesizer bouwen.
