HTML5 hat viele Dinge in der Webentwicklung vereinfacht, darunter Embedded Audio. Heute werden wir den Prozess der vollständigen Anpassung des HTML5-Audio-Player-Elements durcharbeiten, das sich an ältere Browser mit Fallbacks anpassen lässt. Es ist eine einfache Methode, die einfach aufgebaut und optimiert werden kann.
Das Open Source-Projekt MediaElement.js erfreut sich großer Beliebtheit und ist seit Version 3.6 sogar in den Kern von WordPress integriert. Sie können jedes HTML5-Audio oder -Video mithilfe einer nativen Player-Schnittstelle einbetten, die sich bei Bedarf dynamisch an einen Flash / Silverlight-Player anpassen lässt. Ich war wirklich beeindruckt, alle Funktionen zu sehen, und es scheint eine der fortschrittlicheren Lösungen für den Umgang mit älteren Browsern zu sein. Wir werden das als Ausgangspunkt verwenden!
Live Demo - Quellcode herunterladen
Fertig machen
Ich habe sofort bemerkt, dass MediaElement auf jQuery basiert. Die neueste Bibliothek zum Zeitpunkt der Erstellung dieses Codes ist 1.10.2. Die Unterstützung für verschiedene Elemente der Benutzeroberfläche könnte sich in zukünftigen Updates ändern. Außer diesem Skript benötigen wir auch eine Kopie mediaelement-and-player.min.js die Sie auf der offiziellen Website oder im GitHub-Repository abrufen können. Die anderen beiden Dateien, die Sie in dasselbe Verzeichnis kopieren sollten, sind flashmediaelement.swf und silverlightmediaelement.xap.
Jetzt funktioniert das Skript, indem es Ihren Durchschnitt ersetzt Tag mit einigen internen HTML-Tags, die mit Klassennamen erstellt wurden. Das Überschreiben dieser Klassen sollte viel Raum für detaillierte Anpassungen bieten. Ich benutze einen ziemlich langen Track namens Evidence Song, der unter CC Attribution + Share veröffentlicht wird.
Die ursprüngliche Designidee stammt aus diesem Tutorial zu DesignModo, das auch Album Artwork verwendet und die Volumen- / Zeitspuren vereinfacht. Mein Ziel ist es, dies in eine vereinfachte Version umzuwandeln, bei der der Fokus auf sauberer Benutzerfreundlichkeit liegt. Ich habe viele Grafiken mit Elementen von PixelsDaily wie diesen metallischen Schiebereglern aktualisiert. Auch die Play / Pause- und Mute / Unmute-Tasten stammen von diesem Audio-Player-PSD.
Wenn Sie einige Grafiken oder Freebie-PSDs im Voraus organisiert haben, können Sie sich beim Erstellen des Players in CSS keine Mühe geben. Bevor wir jedoch in den CSS-Code springen, möchte ich Ihnen erklären, wie wir das Skript initialisieren.
MediaElement.js implementieren
Die Initialisierungsmethode wird aufgerufen mediaelementplayer () Dies kann eine Reihe verschiedener Optionen annehmen. Lesen Sie die Dokumentation der Webseite, um mehr darüber zu erfahren, wie dies funktioniert.
Die Funktionsliste wird ähnlich einem Array von Werten erstellt. Spielpause ist eine einzelne Wiedergabe- und Pause-Taste, während Fortschritt und Volumen repräsentieren die Scrubber-Spuren für jede Eigenschaft. Ich kann auch die Breite / Höhe des Audioelements definieren, die mit jQuery gerendert werden soll.
Die letzten drei Parameter erzwingen eine native Anzeige auf mobilen Plattformen mit iOS oder Android. Manchmal können Sie eine einfache Audio-Benutzeroberfläche für die Verwendung auf mobilen Geräten erhalten, in diesem Fall ist es jedoch viel einfacher, den nativen Player zu unterstützen. Das größte Problem ist der Umgang mit einem Mobile-Responsive-Layout, das auch für ein brauchbares Audio-Interface geeignet ist.
Audio-Player-Stile
Jetzt können wir in CSS springen und sehen, wie das Design erstellt wird. Der grundlegende Code-Setup basiert auf relativer oder absoluter Positionierung für jeden Hauptartikel. Wir können feste Werte für Breite und Höhe festlegen, um sicherzustellen, dass in jedem Browser alles gleich aussieht. .Musikplayer wird die Containerklasse sein, die wir immer als Basis verwenden können.
Der große Audio-Player-Container kann auf beliebige Weise mit sich wiederholenden Texturen, Hintergrundverläufen und sogar CSS3-Boxschatten gestaltet werden. Ich habe auch ein Beispiel für h2 erstellt, das den Bandnamen und den Songtitel enthält. Mit jQuery könnten wir diesen Textwert sogar basierend auf einer vorab generierten Wiedergabeliste von Musik aktualisieren.
Sie werden schnell feststellen, dass jede Eingabe eine definierende Klasse hat, die sehr einfach zu bearbeiten ist. Die Play / Pause-Schaltfläche wird mit einer einzelnen PNG-Datei erstellt und die Hintergrundbildaktualisierungen basieren darauf, welche Schaltfläche angezeigt werden soll. Diese können mit gezielt anvisiert werden .mejs-play-taste und .mejs-Pause-Taste, beziehungsweise.
Das Symbol für die Stummschaltung / Stummschaltung ist ebenfalls sehr ähnlich und verwendet ein anderes PNG-Sprite.Die größte Zeitspanne wird kommen, wenn Sie jede dieser einzelnen Klassen studieren und lernen müssen, wie sie spezifische CSS-Selektoren schreiben. MediaElement eignet sich hervorragend für die Aktualisierung der Benutzeroberfläche, um zahlreiche verwandte Klassen für fast jede Benutzerinteraktion zu enthalten.
Wäscherleisten
Es gibt zwei eindeutige Scrubber, die sich auf die Lautstärke und die Zeitsuche auf der Spur beziehen. Ich habe Farbverläufe oder flache Hintergrundfarben beibehalten, aber Sie können stattdessen versuchen, ein sich wiederholendes Hintergrundbild zu verwenden, um zu sehen, wie es aussieht.
Für jede Wäscherleiste gibt es verschiedene Teile, die separat gestaltet werden müssen. Jeder Balken hat eine Vollsichtklasse, die den Wert bei 100% darstellt. Für das Volume ist dieses gekennzeichnet .mejs-horizontales Volumen insgesamt und es soll sich gut in das Layout einfügen. Ähnlich .mejs-horizontal-volumenstrom stellt den Balken dar, der die aktuelle Lautstärke anzeigt. Wenn Sie also 50% festlegen, wird nur die Hälfte des gesamten Balkens mit diesen CSS-Eigenschaften gefüllt. Mir gefällt, wie der abgerundete Grenzradius auf jeder Scrubber-Spur aussieht, und er ist mit Hilfe der CSS3-Eigenschaften so viel einfacher.
Die Ladeschiene hat mit der Klasse eine Besonderheit .mejs-Zeit geladen. Dies stellt dar, wie viel von der Audiodatei über Streaming-Downloads vorgeladen wurde. Dieser Effekt tritt häufiger bei Videoplayern wie bei YouTube auf. Audiospuren können jedoch immer noch den gleichen Effekt haben - diese Dateien sind nur kleiner und brauchen nicht so lange, bis der Download abgeschlossen ist.
Ich sollte beachten, dass bei Verwendung einer beliebigen Version von jQuery 1.8+ nicht immer die Gesamtbreite der Scrubber-Leiste dargestellt wird. Aus irgendeinem Grund steigt sie nie an, es sei denn, wir verwenden spezifischere übergeordnete Klassen oder verwenden die !wichtig Stichwort. Ähnliche Fehler könnten in zukünftigen Versionen auftauchen, also sollten Sie alles noch einmal überprüfen.
Zusätzliche UI-Funktionen
Die letzten beiden CSS-Abschnitte konzentrieren sich auf die Metall-Schieberegler und den zeitbasierten Tooltip. Ich fand diesen Effekt auf dem DesignModo-Player sehr inspirierend und wollte ihn als eine Demonstration dessen zeigen, was in der Benutzeroberfläche möglich ist.
Nicht viel zu erklären, außer den perfekt angepassten Hintergrundbildern mit absoluter Positionierung. Es ist eine gute Idee, alles in Einklang zu bringen, es sei denn, Ihr Ziel ist der Aufbau eines fließenden Audioplayers mit fließender Breite. Die Dinge werden definitiv etwas schwieriger, aber es sollte offensichtlich sein, dass mit genügend Arbeit alles möglich ist.
Dem älteren Beispiel folgend habe ich diesen Tooltip-Hover-Effekt mit einem einzigen Hintergrundbild beibehalten. CSS3 kann eindeutige abgerundete QuickInfos und Pfeile generieren, dies erfordert jedoch häufig mehr HTML, als wir manuell in den Audioplayer bearbeiten können. Dieser Text wird in einer Klasse gehalten .mejs-time-float welche verwendet Anzeige: keine standardmäßig. Wir möchten nur den Zeitwert anzeigen, wenn Sie sich auf der Scrubber-Leiste befinden, damit Benutzer entscheiden können, wie weit sie überspringen müssen.
Alles in allem erfordert dieses Plugin eine Menge Code, damit alles gut aussieht. Es kann gut sein, dass Sie mehr als einen Tag benötigen, um ein fertiges Produkt zu erhalten. Ich würde jedoch auch argumentieren, dass MediaElement.js die präziseste Lösung für moderne HTML5-Audio- / Video-Player ist. Wenn Sie ein wunderschönes Mockup-Design haben, kann es mit großer Wahrscheinlichkeit mit genügend Zeit und Geduld erstellt werden.
Live Demo - Quellcode herunterladen
Schließen
Ich hoffe, dieses Tutorial kann ein wenig Licht in die Anpassung eines HTML5-Audioplayers werfen. Die Verwendung gängiger CSS3-Stile ohne JS ist möglich, wird jedoch von älteren IE-Versionen und ähnlichen veralteten Browsern nur schlecht unterstützt. Obwohl JavaScript nicht immer von allen Browsern unterstützt wird, bietet MediaElement.js einen einfachen Rückgriff auf die klassische HTML5-Player-Benutzeroberfläche.
Fühlen Sie sich frei, eine Kopie meines Projekt-Quellcodes herunterzuladen und zu sehen, welche Arten von UI-Designs Sie erstellen können!