Dies ist der zweite Teil des HTML5-Audioeinführungsvideos. Wenn Sie es nicht schon gesehen haben, empfehle ich Auschecken Teil eins um auf den neuesten Stand zu kommen!

Heute werden wir an unserem HTML5-Audioplayer arbeiten und einige aufregende Funktionen hinzufügen, um unseren HTML5-Player wirklich zum Leben zu erwecken. Wir verwenden eine Methode mit Datenattributen, die einfachen Zugriff auf benutzerdefinierte Werte für jedes Audioelement ermöglichen. Hier kommen unsere Titel, Künstler und Albumcover ins Spiel.

Am Ende dieses Tutorials werden Sie Folgendes verstehen: "Markieren" Ihrer Audioelemente mit benutzerdefinierten Datenattributen; wie Titelname, Künstler und sogar Albumkunst; Verwenden Sie jQuery, um diese Informationen zu bearbeiten und auf der Seite anzuzeigen, mit der Flexibilität, sie um Ihre eigenen Designs herum zu stylen.

Ich werde auch mein Player-Beispiel demonstrieren und darüber sprechen, wie Sie bestimmte Effekte mit Ihren Daten erzielen können. Dazu gehört die Anzeige des Albumcover als glänzender Hintergrund für Ihren Player.

Haben Sie HTML5-Audio in einem Projekt vorgestellt? Wie vergleicht HTML5-Audio mit älteren Optionen? Lass uns deine Gedanken in den Kommentaren wissen.

Ausgewähltes Bild / Vorschaubild, Klangbild über Shutterstock.