HTML5 AudioPlayer

Scripte > Multimedia

Einfaches Einbinden von Audios-Files mit HTML 5

Eines der spannenden und lang erwartete Features in HTML5, das <audio> Element, native Audio-Wiedergabe im Browser aktivieren. Dieser Player wird in allen gängigen Browser unterstützt, wie Firefox, Chrome, Safari und Opera, aber auch vom Internet Explorer ab Version 9.

ZIP-Datei in ein beliebiges Verzeichnis auf dem PC entpackenund das Verzeichnis "wsX5Obj" auf den Webserver in das Root-Verzeichnis kopieren. HEAD-Code (wenn vorhanden) in den HEAD-Bereich <head>...</head> und HTML-Code in den BODY-Bereich <body>...</body> der aufrufende Datei einfügen.

Eine demo.html ist beigefügt, die zum Test in das Root-Verzeichnis des Webservers kopiert werden kann.

Aufruf: "http://www.domain.tld/demo.html". Diese kann aber auch durch einen Doppelklick ausgeführt werden.

Beigefügt sind neben den Codes als Textdateien als Zugabe die entsprechenden Audio-Konverter.

Über eine kleine Spende für unseren Aufwand würden wir uns sehr freuen.

Hinweis: Vorher nahm Autopuffer einen Boolean-Wert, der angibt, ob die Datei im voraus gepuffert werden soll. Zurzeit machen Browser den Übergang vom Autopuffer, um so vorzuladen. Deshalb sollten beide Attribute vorläufig verwendet werden controls und autobuffer. Da wie in den meisten Fällen die Browser verschiedene Audio-Formate benötigen, ist es zwangsläufig notwendig 3 Audioformate auf dem Webspace zu hinterlegen. Die Pfade zu den Audiodateien src= sind nur entsprechend anzupassen.

Die wichtigsten Konfigurations-Parameter:	controls	Steuerung (Player-Skin)
	autoplay	automatisch abspielen
	autobuffer	Pufferung bei Audioaufruf
	loop	Schleife (Wiederholung)

x runter geladen

HTML5 Basic-Player (Standardplayer)

HTML5 Extended-Player (Abdeckung aller möglichen Browser)

Code für den <BODY> Bereich

<audio autoplay controls

src="wsX5Obj/Obj19_1/demo-holydays.mp3">

</audio>

</div>

Nach dem <BODY> Tag

Code für den <BODY> Bereich

<audio controls preload="auto" autobuffer
<source src="wsX5Obj/Obj19_1/demo-techno.mp3">
<source src="wsX5Obj/Obj19_1/demo-techno.ogg">
<source src="wsX5Obj/Obj19_1/demo-techno.wav">
Ihr Browser ist nicht kompatible mit diesem Audio>
</audio>

</div>

Nach dem <BODY> Tag

HTML5 Basic-Player (Standardplayer mit Songtitel)

HTML5 Extended-Player (Mehrere Player mit Songtitel)

Demo Kalaschnikow

Demo Techno

Demo Ewigkeit

Demo Holydays

Code für den <BODY> Bereich

<p><b>Demo Kalaschnikow</b></p>
<audio controls preload="auto" autobuffer

src="wsX5Obj/Obj19_1/demo-kalaschnikow.mp3">

</audio>

</div>

Nach dem <BODY> Tag

Code für den <BODY> Bereich

<p><b>Demo Techno</b></p>
<audio controls preload="auto" autobuffer

src="wsX5Obj/Obj19_1/demo-techno.mp3">

</audio>
<p><b>Demo Ewigkeit</b></p>
<audio controls preload="auto" autobuffer

src="wsX5Obj/Obj19_1/demo-ewigkeit.mp3">

</audio>
<p><b>Demo Holydays</b></p>
<audio controls preload="auto" autobuffer

src="wsX5Obj/Obj19_1/demo-holydays.mp3">

</audio>

</div>

Nach dem <BODY> Tag

HTML5 Multi-Player (Javascript erweitert)

01 Demosong Ewigkeit

Hier können beleibige Informationen zum Song stehen.

02 Demosong The Wait

... hier auch ...

03 Demosong Kalschnikow

... hier auch ...

x runter geladen

Code für den <HEAD> Bereich

<!-- Hinweis: jQuery ist erforderlich für die Funktion "nicht mehrere Player gleichzeitig abspielen".

Wer jQuery ohnehin auf seiner Seite eingebunden hat, braucht natürlich die erste Zeile des folgenden Codes nicht mehr. -->

Vor dem </HEAD> Tag

Code für den <BODY> Bereich

<div class="sound">

<input onclick="play(1)" type="image"

src="wsX5Obj/Obj19_2/img/car1.jpg" width="120" height="68" alt="Titelbild 1">

<audio

onended="cont(1)" id ="1" src="wsX5Obj/Obj19_2/media/demo-ewigkeit.mp3" controls preload="none">

</audio>
<h3 onclick="play(1)"> 01 Demosong Ewigkeit </h3>
<p onclick="play(1)"> Hier können beleibige Informationen zum Song stehen. </p>

</div>
<div class="sound">

<input onclick="play(2)" type="image"

src="wsX5Obj/Obj19_2/img/car2.jpg" width="120" height="68" alt="Titelbild 2">

<audio

onended="cont(2)" id ="2" src="wsX5Obj/Obj19_2/media/demo-the_wait.mp3" controls preload="none">

</audio>
<h3 onclick="play(2)"> 02 Demosong The Wait </h3>
<p onclick="play(2)"> ... hier auch ... </p>

</div>
<div class="sound">

<input onclick="play(3)" type="image"

src="wsX5Obj/Obj19_2/img/car3.jpg" width="120" height="68" alt="Titelbild 3">

<audio

onended="cont(3)" id ="3" src="wsX5Obj/Obj19_2/media/demo-kalaschnikow.mp3" controls preload="none">

</audio>
<h3 onclick="play(3)"> 03 Demosong Kalschnikow </h3>
<p onclick="play(3)"> ... hier auch ... </p>

</div>

</div>

Nach dem <BODY> Tag

Code Datei "style.css"

.play_container {

font-family: Book Antiqua;
font-size: 12px;
font-weight: normal;
vertical-align: top;
padding: 0px;
margin: 0px;
}

.sound { clear: left; margin: 1 0; }

.sound input { margin: 0 1em .5em 0; float: left; padding: 0; }

.sound p { margin: 0 0 1.5em 0; }

.sound:after { content: "."; display: block; height: 0; clear: left; visibility: hidden; }

audio { margin: 0; min-width: 0 }

@media only screen and (min-device-width: 768px) {

audio { max-width: 75%; }
}

@media only screen

and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2)

and (orientation: portrait) {

audio{max-width: 10em;
}

» nach oben «