Was ist mit Audio im Web passiert? Eine Zeit lang war das Web das Plattform, um Ihren Geschmack in Melodien zu zeigen. Von MIDI-Versionen von The Final Countdown, die im Hintergrund brodeln, bis zum automatischen Abspielen von MySpace-MP3s, die in Ihr Gesicht geworfen werden, war der Sound überall zu hören.
Nicht länger. Durch diese Gräueltaten der Benutzererfahrung verbrannt, bleiben Webentwickler weit davon entfernt. Leider hat Sound im Web einen Rücksitz gefunden, während native Apps gedeihen.
Denken Sie an den Benachrichtigungston, den Sie hören, wenn Sie eine E-Mail erhalten, oder an das kleine Pop-Up, wenn Sie die Twitter-App aktualisieren. Solche Apps zeigen, wie Klang zu einer großartigen Benutzererfahrung beitragen kann.
In diesem Tutorial zeige ich Ihnen, wie Sie den Sound auf eine gute Art und Weise wieder ins Internet bringen!
Die Web-Audio-API ist eine leistungsstarke Möglichkeit, den Sound im Browser zu bearbeiten. Bevor Sie mit diesem Tutorial fortfahren, sollten Sie sich das vorherige Tutorial dieser Serie ansehen. Dort habe ich darüber informiert, wie Sie mit JavaScript grundlegende Sounds erstellen und eine MP3-Datei abspielen können.
Für dieses Tutorial werden wir eine Zahlungsseite simulieren, die uns Audio-Feedback gibt, dass unsere Zahlung erfolgreich ist. Ich werde Bootstrap verwenden, damit die Dinge schneller schöner aussehen.
Fügen Sie Ihrer Web-App Sound hinzu Mein Geschäft
Sind Sie bereit, diesen Artikel zu kaufen??
Sie werden ganz unten feststellen, dass ich eine Datei mit dem Namen "success-sound.js" hinzugefügt habe. Hier schreiben wir unseren Code, um dem Benutzer Audio-Feedback zu geben, wenn seine Zahlung erfolgreich ist. Nachdem Sie diese Datei erstellt haben, möchten Sie als Erstes einen AudioContext erstellen. Aus dem letzten Tutorial können Sie sich vielleicht erinnern, dass wir über einen AudioContext auf die verschiedenen Funktionen der Web Audio API zugreifen.
var context = new AudioContext ();
Eine der besten Eigenschaften der Web-Audio-API besteht darin, dass Sie Sounds von Grund auf erstellen können, ohne auch nur eine Audiodatei betrachten zu müssen. Wir machen das mit Oszillatoren.
Oszillatoren sind eine Möglichkeit, einen Ton zu erzeugen, den wir hören können. Sie tun dies, indem sie bei einer bestimmten Frequenz eine periodische Welle erzeugen. Die Form dieser Welle variiert, aber die häufigsten Arten sind Sinus-, Quadrat-, Dreiecks- und Sägezahnwellen. Diese Wellenarten klingen alle unterschiedlich. Erstellen wir zwei Dreieckswellenoszillatoren.
var osc1 = context.createOscillator (), osc2 = context.createOscillator (); osc1.type = 'Dreieck'; osc2.type = 'Dreieck';
Oszillatoren sind standardmäßig ziemlich laut. Wenn wir unseren Benutzern nicht die Angst vor ihrem Leben bereiten möchten, sollten wir die Lautstärke etwas reduzieren. Da die Web-Audio-API durch Verknüpfen von Knoten zum Pipe-Sound funktioniert, erstellen und verbinden wir unsere Oszillatoren mit einem GainNode.
var volume = context.createGain (); Volumen-Wert = 0,1;
Verstärken Sie Knoten und multiplizieren Sie die Lautstärke des eingehenden Klangs mit der von Ihnen angegebenen Anzahl. In diesem Fall beträgt die Lautstärke ein Zehntel des an sie gerichteten Signals.
Lass uns alles verbinden.
// Oszillatoren an den GainNode anschließen osc1.connect (volume); osc2.connect (Lautstärke); // Verbinden Sie GainNode mit den Lautsprechern volume.connect (context.destination);
Dann überprüfen Sie, ob wir es richtig gemacht haben, indem Sie die Oszillatoren zwei Sekunden lang spielen.
// Wie lange soll der Oszillator (in Sekunden) gespielt werden? Var duration = 2; // Wann sollen die Oszillatoren abgespielt werden var startTime = context.currentTime; // Starten Sie die Oszillatoren osc1.start (startTime); osc2.start (startTime); // Stoppen Sie die Oszillatoren 2 Sekunden ab jetzt osc1.stop (startTime + duration); osc1.stop (startTime + duration);
An diesem Punkt sollten Sie einen Ton hören, wenn Sie Ihre Seite neu laden. Nicht der erstaunlichste Sound, ich bin mir sicher, dass Sie zustimmen werden, aber es ist ein Anfang!
Die von uns erstellten Oszillatoren spielen mit einer Standardfrequenz. Durch Ändern dieser Frequenz können Sie die Musiknote ändern, die Sie hören, wenn sie abgespielt wird. Dies macht unseren Ton etwas angenehmer und ist der Schlüssel für das Gefühl, das Sie anrufen möchten, wenn Ihr Benutzer es hört. Lassen Sie uns unseren Oszillator auf Note "B4" (493,883 Hz) umstellen.
Var-Frequenz = 493,883; osc1.frequency.value = Frequenz; osc2.frequency.value = Frequenz;
Wenn Sie nun die Seite neu laden, hören Sie den Ton mit einer anderen Tonhöhe. Vielleicht denken Sie an dieser Stelle: "Warum spielen wir zwei Oszillatoren mit exakt derselben Tonhöhe?" Nun, das führt uns zu einem kleinen Trick, den wir machen können, um unseren Ton ein bisschen schöner zu machen.
Wenn wir unsere Oszillatoren verstimmen, um ihre Frequenzen ein wenig zu verändern, erhalten wir einen schönen Chorus-Effekt, wodurch unser Klang viel reicher klingt.
Var-Frequenz = 493,883; osc1.frequence.value = Frequenz + 1; osc2.frequency.value = Frequenz - 2;
Während unser kleiner Sound viel besser klingt, endet er ziemlich abrupt. Um das weniger zu erschüttern, sollten Sie die Lautstärke am Ende des Sounds schnell verringern. Dies wird auch als "Ausblenden" bezeichnet. Dies erfolgt über AudioParams, mit denen die Werte von Audio-Nodes wie Verstärkung und Frequenz automatisiert werden. Wir werden im nächsten Tutorial dieser Serie ausführlicher auf AudioParams eingehen.
// Stelle die Lautstärke kurz vor dem Ende des Tones auf 0,1 volume.gain.setValueAtTime (0.1, startTime + duration - 0.05); // Lasse die Lautstärke 0,1 Sekunden nach dem Ende des Tones auf null herunter. Volume.gain.linearRampToValueAtTime (0, startTime + duration);
Was wir hier sagen, ist sicherzustellen, dass die Lautstärke 0,1 bis 0,05 Sekunden beträgt, bevor unser Ton endet. Drehen Sie dann die Lautstärke weiter herunter, bis sie gleich Null ist, wenn unser Ton endet.
Lassen Sie uns unseren Code bisher in einer einzigen Funktion zusammenfassen und sehen, was wir haben.
// Oszillatoren bei einer bestimmten Frequenz und für eine bestimmte Zeit abspielen var playNote = Funktion (Frequenz, Startzeit, Dauer) var osc1 = context.createOscillator (), osc2 = context.createOscillator (), volume = context.createGain (); // Oszillator-Wellentyp einstellen osc1.type = 'triangle'; osc2.type = 'Dreieck'; Volumen-Wert = 0,1; // Knotenrouting einrichten osc1.connect (volume); osc2.connect (Lautstärke); volume.connect (context.destination); // Oszillatoren für Chorus-Effekt verstimmen osc1.frequency.value = Frequenz + 1; osc2.frequency.value = Frequenz - 2; // Fade out volume.gain.setValueAtTime (0.1, startTime + duration - 0.05); volume.gain.linearRampToValueAtTime (0, startTime + duration); // Oszillatoren starten osc1.start (startTime); osc2.start (startTime); // Stoppt Oszillatoren osc1.stop (startTime + duration); osc2.stop (startTime + duration); ;
Um diese Funktion etwas leistungsfähiger zu machen, habe ich einige der Variablen entfernt und die Übergabe dieser Werte zugelassen. Dadurch können wir verschiedene Noten mit verschiedenen Frequenzen spielen. Jetzt ist es Zeit, kreativ zu werden!
Überlegen Sie, was Ihre Benutzer fühlen sollen, wenn sie gerade etwas in Ihrem Online-Shop gekauft haben. Es ist eine positive Erfahrung - jemand hat etwas gekauft, was er wollte, um sein Leben irgendwie zu verbessern, es sind keine Fehler aufgetreten und die Transaktion wurde erfolgreich abgewickelt.
Was den Ton angeht, ist der Hinweis auf Erfolg eigentlich ganz einfach. Ein musikalisches Motiv, das am Ende in die Tonhöhe geht, klingt immer viel freudiger als eines, das nach unten geht. Sie brauchen nicht einmal eine Melodie oder eine ganze Reihe von Noten, um dies zu vermitteln. Um diese Theorie zu beweisen, lassen Sie uns zwei Einzelnotizen für unser Erfolgsmotiv verwenden.
// Jetzt ein 'B' spielen, das 0,116 Sekunden dauert. PlayNote (493.883, context.currentTime, 0,116); // Spielen Sie ein 'E', sobald die vorige Note beendet ist und 0,232 Sekunden dauert. PlayNote (659.255, context.currentTime + 0.116, 0.232);
Ahh, der süße Klang des Erfolgs.
Denken Sie daran, wenn Sie mit Oszillatoren nicht viel Spaß haben, können Sie stattdessen eine MP3-Datei verwenden. Lesen Sie das vorherige Tutorial, um zu erfahren, wie.
Am besten wickeln Sie diese beiden ein playNote
ruft einen einzigen Funktionsaufruf auf, so dass wir einen einfachen Einstieg in den Sound haben.
var playSuccessSound = function () // Spielen Sie jetzt ein 'B', das 0,116 Sekunden dauert. playNote (493.883, context.currentTime, 0.116); // Spielen Sie ein 'E', sobald die vorige Note beendet ist und 0,232 Sekunden dauert. PlayNote (659.255, context.currentTime + 0.116, 0.232); ;
Nun liegt es an Ihnen, wie Sie diesen Sound auslösen möchten und auf welches Ereignis Sie ihn als Reaktion spielen möchten. Für die Zwecke dieses Tutorials. Lassen Sie uns einen Ajax-Anruf vortäuschen, der drei Sekunden dauert. Wir werden dies verwenden, um vorzugeben, dass eine serverseitige Transaktion stattfindet.
var myFakeAjaxCall = function (callback) setTimeout (function () callback ();, 3000); ;
Jetzt müssen Sie nur noch einen Event-Listener zu unserer Schaltfläche "Jetzt kaufen" hinzufügen.
$ ('# Buy-Now-Button'). click (function () myFakeAjaxCall (function () playSuccessSound ();););
Klicken Sie auf die Schaltfläche, warten Sie drei Sekunden und tanzen Sie dann mit Freude, wenn Sie die Audiobestätigung hören, dass Ihre Transaktion erfolgreich war.
Um den Text auf der Schaltfläche zu ändern, um visuell anzuzeigen, dass etwas passiert ist, bietet Bootstrap einige Hilfsfunktionen für Schaltflächen, um den in einem Datenattribut bereitgestellten Text auszutauschen. Wie dies funktioniert, liegt außerhalb des Rahmens dieses Artikels, hier jedoch der Vollständigkeit halber.
$ ('# Buy-Now-Button'). click (function () var that = this, $ btn = $ (this) .button ('loading'); meinFakeAjaxCall (function () playSuccessSound (); $ btn.) .button ('complete');););
Ich hoffe, Sie fanden dieses Tutorial hilfreich und es hat Sie dazu ermutigt, Ihrer Web-App (verantwortungsvoll!) Sound hinzuzufügen. Der Code für dieses Tutorial befindet sich auf GitHub sowie eine Demo unseres endgültigen Sounds. Das nächste Tutorial in dieser Serie ist für diejenigen unter Ihnen, die den Oszillatorfehler entdeckt haben. Wir werden einen Web-Audio-Synthesizer bauen.