MP3 Player in HTML5 mit Status-Bar und Zeitanzeige
Der Internet Explorer unterstützt diese HTML5 Funktion erst ab Version 9.
Klicke auf das Symbol unten ...
Musik von MusicFillingStation.de
Guckt Euch zum Verständnis für das Skript diesen Film an.
... demnach kopiert Ihr dieses Skript in die HTML Eures Layouts, hier mit der zusätzlichen Funktion “anpassen”.
> 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";
}
function pausieren()
{
document.getElementById("player").pause();
document.getElementById("playbutton").style.display = "";
document.getElementById("pausebutton").style.display = "none";
}
function anfang()
{
document.getElementById("player").currentTime = 0;
}
function anpassen()
{
aktuelleZeit = document.getElementById("player").currentTime;
gesamtZeit = document.getElementById("player").duration;
prozent = aktuelleZeit / gesamtZeit;
breite = prozent * 100;
document.getElementById("bar").style.width = breite + "px";
aktuelleZeit = aktuelleZeit.toFixed(0);
sekunden = aktuelleZeit % 60;
minuten = (aktuelleZeit - sekunden) / 60;
if (sekunden < 10) sekunden ="0" + sekunden;
aktuelleZeit = minuten + ":" + sekunden;
document.getElementById("zeit").innerHTML = aktuelleZeit;
}
</script>
Zu der Funktion “anpassen” noch einige Bemerkungen. Bei mir soll der Balken zu Anzeige der Zeit genau 100px breit sein, daher:
breite = prozent * 100;
Es wird die Variable “aktuelleZeit” durch die Variable “gesamtZeit” geteilt. Dies ergibt eine Prozentzahl, die mit der Länge (hier 100) der Bar multipliziert wird. Das Ergebnis ist die Länge in Pixeln. Mit dem Befehl “innerHTML” wird dann, in dem Layoutbereich mit der id="zeit", die Variable “aktuelleZeit” angezeigt.
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" ontimeupdate="anpassen()">
<source src="../assets/multimedia/citylights.mp3" type="audio/mpeg">
<source src="../assets/multimedia/citylights.ogg" type="audio/ogg">
</audio>
<img src="../assets/images/sound.gif" name="playbutton" width="32" height="29" id="playbutton" title="Abspielen" style="cursor: pointer" onClick="abspielen()"/>
<img src="../assets/images/pause.png" name="pausebutton" width="32" height="29" id="pausebutton" title="Pause" style="display: none; cursor: pointer" onClick="pausieren()"/>
<img src="../assets/images/resetlong.png" name="resetbutton" width="68" height="29" id="resetbutton" title="von vorne abspielen" style="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. 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.
Zur Anzeige der in der Funktion “anpassen” definierten id="bar" habe ich folgenden DIV-Container in die HTML eines Textfeldes kopiert, dem ich zusätzlich auch noch eine CSS-Class für einen feinen Rahmen gegeben habe, damit sich der Status-Balken innerhalb des Rahmens zeigt.
<div style="width: 100px; height: 3px; background-color: #6464F0" id="bar"></div>
Zur Anzeige der in der Funktion “anpassen” definierten id="zeit" habe ich mir einen extra Layoutbereich aufgezogen und diesem die
Objekt-ID “zeit” gegeben...
... wodurch bereits diese Funktion der Zeitanzeige angezeigt wird. Ich wollte nun hier auch noch eine CSS-Class “Zeitanzeige” verwenden, in der ich dieser Anzeige eine kleinere Schrift mit einer anderen Farbe gegeben habe. Daher habe ich diesem Layoutbereich noch zusätzlich eine <div class>, wie unten im Bild zu erkennen, gegeben.
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ß !