Erstellung des benutzerdefinierten HTML5-Audio-Player

() translation by (you can also view the original English article)

In diesem Tutorial werde ich Ihnen HTML5-Audio vorstellen und Ihnen zeigen, wie Sie Ihren eigenen Player erstellen können.

Wenn Sie eine Verknüpfung erstellen möchten, schauen Sie sich den vorgefertigten HTML5-Audio-Player an, der auf Envato Market verfügbar ist. Sie können Wiedergabelisten aus verschiedenen Quellen erstellen und verfügen über eine Vielzahl von Anpassungsoptionen.

HTML5 Audio Player with Playlist — HTML5 Audio Player mit Wiedergabeliste

Sie können auch viele HTML5-Experten in Envato Studio finden, die Ihnen helfen.

Einführung

Bisher war die Implementierung von Audio in ein Webprojekt ein langwieriger Prozess, der sich stark auf Plugins von Drittanbietern wie Flash stützte. Da das iPhone das Plugin nicht akzeptiert und die Nachricht, dass Adobe Flash für Handys nicht mehr unterstützt, nicht akzeptiert, suchen viele Entwickler nach anderen Möglichkeiten, Audio in ihre Projekte einzubeziehen. Hier setzt HTML5-Audio an, um das Problem zu lösen.

Obwohl HTML5 einen Standard für die Wiedergabe von Audiodateien im Web bietet, steckt es noch in den Kinderschuhen und hat noch einen langen Weg vor sich, bevor es alles bieten kann, was andere Plugins wie Flash-Audio bieten. In den meisten Fällen ist dies jedoch mehr als ausreichend.

Einfaches HTML5-Audio

Die einfachste Möglichkeit, Audio mithilfe von HTML5 in eine Webseite zu implementieren, ist die Verwendung des neuen Audio-Tags. Fügen Sie dies Ihrem HTML5-Dokument mit dem folgenden Code hinzu:

<audio controls="controls">
  <source src="track.ogg" type="audio/ogg" />
  <source src="track.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>

Wenn Sie sich den obigen Code ansehen, können Sie sehen, dass ich das <audio>-Tag deklariert und das Steuerelementattribut definiert habe, sodass die Standardsteuerelemente für den Player angezeigt werden.

Im <audio> verschachtelt haben wir 2 'src'-Tags. Einer hat einen MP3-Track und der andere das OGG-Format. Das OGG-Format wird insbesondere verwendet, um die Musikwiedergabe in Firefox zu ermöglichen, da Firefox aufgrund von Lizenzproblemen MP3 ohne Verwendung eines Plugins nicht unterstützt. Eine Textzeichenfolge Ihr Browser unterstützt das Audioelement nicht. Lassen Sie die Benutzer mit nicht unterstützten Browsern wissen, was los ist.

Der Standard-HTML5-Audio-Player

HTML5-Audio-Tag-Attribute

Das Tag unterstützt nicht nur globale HTML5-Attribute, sondern auch eine Reihe von Attributen, die für sich selbst eindeutig sind.

