HTML5 AudioPlayer - Website X5 Hilfe - Die Helpsite

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

HTML5 AudioPlayer

Scripte > Multimedia

Einfaches Einbinden von Audios 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.
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.
ZIP-Datei in ein beliebiges Verzeichnis auf dem PC entpacken.
HEAD-Code (wenn vorhanden) in den HEAD-Bereich <head>.....</head> und HTML-Code in den BODY-Bereich <body>.....</body> der aufrufende Datei einfügen.
Die Pfade zu den Audiodateien src= sind entsprechend anzupassen.
Beigefügt sind die Code nochmals in einer Textdatei und als Zugabe die entsprechenden Konverter.

Die wichtigsten Konfigurations-Parameter:
controls = Steuerung (Player-Skin)
autoplay = automatisch abspielen
autobuffer = Pufferung bei Audioaufruf
loop = Schleife (Wiederholung)
Download Button
x runter geladen!
Basic HTML5 Player
(Standardplayer)
Extended HTML5 Player
(Abdeckung aller möglichen Browser)
Code für den <BODY> Bereich
<audio controls preload="auto" autobuffer>
<source src="wsX5Obj/Obj_MED/demo-techno.mp3" />
<source src="wsX5Obj/Obj_MED/demo-techno.ogg" />
<source src="wsX5Obj/Obj_MED/demo-techno.wav" />
Ihr Browser ist nicht kompatible mit diesem Audio.
</audio>
Code für den <BODY> Bereich
<audio
src="wsX5Obj/Obj_MED/demo-holydays.mp3" controls >
</audio>
Extended HTML5 Player
(Mehrere Player mit Songtitel)
Basic HTML5 Player
(Standardplayer mit Songtitel)

Demo Techno

Demo Ewigkeit

Demo Holydays

Demo Kalaschnikow

Code für den <BODY> Bereich
<p align="left"><b>Demo Techno</b></p>
<audio src="wsX5Obj/Obj_MED/demo-techno.mp3"
controls preload="auto" autobuffer>
</audio>
<p align="left"><b>Demo Ewigkeit</b></p>
<audio src="wsX5Obj/Obj_MED/demo-ewigkeit.mp3"
controls preload="auto" autobuffer>
</audio>
<p align="left"><b>Demo Holydays</b></p>
<audio src="wsX5Obj/Obj_MED/demo-holydays.mp3"
controls preload="auto" autobuffer>
</audio>
Code für den <BODY> Bereich
<p><b>Demo Kalaschnikow</b></p>
<audio src="wsX5Obj/Obj_MED/demo-kalaschnikow.mp3"
controls preload="auto" autobuffer>
</audio>
Multi HTML5 Audioplayer erweitert mit CSS und Javascript

01 Demosong Ewigkeit

Hier können beleibige Informationen zum Song stehen.

02 Demosong The Wait

... hier auch

03 Demosong Kalschnikow

... hier auch

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>

<style>
.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;}
}
</style>

<script>
jQuery(document).ready(function( $ ) {
$("audio").on("play", function (me) {
 $("audio").each(function (i,e) {
  if (e !== me.currentTarget) {
   this.pause();
   this.currentTime = 0;
  }
 });
});
})
function play(e) {
var de = document.getElementById(e);
if (de.paused) {
 de.play();
 de.onended = function() {
  if (document.getElementById(e+1)) {
   play(e+1);
  } else {
   play(1);
  }
 }
} else {
 de.pause();
}
}
function cont(e) {
if (document.getElementById(e+1)) {
 play(e+1);
} else {
 play(1);
}
}
</script>
Code für den <BODY> Bereich
<div class="play_container">
  <div class="sound">
<input onclick="play(1)" type="image" src="wsX5Obj/Obj_IMG/baer_k.jpg" width="120" height="72" alt="Titel 1">
<audio onended="cont(1)" id ="1" src="wsX5Obj/Obj_MED/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.
  </div>
  <div class="sound">
<input onclick="play(2)" type="image" src="wsX5Obj/Obj_IMG/hirsch_k.jpg" width="120" height="72" alt="Titel 2">
<audio onended="cont(2)" id ="2" src="wsX5Obj/Obj_MED/demo-the_wait.mp3" controls preload="none" >
    </audio>
<h3 onclick="play(2)"> 02 Demosong The Wait </h3>
<p onclick="play(2)"> ... hier auch
  </div>
  <div class="sound">
<input onclick="play(3)" type="image" src="wsX5Obj/Obj_IMG/hund1_k.jpg" width="120" height="72" alt="Titel 3">
<audio onended="cont(3)" id ="3" src="wsX5Obj/Obj_MED/demo-kalaschnikow.mp3" controls preload="none" >
    </audio>
<h3 onclick="play(3)"> 03 Demosong Kalschnikow </h3>
<p onclick="play(3)"> ... hier auch
  </div>
</div>
Feedbacks zu ""


Kein Kommentar
Vielen Dank für Dein Feedback.
HTML5
Button Spenden

© 2009 - 2018





Besucher Statistik
» 2 Online
» 539 Heute
» 469 Gestern
» 1774 Woche
» 5725 Monat
» 75546 Jahr
» 322124 Gesamt
Record: 1420 (10.04.2014)
Gesamt Downloads:
Zurück zum Seiteninhalt