HTML5 AudioPlayer - Website X5 Helpsite

Logo Schriftzug
Logo WSX5
Newsletter anmelden
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
Downloads:
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
Downloads:
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;
}
Feedbacks zu ""

Hans-Jürgen Schulz

13.01.2012, 09:57

+0 -0  

so weit, so gut. Wie kann ich nun für ein Vokabelprogramm mehrere MP3-Dateien über einen Grafikbutton oder einen Link aufrufen und die gesprochenen Wörter versteckt (im Hintergrund) ablaufen lassen?Kann ich die Worte über Javascript auch ohne DOM über ein ID ändern und es läuft trotzdem in Firefox???GrußHans-Jürgen

Bitte Dein Feedback

Du wirst als User bei Deinem ersten Kommentar automatisch registriert und musst dies noch bestätigen.
Erstellen Dir ein Konto, damit Deine Kommentare dann ohne Bestätigung veröffentlicht werden.

Login | Registrierung


            CAPTCHA
            Vielen Dank für Dein Feedback.
            Logo Host Europe
            Button Spenden

            © 2009 - 2020




            
            Besucher Statistik
            » 2 Online
            » 85 Heute
            » 141 Gestern
            » 740 Woche
            » 993 Monat
            » 45050 Jahr
            » 269256 Gesamt
            Record: 1144 (01.02.2020)
            Gesamt Downloads:
            Hosting by
            Zurück zum Seiteninhalt