Tutorial HTML5 Player mit eigenen JavaScript Funktionen
Version vom 10.07.2016 von: Werner-Zenk.de
Dieser Player ist eine Weiterentwicklung vom alten HTML5 Player und speichert den Status des Players mittels Web Storage auf Eurem PC. Es wird also bei einem neuen Aufruf die gleiche Sound-Datei an der gleichen Stelle weitergespielt. Weiterhin kann man nun am “Rückwärts Button” auf der Anfang der Datei springen.
Auf älteren Betriebssystemen wie Windows XP habe ich feststellen müssen, dass (nach wie vor) in manchen Browsern wie z.B. dem Firefox oder Opera keine MP3 Dateien unterstützt werden.
Auf meinem Windows 7, Windows 8.1 und Windows 10 sowie auf mobilen Geräten, habe ich das Skript erfolgreich testen können. Dieses Skript verwendet ausschließlich MP3 Audio-Dateien, die automatisch aus einem Verzeichnis ausgelesen werden. Ihr braucht also lediglich die gewünschten Titel im Skript eintragen, die zur Auswahl stehen sollen.
Ich habe hier lediglich die CSS an meine Seite etwas angepasst.
Um dem Player einen Style zu geben, kopiert Ihr Euch diese CSS in die HTML des Layouts Eurer Seite (oder in eine CSS-Datei), die Ihr natürlich beliebig ändern könnt.
> Layout markieren > Fenster “Layout-Eigenschaften” > Button “HTML” > “Zwischen Head Tags” einfügen
<style>
table#musikBox {
background-color: #F5F5F5;
padding: 5px;
margin: Auto;
white-space: nowrap;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
border: solid 1px #999999;
box-shadow: 2px 2px 3px #999999;
cursor: Default;
}
input#volume {
width: 115px;
border-radius: 0px;
}
input[type="button"] {
background: #B3C5F2;
border: Solid 1px #B3C5F2;
}
input[type="button"]:hover {
background: #43ADC7;
border: Solid 1px #000000;
}
div#progress {
width: 0%;
height: 15px;
margin: 0;
border-radius: 5px;
font-family: Arial, Sans-Serif;
font-size: 0.70rem;
color: #FFFFFF;
background-color: #4169E1;
box-shadow: inset 0px 5px 10px #FFFFFF;
text-shadow: 1px 1px 0px #555555;
}
td#progressbar {
border: Solid 1px #D3DDF8;
border-radius: 4px;
padding: 0px;
}
</style>
Fügt das JavaScript ebenfalls in die HTML des Layouts Eurer Seite ein.
> Layout markieren > Fenster “Layout-Eigenschaften” > Button “HTML” > “Zwischen Head Tags” einfügen
Ich habe mir am Server ein Verzeichnis, das ich “sound” genannt habe mittels FTP-Programm angelegt und meine MP3 Dateien in dieses Verzeichnis kopiert. In meinem Fall liegt das Verzeichnis “sound” im gleichen Verzeichnis wie diese NOF-Seite, daher die relative Pfadangabe nur mit einem Punkt ./
<script>
/* Audio-Dateien steuern
* 10.07.2016
* Werner-Zenk.de */
"use strict";
var txt = new Array();
var file = new Array();
var aktiv = false;
txt[0] = "Afrika"; file[0] = "./sound/Afrika.mp3";
txt[1] = "All-Hallows-Dream"; file[1] = "./sound/All-Hallows-Dream.mp3";
txt[2] = "Bannockburn"; file[2] = "./sound/Bannockburn.mp3";
txt[3] = "Citylights"; file[3] = "./sound/Citylights.mp3";
txt[4] = "Ethnophobia"; file[4] = "./sound/Ethnophobia.mp3";
txt[5] = "Put Your Arms Around Me"; file[5] = "./sound/Put-Your-Arms-Around-Me.mp3";
function loadMusic() {
myFile(0);
var myMusic = document.getElementById("myMusic");
for (var z = 0; z < file.length; z++) {
document.getElementById("playlist").options[z] = new Option((z + 1) + " " + txt[z], file[z]);
}
}
function playMusic() {
myMusic.play();
var aktiv = window.setInterval("setTime()", 1000);
}
function pauseMusic() {
myMusic.pause();
window.clearInterval(aktiv);
}
function randomMusic() {
var rnd = Math.round(Math.random() * (file.length - 1));
if (rnd == document.getElementById("playlist").selectedIndex) randomMusic();
myFile(rnd);
document.getElementById("playlist").selectedIndex = rnd;
playMusic();
}
function changeMusic() {
var pd = (!myMusic.paused) ? true : false;
myFile(document.getElementById("playlist").selectedIndex);
if (pd) playMusic();
}
function volumeMusic() {
myMusic.volume = document.getElementById("volume").value;
document.getElementById("volume").title = "Lautstärke " +
document.getElementById("volume").value * 10;
}
function previousMusic() {
var pd = (!myMusic.paused) ? true : false;
var sx = document.getElementById("playlist").selectedIndex;
if (sx > 0) {
sx--;
document.getElementById("playlist").selectedIndex = sx;
myFile(sx);
if (pd) playMusic();
}
else {
var sx = file.length - 1;
document.getElementById("playlist").selectedIndex = sx;
myFile(sx);
if (pd) playMusic();
}
}
function nextMusic() {
var pd = (!myMusic.paused) ? true : false;
var sx = document.getElementById("playlist").selectedIndex;
if (sx < file.length - 1) {
sx++;
document.getElementById("playlist").selectedIndex = sx;
myFile(sx);
if (pd) playMusic();
}
else {
document.getElementById("playlist").selectedIndex = 0;
myFile(0);
if (pd) playMusic();
}
}
function backwardMusic() {
myMusic.currentTime -= 10.0;
setTime();
}
function forwardMusic() {
myMusic.currentTime += 10.0;
setTime();
}
function rewindMusic() {
myMusic.currentTime = 0;
setTime();
}
function loopMusic() {
myMusic.loop = document.getElementById("loop").checked ? true : false;
}
function autoplayMusic() {
if (myMusic.currentTime >= myMusic.duration) {
myMusic.currentTime = 0;
if (document.getElementById("random").checked) {
randomMusic();
}
else {
var sx = document.getElementById("playlist").selectedIndex;
if (sx < file.length - 1) {
sx++;
document.getElementById("playlist").selectedIndex = sx;
myFile(sx);
playMusic();
}
else {
document.getElementById("playlist").selectedIndex = 0;
myFile(0);
playMusic();
}
}
}
}
function setTime() {
if (myMusic.readyState) {
var ct = Math.floor(myMusic.currentTime);
var dn = Math.floor(myMusic.duration);
document.getElementById("progress").innerHTML= " " + ct + " / " + dn;
document.getElementById("progress").style.width = (ct / dn * 100) + "%";
if (document.getElementById("autoplay").checked) autoplayMusic();
}
}
function myFile(nr) {
document.getElementById("myMusic").src = file[nr];
}
function saveStatus() {
window.localStorage.setItem("playlistIndex", document.getElementById("playlist").selectedIndex);
window.localStorage.setItem("autoplay", (document.getElementById("autoplay").checked ? "j" : "n"));
window.localStorage.setItem("random", (document.getElementById("random").checked ? "j" : "n"));
window.localStorage.setItem("loop", (document.getElementById("loop").checked ? "j" : "n"));
window.localStorage.setItem("volume", document.getElementById("volume").value);
window.localStorage.setItem("currentTime", myMusic.currentTime);
}
function loadStatus() {
if (window.localStorage.getItem("playlistIndex")) {
document.getElementById("playlist").selectedIndex = window.localStorage.getItem("playlistIndex");
myFile(document.getElementById("playlist").selectedIndex);
if (window.localStorage.getItem("autoplay") == "j") document.getElementById("autoplay").checked = true;
if (window.localStorage.getItem("random") == "j") document.getElementById("random").checked = true;
if (window.localStorage.getItem("loop") == "j") document.getElementById("loop").checked = true;
document.getElementById("volume").value = window.localStorage.getItem("volume");
document.getElementById("volume").title = "Lautstärke " + document.getElementById("volume").value * 10;
myMusic.currentTime = window.localStorage.getItem("currentTime");
playMusic(); pauseMusic();
}
}
window.addEventListener('load', function() {
document.getElementById("play").addEventListener("click", playMusic);
document.getElementById("pause").addEventListener("click", pauseMusic);
document.getElementById("loop").addEventListener("click", loopMusic);
document.getElementById("playlist").addEventListener("change", changeMusic);
document.getElementById("volume").addEventListener("input", volumeMusic);
document.getElementById("volume").addEventListener("click", volumeMusic); // IE
document.getElementById("previous").addEventListener("click", previousMusic);
document.getElementById("next").addEventListener("click", nextMusic);
document.getElementById("backward").addEventListener("click", backwardMusic);
document.getElementById("backward").addEventListener("dblclick", rewindMusic);
document.getElementById("forward").addEventListener("click", forwardMusic);
loadMusic(); loadStatus();
});
window.addEventListener("unload", saveStatus);
</script>
Jetzt zieht Ihr Euch ein Textfeld, an der Stelle wo der Player erscheinen soll, auf und fügt zur Anzeige des Players den Code unten in den HTML-Code Editor des Textfeldes ein.
> Textfeld doppelklicken (Cursor blinkt) > Fenster “Text-Eigenschaften” > mittlere Button oben “Textfeld” > Button ”HTML” > Code einfügen
<table id="musikBox">
<tr>
<td>
<select id="playlist" title="Audiodatei auswählen"></select>
<input type="button" value=">" id="play" title="Wiedergabe">
<input type="button" value="||" id="pause" title="Pause">
<label title="Automatische Wiedergabe"><input type="checkbox" id="autoplay">≥</label>
<label title="Zufällge Wiedergabe"><input type="checkbox" id="random">⇆</label>
<label title="Audiodatei wiederholen"><input type="checkbox" id="loop">↻</label>
</td>
</tr>
<tr>
<td>
<input type="button" value="‹" id="previous" title="Vorherige Audiodatei">
<input type="button" value="›" id="next" title="Nächste Audiodatei">
<input type="range" id="volume" value="0.7" min="0" max="1" step="0.1" title="Lautstärke 7">
<input type="button" value="«" id="backward" title="Audiodatei - 10 Sekunden zurück Audiodatei-Anfang (Doppelklick!)">
<input type="button" value="»" id="forward" title="Audiodatei - 10 Sekunden vorwärts">
<audio id="myMusic"></audio>
</td>
</tr>
<tr>
<td id="progressbar">
<div id="progress"></div>
</td>
</tr>
</table>
... und fertig. Bitte denkt daran, dass Ihr nur gemafreie Musik verwendet.
Viel Spaß!
