Share
Cosa è successo all'audio sul web? Per un po 'il web è stato il piattaforma per mettere in mostra i tuoi gusti. Dalle versioni MIDI di The Final Countdown che gorgogliano in sottofondo, per riprodurre automaticamente gli mp3 di MySpace che vengono gettati in faccia, il suono è ovunque.
Non più. Essendo stati bruciati da queste atrocità di esperienza degli utenti, gli sviluppatori web si stanno allontanando da esso. Purtroppo il suono è finito sul web, mentre le app native prosperano.
Pensa al suono della notifica che senti quando ricevi un'email o al piccolo pop quando togli per aggiornare l'app di Twitter. Tali app mostrano come il suono può essere parte integrante di una grande esperienza utente.
In questo tutorial ti mostrerò come riportare il suono sul web, in un buon modo!
L'API Web Audio è un modo potente e ad alte prestazioni per manipolare il suono nel browser. Prima di continuare questo tutorial, potresti voler controllare il precedente tutorial di questa serie in cui ho spiegato come creare un suono di base usando JavaScript e riprodurre un file mp3.
Per questo tutorial prepareremo una pagina di pagamento che ci fornirà un feedback audio sul fatto che il nostro pagamento è andato a buon fine. Userò Bootstrap per rendere le cose più piacevoli.
Aggiungi suoni alla tua app Web Il mio negozio
Sei pronto per comprare questo oggetto?
Noterai che in fondo ho incluso un file chiamato "success-sound.js". Qui è dove scriveremo il nostro codice per fornire feedback audio all'utente quando il pagamento è andato a buon fine. Una volta creato questo file, la prima cosa che vogliamo fare è creare un AudioContext. Potresti ricordare dall'ultimo tutorial che un AudioContext è il modo in cui accediamo alle varie funzioni dell'API Web Audio.
var context = new AudioContext ();
Una delle cose migliori dell'API Web Audio è che ci consente di creare suoni da zero senza nemmeno guardare un file audio. Lo facciamo usando gli oscillatori.
Gli oscillatori sono un modo per creare un tono che possiamo sentire. Lo fanno generando un'onda periodica ad una certa frequenza. La forma di questa onda varia, ma i tipi più comuni sono le onde sinusoidali, quadrate, triangolari e a dente di sega. Questi tipi di onde suonano tutti diversi. Creiamo due oscillatori a onda triangolare.
var osc1 = context.createOscillator (), osc2 = context.createOscillator (); osc1.type = 'triangle'; osc2.type = 'triangle';
Gli oscillatori sono piuttosto rumorosi di default, quindi a meno che non vogliamo dare ai nostri utenti lo spavento della loro vita, dovremmo abbassare un po 'il volume. Poiché l'API Web Audio funziona collegando i nodi insieme per sondare il suono, creiamo e colleghiamo i nostri oscillatori a un GainNode.
var volume = context.createGain (); volume.gain.value = 0,1;
I nodi di guadagno moltiplicano il volume del suono proveniente dal numero specificato. Quindi in questo caso il volume sarà pari a un decimo del segnale che gli verrà passato.
Colleghiamo tutto.
// Collega gli oscillatori al GainNode osc1.connect (volume); osc2.connect (volume); // Collega il GainNode agli altoparlanti volume.connect (context.destination);
Quindi verifica di averlo fatto correttamente suonando gli oscillatori per due secondi.
// Per quanto tempo riprodurre l'oscillatore per (in secondi) var duration = 2; // Quando iniziare a giocare agli oscillatori var startTime = context.currentTime; // Avvia gli oscillatori osc1.start (startTime); osc2.start (startTime); // Interrompe gli oscillatori a 2 secondi da ora osc1.stop (startTime + durata); osc1.stop (startTime + durata);
A questo punto dovresti sentire un tono quando ricarichi la pagina. Non è il suono più incredibile, sono sicuro che sarai d'accordo, ma è un inizio!
Gli oscillatori che abbiamo creato suonano con una frequenza predefinita. Modificando questa frequenza, possiamo cambiare la nota musicale che senti quando viene suonata. Questo è ciò che renderà il nostro tono un po 'più piacevole ed è la chiave per la sensazione che vuoi invocare quando il tuo utente lo ascolta. Cambiamo il nostro oscillatore per suonare alla nota "B4", che è 493,883Hz.
frequenza var = 493.883; osc1.frequency.value = frequency; osc2.frequency.value = frequency;
Ora se ricarichiamo la pagina, sentirai il tono con un tono diverso. A questo punto potresti pensare: "Perché stiamo suonando due oscillatori con la stessa identica altezza?" Bene, questo ci porta ad un piccolo trucco che possiamo fare per rendere il nostro tono un po 'più bello.
Se scordiamo i nostri oscillatori per rendere le loro frequenze leggermente diverse, otteniamo un bel effetto coro, rendendo il nostro suono molto più ricco.
frequenza var = 493.883; osc1.frequency.value = frequency + 1; osc2.frequency.value = frequency - 2;
Mentre il nostro piccolo suono suona molto meglio, finisce bruscamente. Per rendere questo meno fastidioso, dovremmo abbassare rapidamente il volume alla fine del suono; questo è anche noto come "svanire". Questo viene fatto tramite AudioParam che vengono utilizzati per automatizzare i valori dei nodi audio, come guadagno e frequenza. Entreremo in AudioParams in modo molto più dettagliato nel prossimo tutorial di questa serie.
// Imposta il volume su 0.1 poco prima della fine del volume volume.gain.setValueAtTime (0.1, startTime + duration - 0.05); // Riduce il volume a zero 0,1 secondi dopo la fine del volume volume.gain.linearRampToValueAtTime (0, startTime + duration);
Quello che stiamo dicendo qui è assicurarsi che il volume sia a 0.1, 0.05 secondi prima che il nostro timbro termini. Quindi continua a ruotare il volume fino a quando non raggiunge lo zero, allo stesso tempo che finisce il nostro tono.
Completiamo il nostro codice fino ad ora in un'unica funzione e vediamo cosa abbiamo.
// Riproduce gli oscillatori a una certa frequenza e per un certo tempo var playNote = function (frequenza, startTime, durata) var osc1 = context.createOscillator (), osc2 = context.createOscillator (), volume = context.createGain (); // Imposta il tipo di onda dell'oscillatore osc1.type = 'triangle'; osc2.type = 'triangle'; volume.gain.value = 0,1; // Imposta nodo routing osc1.connect (volume); osc2.connect (volume); volume.connect (context.destination); // Detune oscillators per l'effetto chorus osc1.frequency.value = frequency + 1; osc2.frequency.value = frequency - 2; // Fade out volume.gain.setValueAtTime (0.1, startTime + duration - 0.05); volume.gain.linearRampToValueAtTime (0, startTime + durata); // Avvia oscillatori osc1.start (startTime); osc2.start (startTime); // Stop oscillators osc1.stop (startTime + duration); osc2.stop (startTime + durata); ;
Per rendere questa funzione un po 'più potente, ho rimosso alcune variabili e ho lasciato passare questi valori. Ciò ci consente di suonare note diverse a frequenze diverse. Ora è il momento di essere creativi!
Pensa a ciò che desideri che i tuoi utenti sentano quando hanno appena acquistato qualcosa dal tuo negozio online. È un'esperienza positiva - qualcuno ha comprato qualcosa che desiderava per migliorare la sua vita in qualche modo, non si sono verificati errori e la transazione è stata elaborata con successo.
Per quanto riguarda l'audio, l'indicazione del successo è in realtà abbastanza semplice. Un motivo musicale che sale di tono alla fine sembra sempre molto più gioioso di uno che va giù. Non hai nemmeno bisogno di avere una melodia o un intero mazzo di note per trasmettere questo. Per dimostrare questa teoria, usiamo solo due note singole per il nostro motivo di successo.
// Riproduce una "B" ora che dura 0,116 secondi playNote (493.883, context.currentTime, 0.116); // Suona una 'E' proprio come la nota precedente finisce, che dura per 0.232 secondi playNote (659.255, context.currentTime + 0.116, 0.232);
Ah, il dolce suono del successo.
Ricorda, se giocare con gli oscillatori non è la tua idea di divertimento, puoi invece usare un file mp3. Leggi il tutorial precedente per vedere come.
È meglio avvolgere questi due playNote chiama in una singola chiamata di funzione in modo che abbiamo un facile gancio nel suonare il nostro suono.
var playSuccessSound = function () // Riproduci una 'B' ora che dura 0,116 secondi playNote (493.883, context.currentTime, 0.116); // Suona una 'E' proprio come la nota precedente finisce, che dura per 0.232 secondi playNote (659.255, context.currentTime + 0.116, 0.232); ;
Ora tocca a te come vuoi attivare questo suono e quale evento desideri suonare in risposta a. Ai fini di questo tutorial. facciamo finta una chiamata Ajax che impiega tre secondi. Lo useremo per far finta che alcune transazioni sul lato server stiano accadendo.
var myFakeAjaxCall = function (callback) setTimeout (function () callback ();, 3000); ;
Tutto quello che dobbiamo fare ora è aggiungere un listener di eventi al nostro pulsante Acquista ora.
Accentsconagua
$ ('# buy-now-button'). click (function () myFakeAjaxCall (function () playSuccessSound ();););Fai clic sul pulsante, attendi tre secondi e poi balla con gioia mentre ascolti la conferma dell'audio che la transazione è andata a buon fine.
Al fine di modificare il testo sul pulsante per indicare visivamente che qualcosa è successo, Bootstrap fornisce alcune funzioni di aiuto pulsante per scambiare il testo fornito in un attributo di dati. Come funziona questo è al di fuori dello scopo di questo articolo, ma ecco il codice per completezza.
$ ('# buy-now-button'). click (function () var that = this, $ btn = $ (this) .button ('loading'); myFakeAjaxCall (function () playSuccessSound (); $ btn .button ('complete');););Spero che tu abbia trovato questo tutorial utile e che sia incoraggiato ad aggiungere suoni (responsabilmente!) Alla tua app web. Il codice per questo tutorial è su GitHub, oltre a una demo del nostro suono finale. Il prossimo tutorial di questa serie è per quelli di voi che hanno catturato il bug dell'oscillatore; costruiremo un sintetizzatore audio web.