autoplay - Dies kann auf "true" gesetzt oder leer gelassen werden, um festzulegen, ob der Titel automatisch abgespielt werden soll, sobald die Seite geladen wird.
controls - Wie im obigen Beispiel gezeigt, wird hiermit festgelegt, ob die nativen Steuerelemente wie "Wiedergabe, Pause" usw. angezeigt werden sollen.
loop - Dies kann auf "loop" gesetzt werden und legt fest, ob der Titel nach Beendigung erneut abgespielt werden soll.
preload - Dies kann auf "auto" (das beschreibt, ob die Datei geladen werden soll, sobald die Seite geladen wird), "metadata" (das beschreibt, ob nur die Metadaten, der Titel des Titels usw. geladen werden sollen), "none" ( Dies schreibt vor, dass der Browser die Datei beim Laden der Seite nicht laden soll.
src - Dies ist auch im obigen Beispiel zu sehen und definiert die URL der Musik, die vom Audio-Tag abgespielt werden soll.

Drehen Sie es auf elf

In den letzten Schritten haben wir uns die einfachste Form von HTML5-Audio angesehen. Wenn wir anfangen, das Audio-Tag mit Javascript zu verwenden, können wir einige wirklich interessante und nützliche Audio-Player erstellen. Werfen wir einen Blick darauf, was jQuery für uns tun kann. Nachdem wir in jQuery das document ready definiert haben, können wir eine neue Audiovariable erstellen, um unsere Audiodatei so einfach zu halten:

1	var myaudio = new Audio('mysong.mp3');

Das ist wirklich so einfach! Wenn wir dann eine Aktion für das Audio ausführen möchten, können wir sie mithilfe der Variablen 'myaudio' auslösen. Hier ist eine Liste von Aktionen, die wir mit der Variablen ausführen können. Notieren Sie sich diese, wir werden einige davon später im Tut verwenden, wenn wir unseren Audio-Player erstellen.

myaudio.play(); - This will play the music.
myaudio.pause(); - This will stop the music.
myaudio.duration; - Returns the length of the music track.
myaudio.currentTime = 0; - This will rewind the audio to the beginning.
myaudio.loop = true; - This will make the audio track loop.
myaudio.muted = true; - This will mute the track

Wenn Sie möchten, dass eine Funktion aufgerufen wird, sobald die Audiowiedergabe beendet ist, können Sie 'myaudio.addEventListener('ended',myfunc)' verwenden. Dies ruft 'myfunc()' auf, sobald die Audiowiedergabe beendet ist.

Die Erstellung des HTML5 Audio Players: Markup

Nachdem Sie ein wenig Hintergrundwissen zu HTML5-Audio hatten und die Grundprinzipien verstanden, ist es an der Zeit, diese in die Praxis umzusetzen und einen benutzerdefinierten HTML5-Audio-Player zu erstellen. Ich werde die Entwurfsphase verpassen, da sie außerhalb des Rahmens dieses Tutorials liegt. Sie können jedoch den zugehörigen Quellcode herunterladen und die PSD durchsuchen, um eine Vorstellung davon zu erhalten, wie sie zusammengesetzt ist.

Der obere Teil des Dokuments besteht aus dem HTML5-Doctype. Yahoos CSS Reset, die Google-Webschrift 'Lobster' für den Titel. Dann haben wir die neueste jQuery und die benutzerdefinierte JavaScript-Datei js.js. Schließlich haben wir html5slider.js, mit dem Firefox den HTML5-Eingabebereichstyp anzeigen kann, den wir für den Audio-Scrubber verwenden werden.

<!DOCTYPE html>
<head>
	<title>HTML5 Audio Tutorial</title>
	<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.3.0/build/cssreset/reset-min.css">
	<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<script src="http://code.jQuery.com/jQuery-latest.js" type="text/javascript"></script>
	<script type="text/javascript" src="js/js.js"></script>
	<script type="text/javascript" src="js/html5slider.js"></script>
</head>

Nach dem h1-Titel habe ich ein div mit einer Klasse von "container" und "gradient" erstellt. Ich habe eine separate Gradientenklasse erstellt, da diese für einige andere Elemente wiederverwendet wird. Innerhalb von ".container" habe ich ein Bild hinzugefügt (das wird das Albumcover sein), dann dienen die drei Ankertags als Steuerelemente für den Player. Dazwischen befindet sich das Eingabefeld für den Scrubber/HTML5-Bereich.

<body>

	<h1>HTML 5 Audio Player</h1>

	<div class="container gradient">
		
		<img class="cover" src="images/cover.jpg" alt="">

		<div class="player gradient">

			<a class="button gradient" id="play" href="" title=""></a>
			<a class="button gradient" id="mute" href="" title=""></a>
		
				<input type="range" id="seek" value="0" max=""/>
	
			<a class="button gradient" id="close" href="" title=""></a>
			
		</div><!-- / player -->
		
	</div><!-- / Container-->
</body>
</html>

Die Erstellung des HTML5 Audio Players: Stile

Anstatt jeden Aspekt des CSS durchzugehen, werde ich Ihnen einen Überblick geben und bestimmte Teile notieren, auf die Sie möglicherweise achten möchten.

Im folgenden Code habe ich den Verlauf für den Player erstellt, der mit diesem CSS-Verlaufseditor generiert wurde. Ich habe dann den Player ".container" mit einigen CSS3-Übergängen erstellt.

Sie werden feststellen, dass ich auch das CSS3-Box-Größenattribut "border-box" verwendet habe. Auf diese Weise kann die 10-Pixel-Polsterung um den Container in der von mir angegebenen Breite enthalten sein, in diesem Fall 427 Pixel. Wenn ich dies nicht verwendet hätte, würde die Polsterung dem 427px hinzugefügt, wodurch der Container größer wird, als ich es eigentlich möchte. Heutzutage ist es gängige Praxis, * {box-sizing: border-box;} anzuwenden, was eine intuitivere Art des Stylings ermöglicht.

Ich habe auch einige CSS3-Übergänge zu ".coverlarge" hinzugefügt, um einige schöne Übergänge beim ersten Öffnen des Players zu ermöglichen. Das CSS mag auf den ersten Blick etwas überwältigend aussehen, aber viele davon sind spezifische Browserpräfixe, um sicherzustellen, dass der Audio-Player in verschiedenen Browsern gleich aussieht und funktioniert.

.gradient {
	border: 1px solid black;

	-webkit-box-shadow: inset 0 1px 0px rgba(255,255,255,.2);
	-moz-box-shadow: inset 0 1px 0px rgba(255,255,255,.2);
	box-shadow: inset 0 1px 0px rgba(255,255,255,.2);
	background: #494949; /* Old browsers */
background: -webkit-linear-gradient(top, #494949 0%, #434242 31%, #393838 55%, #242323 83%, #1b1a1a 100%, #161515 100%, #0b0b0b 100%);

	background: -moz-linear-gradient(top, #494949 0%, #434242 31%, #393838 55%, #242323 83%, #1b1a1a 100%, #161515 100%, #0b0b0b 100%);
	background: -o-linear-gradient(top, #494949 0%, #434242 31%, #393838 55%, #242323 83%, #1b1a1a 100%, #161515 100%, #0b0b0b 100%);
	background: -ms-linear-gradient(top, #494949 0%, #434242 31%, #393838 55%, #242323 83%, #1b1a1a 100%, #161515 100%, #0b0b0b 100%);
	background: linear-gradient(top, #494949 0%, #434242 31%, #393838 55%, #242323 83%, #1b1a1a 100%, #161515 100%, #0b0b0b 100%); /* W3C */
-image  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#494949', endColorstr='#0b0b0b',GradientType=0 ); /* IE6-9 */
}

.container {
	-webkit-transition: all .7s ease;
	-moz-transition: all .7s ease;
	-o-transition: all .7s ease;
	-ms-transition: all .7s ease;
	transition: all .7s ease;
	position: absolute;
	width: 427px;
	height: 70px;

	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;

	-webkit-box-shadow: 0px 0px 13px rgba(0,0,0,.3),inset 0 1px 0px rgba(255,255,255,.2);
	-moz-box-shadow: 0px 0px 13px rgba(0,0,0,.3),inset 0 1px 0px rgba(255,255,255,.2);
	box-shadow: 0px 0px 13px rgba(0,0,0,.3),inset 0 1px 0px rgba(255,255,255,.2);
	top: 50%;
	left: 50%;
	margin: -214px 0px 0px -214px;
	padding: 10px;

	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}


.containerLarge {
	height: 427px;
}

.cover {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	opacity: 0;
	width: 398px;
	height: 10px;
	border: 2px solid black;

	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;

	-webkit-box-shadow: inset 0px 5px 5px rgba(0,0,0,1);
	-moz-box-shadow: inset 0px 5px 5px rgba(0,0,0,1);
	box-shadow: inset 0px 5px 5px rgba(0,0,0,1);
}

.coverLarge {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	opacity: 1;
	height: 398px;

	-webkit-transition: opacity .7s ease;
	-moz-transition: opacity .7s ease;
	-o-transition: opacity .7s ease;
	-ms-transition: opacity .7s ease;
	transition: opacity .7s ease;

	-webkit-transition-delay: .5s;
	-moz-transition-delay: .5s;
	-o-transition-delay: .5s;
	-ms-transition-delay: .5s;
	transition-delay: .5s;
}

Wie der Audio-Player in dieser Phase aussehen soll

Sobald der Container für den Player fertig ist, ist es Zeit, die eigentlichen Steuerelemente zu erstellen. Die meisten Schaltflächen wurden mit CSS-Sprites erstellt

Leider unterstützt der IE die HTML5-Bereichseingabe noch nicht, daher habe ich beschlossen, den Audio-Scrubber den IE-Benutzern nicht anzuzeigen. Wenn Sie sich in einer Position befinden, in der dies nicht akzeptabel ist, können Sie den Schieberegler für die jQuery UI slider auf ähnliche Weise wie die von mir verwendete Methode verwenden. Trotzdem habe ich mich dafür entschieden, den Scrubber einfach auszublenden, daher Eingabe input{display:none\9!important;} Dies verbirgt im Grunde die Eingabe von dh Benutzern (lesen Sie diesen Thread auf Stack Overflow für weitere Informationen zu \9).

Das Problem mit dem HTML5-Bereichsregler besteht darin, dass nur wenige Browser ein benutzerdefiniertes Styling unterstützen. hauptsächlich Webkit-Browser (Chrome und Safari). Opera und Firefox zeigen leider nur einen Standardbereichsregler an. Wenn Sie ein benutzerdefiniertes Styling für alle Browser benötigen, können Sie den Schieberegler für die jQuery UI slider verwenden, wie bereits erwähnt. Sie können das benutzerdefinierte Design für Webkit-Browser im Attribut input::-webkit-slider-thumb sehen.

.player {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	position: absolute;
	width: 300px;
	bottom: 10px;
	width: 95%;

	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	padding: 5px;
}

.button {
	display: block;
	width: 34px;
	height: 34px;
	background-image: url(../images/sprite.png);
	background-repeat: no-repeat;
	float: left;
	margin-right: 5px;
}

#play {
	background-position: 6px 5px;
}

#pause {
	background-position: -32px 5px;
}

#mute {
	background-position: -63px 5px;
}

#muted {
	background-position: -106px 5px;
}

input[type="range"] {
	width: 250px;
	margin-top: -5px;
}

#close {
	float: right;
	background-position: -146px 5px;
	display: none;
}

.volume {
	position: absolute;
	height: 100px;
	width: 34px;
	border: 1px solid black;
	background-color: #242323;
	top: -97px;
	display: none;
}
input{
	display:none\9!important;
}
input[type="range"] {
	-webkit-appearance: none;
	border: 1px solid black;
	position: absolute;
	top: 18px;
	display: block;
	width: 63%;
	height: 15px;

	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	background-color: #242323;
	left: 90px;

	-webkit-box-shadow: inset 0px 4px 4px rgba(0,0,0,.6);
	-moz-box-shadow: inset 0px 4px 4px rgba(0,0,0,.6);
	box-shadow: inset 0px 4px 4px rgba(0,0,0,.6);
}

input::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 20px;
	height: 20px;
	border:1px solid black;

	-webkit-border-radius: 10px;
	border-radius: 10px;
	background: #80e4df; /* Old browsers */
background: -webkit-linear-gradient(top, #80e4df 0%, #75dbd6 13%, #5ec4bf 33%, #57bbb6 47%, #419d99 80%, #378f8b 100%);

	background: -moz-linear-gradient(top, #80e4df 0%, #75dbd6 13%, #5ec4bf 33%, #57bbb6 47%, #419d99 80%, #378f8b 100%);
	background: -o-linear-gradient(top, #80e4df 0%, #75dbd6 13%, #5ec4bf 33%, #57bbb6 47%, #419d99 80%, #378f8b 100%);
	background: linear-gradient(top, #80e4df 0%, #75dbd6 13%, #5ec4bf 33%, #57bbb6 47%, #419d99 80%, #378f8b 100%); /* W3C */
}

Die Erstellung des HTML5 Audio Players: jQuery

Sobald das Styling und Markup gemacht ist, ist es Zeit, den Player zum Leben zu erwecken. Wir können das mit dem Javascript-Framework jQuery schaffen. Sobald das jQuery-document ready deklariert wurde, erstellen wir einige Variablen, in denen wir unsere jQuery-Objekte speichern können.

container = $('.container');
	cover = $('.cover');
	play = $('#play');
	pause = $('#pause');
	mute = $('#mute');
	muted = $('#muted');
	close = $('#close');
	song = new Audio('music/track1.ogg','music/track1.mp3');
	duration = song.duration;

In der Variablen "song" oben können Sie sehen, dass wir zwei Tracks deklariert haben. Das OGG-Format für Firefox und MP3 für andere Browser. Ich erstelle dann eine bedingte IF-Anweisung, damit wir prüfen können, ob der Browser MP3s abspielen kann oder nicht. Wenn dies möglich ist, wird die Variable "Song" zum MP3-Titel. Wenn nicht, wird das Format "OGG" abgespielt.

if (song.canPlayType('audio/mpeg;')) {
  	song.type= 'audio/mpeg';
  	song.src= 'music/track1.mp3';
	} else {
  	song.type= 'audio/ogg';
  	song.src= 'music/track1.ogg';
	}

Die nächsten Dinge sind Klickfunktionen, mit denen wir die Musik abspielen und anhalten können. Ich verwende die Audio-Aktion play(), um das Audio zu starten, und verwende dann die jQuery-Methode replaceWith, die im Grunde die Wiedergabetaste durch die Pause-Taste ersetzt.

Ich habe auch die Klassen "coverLarge" und "containerLarge" zu "container" und "cover" hinzugefügt. Da ich diesen bereits im CSS CSS3-Übergänge hinzugefügt habe, wird dies einen schönen Übergang hinzufügen, wenn die Audiowiedergabe beginnt. Die "pause"-Funktion funktioniert auf ähnliche Weise, jedoch ohne die Übergänge. Wenn Sie darauf klicken, wird die Pause-Schaltfläche durch die Schaltfläche "Wiedergabe" ersetzt.

play.live('click', function(e) {
		e.preventDefault();
		song.play();

		$(this).replaceWith('<a class="button gradient" id="pause" href="" title=""></a>');
		container.addClass('containerLarge');
		cover.addClass('coverLarge');
		$('#close').fadeIn(300);
		$('#seek').attr('max',song.duration);
	});

	pause.live('click', function(e) {
		e.preventDefault();
		song.pause();
		$(this).replaceWith('<a class="button gradient" id="play" href="" title=""></a>');

	});

Die Stumm- und Stummschalttasten funktionieren ähnlich, wie die Wiedergabe- und Pause-Tasten, rufen Sie die zugehörigen Aktionen auf und ersetzen Sie die Tasten durch die entsprechenden Alternativen.

mute.live('click', function(e) {
		e.preventDefault();
		song.volume = 0;
		$(this).replaceWith('<a class="button gradient" id="muted" href="" title=""></a>');

	});

	muted.live('click', function(e) {
		e.preventDefault();
		song.volume = 1;
		$(this).replaceWith('<a class="button gradient" id="mute" href="" title=""></a>');

	});

Wenn der Benutzer auf die Schaltfläche "Schließen" klickt, rufen wir jQuery auf, um die Klassen "containerLarge" und "coverLarge" zu entfernen. Dadurch wird die Abdeckung ausgeblendet und der Player wieder geschlossen. Anschließend halten wir den Player an, indem wir die Aktion pause() aufrufen und die Audio-CurrentTime auf 0 zurücksetzen. Dadurch wird der Track auf den Anfang zurückgesetzt.

$('#close').click(function(e) {
		e.preventDefault();
		container.removeClass('containerLarge');
		cover.removeClass('coverLarge');
		song.pause();
		song.currentTime = 0;
		$('#pause').replaceWith('<a class="button gradient" id="play" href="" title=""></a>');
		$('#close').fadeOut(300);
	});

Es ist jetzt Zeit, sich dem Audio-Scrubber zuzuwenden, dem die ID "Suchen" zugewiesen wurde. Die erste Funktion besteht darin, den Scrubber auf einen beliebigen Teil des Audios zu verschieben. Dies erfolgt durch Erkennen einer Änderung, wenn jemand den Scrubber bewegt. Wir setzen dann die Datei song.currentTime so, dass sie mit dem Teil des Songs übereinstimmt, zu dem der Scrubber verschoben wurde. Wir setzen auch das max-Attribut, um die Songdauer widerzuspiegeln.

1	$("#seek").bind("change", function() {
2	song.currentTime = $(this).val();
3	$("#seek").attr("max", song.duration);
4	});

Der letzte Teil der jQuery besteht darin, den "#seek -Wäscher zusammen mit der Dauer des Audios zu bewegen. Dazu fügen wir einen Ereignis-Listener hinzu, und wenn die Audiozeit aktualisiert wird, rufen wir die Funktion auf. Ich habe eine Variable von "curtime" gesetzt, um die aktuelle Songtime zu erhalten. Ich aktualisiere dann den Wert des Scrubbers, um die aktuelle Zeitposition des Audios wiederzugeben.

1	song.addEventListener('timeupdate',function (){
2	curtime = parseInt(song.currentTime, 10);
3	$("#seek").attr("value", curtime);
4	});

Und da sind wir fertig! Ein HTML5-Audio-Player, den Sie auf Ihrer Website oder App implementieren können.

Abschluss

Wie bereits erwähnt, steckt HTML5-Audio noch in den Kinderschuhen und bietet noch Verbesserungspotenzial. Im Moment ist das Audio für die Musikwiedergabe ausgelegt und wird daher immer Audio vom Server streamen, was dazu führt, dass einige Browser Probleme mit der Wiedergabe haben. Dies ist nicht immer ein Problem, sondern bedeutet nur, dass es manchmal anfängt zu zahlen, bevor das Audio vollständig heruntergeladen wurde.

Dies kann möglicherweise ein Problem sein, wenn Sie HTML5-Audio für Soundeffekte in Spielen oder audio-intensive Apps verwenden möchten. Aus diesem Grund haben unsere Freunde bei Google eine Methode entwickelt, um die Schwächen des Audio-Tags zu beheben. Google hat einen Vorschlag für die "Web Audio API" erstellt und dem W3C vorgelegt. Dies erweist sich als viel leistungsfähiger als natives HTML5-Audio. Das Problem ist jedoch, dass es derzeit nur in Chrome funktioniert (können Sie sich vorstellen?!).

Sie können mehr über die Web-Audio-API von Google lesen und einige Beispiele im Google-Code sehen oder die Web-Audio-Spezifikation lesen.

Ich hoffe, es hat Ihnen Spaß gemacht, etwas über HTML5-Audio zu lernen und wie Sie Ihre eigenen Player erstellen können. Mein Player enthält grundlegende Steuerelemente, aber nichts hindert Sie daran, weitere Funktionen wie die Lautstärkeregelung und sogar Ihre eigenen benutzerdefinierten Animationen hinzuzufügen. Mit ein wenig Nachdenken und Experimentieren können Sie wirklich einige großartige Audio-Player erstellen. Laden Sie den Quellcode herunter und ich freue mich darauf zu sehen, was Sie sich einfallen lassen!

Wenn Sie weitere Optionen für die Arbeit mit Audioplayern und anderen Medien in HTML5 bekommen möchten, lesen Sie die HTML5-Medienelemente auf Envato Market.