HTML5 Player

MP3 Player in HTML5

Der Internet Explorer unterstützt diese HTML5 Funktion erst ab Version 9. Hier zusätzlich mit Anzeige der Abspieldauer.

Klicke auf das Symbol unten ...

 

Guckt Euch zum Verständnis für das Skript diese beiden Filme an.

 

 

... demnach kopiert Ihr dieses Skript in die HTML Eures Layouts.

> Layout markieren > Fenster “Layout-Eigenschaften” > Button “HTML” > “Zwischen Head Tags” einfügen.

<script type="text/javascript">
    function abspielen()
    {
       document.getElementById("player").play();
       document.getElementById("pausebutton").style.display = "";
       document.getElementById("playbutton").style.display = "none";
       document.getElementById("resetbutton").style.display = "";
    }
    function pausieren()
    {
       document.getElementById("player").pause();
       document.getElementById("playbutton").style.display = "";
       document.getElementById("pausebutton").style.display = "none";
       document.getElementById("resetbutton").style.display = "none";
    }
    function anfang()
    {
       document.getElementById("player").currentTime = 0;
    }
</script>

Um den Player aufzurufen kopiert Ihr das Skript unten in den HTML-Code Editor eines Textfeldes

> Textfeld aufziehen > Fenster “Text-Eigenschaften” > mittlere Button “Text” > Button “HTML” > Code einfügen

<audio id="player">
   <source src="../assets/multimedia/citylights.mp3" type="audio/mpeg">
   <source src="../assets/multimedia/citylights.ogg" type="audio/ogg">
</audio>
<img src="../assets/images/pausebutton.png" name="playbutton" width="128" height="128" id="playbutton" title="Abspielen" style="cursor: pointer" onClick="abspielen()" onMouseover="playbutton.src='../assets/images/playbutton.png'" onMouseout="playbutton.src='../assets/images/pausebutton.png'"/>
<img src="../assets/images/playbutton.png" name="pausebutton" width="128" height="128" id="pausebutton" title="Pause" style="display: none; cursor: pointer" onClick="pausieren()" onMouseover="pausebutton.src='../assets/images/pausebutton.png'" onMouseout="pausebutton.src='../assets/images/playbutton.png'"/>
<img src="../assets/images/reset.png" name="resetbutton" width="32" height="29" id="resetbutton" title="von vorne abspielen" style="display: none; cursor: pointer" onClick="anfang()"/>

Das Skript oben müsst Ihr natürlich auf Eure Dateien anpassen, wie z.B. den Link zu Euren Audio Dateien und zu Euren Bildern für den Player. Weiterhin habe ich hier noch ein onMouseover und ein onMouseout für den Mausüber-Effekt eingefügt.

Achtet bei den Links auf die richtige relative Pfadangabe. Ich habe die beiden Audio-Dateien in meinen Ordner

/assets/multimedia/

kopiert und die Bilder für den Player in meinen Ordner

/assets/images/

kopiert und von einer Unterseite (2 Punkte) auf diese verlinkt. Von der Startseite (Home) käme dort nur 1 Punkt ./ hin.

Zur Konvertierung Eurer MP3 Datei in das Format .ogg könnt Ihr z.B. den Converter von DVDVideoSoft verwenden.

Alternative:

Ich habe hier noch beim Klick auf den Play-Button einen Reset-Button hinzugefügt, um die Musik von vorne beginnen zu lassen ...

Reset-Button

... wollt Ihr diesen Reset-Button weglassen und nur die Abspielen- und Pause Grafik anzeigen, dann würden die Skripte so aussehen.

In der Layout-HTML:

<script type="text/javascript">
    function abspielen()
    {
       document.getElementById("player").play();
       document.getElementById("pausebutton").style.display = "";
       document.getElementById("playbutton").style.display = "none";
    }
    function pausieren()
    {
       document.getElementById("player").pause();
       document.getElementById("playbutton").style.display = "";
       document.getElementById("pausebutton").style.display = "none";
    }
</script>

In der Textfeld-HTML:

<audio id="player">
    <source src="../assets/multimedia/citylights.mp3" type="audio/mpeg">
    <source src="../assets/multimedia/citylights.ogg" type="audio/ogg">
</audio>
<img src="../assets/images/pausebutton.png" name="playbutton" width="128" height="128" id="playbutton" title="Abspielen" style="cursor: pointer" onClick="abspielen()" onMouseover="playbutton.src='../assets/images/playbutton.png'" onMouseout="playbutton.src='../assets/images/pausebutton.png'"/>
<img src="../assets/images/playbutton.png" name="pausebutton" width="128" height="128" id="pausebutton" title="Pause" style="display: none; cursor: pointer" onClick="pausieren()" onMouseover="pausebutton.src='../assets/images/pausebutton.png'" onMouseout="pausebutton.src='../assets/images/playbutton.png'"/>

Bemerkungen:

  • Achtung der Internet Explorer unterstützt dieses Audio-Tag erst ab der Version 9, alle anderen Browser unterstützen diese Funktion.
     
  • Dieses HTML5 Skript kommt ohne Flash aus und ist daher auch gut für mobile Endgeräte geeignet.

Viel Spaß !

Tutorials von Thomas Frei-Herrmann
diese Seite weiter empfehlen



Counter Statistik