HTML5 AudioPlayer - Website X5 Helpsite

Logo Schriftzug
Logo WSX5
Scan QR or Download Android App
Direkt zum Seiteninhalt

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)
Download Button
x runter geladen
HTML5 Basic-Player (Standardplayer)
HTML5 Extended-Player (Abdeckung aller möglichen Browser)
Code für den <BODY> Bereich
<div align="left">
<audio autoplay controls
src="wsX5Obj/Obj19_1/demo-holydays.mp3">
</audio>
</div>
Code für den <BODY> Bereich
<div align="center">
<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>
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
<div align="left">
<p><b>Demo Kalaschnikow</b></p>
<audio controls preload="auto" autobuffer
src="wsX5Obj/Obj19_1/demo-kalaschnikow.mp3">
</audio>
</div>
Code für den <BODY> Bereich
<div align="center">
<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>
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 ...

Download Button
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. -->
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.0.min.js"></script>
<script src="wsX5Obj/Obj19_2/jquery_media.js"></script>
<link rel="stylesheet" href="wsX5Obj/Obj19_2/style.css">
Code für den <BODY> Bereich
<div class="play_container">
<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>
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 «
Logo Host Europe
Button Spenden
🏠 © 2009 - 2024
Hosting by
Zurück zum Seiteninhalt