Tutorial HTML5 Player mit eigenen JavaScript Funktionen

Version vom 26.01.2015 von: Webbausteine.de

Bitte guckt Euch auch die neuere Version vom 17.07.2016 von diesem HTML5-Player mit zusätzlichen Funktionen an.

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).

> 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;
   border: solid 1px #999999;
   box-shadow: 2px 2px 3px #999999;
   cursor: Default;
  }

  input#volume {
   width: 100px;
  }

  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;
  }
 
</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
   * 26.01.2015
   * Webbausteine.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()", 1);
  }

  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 py = (!myMusic.paused) ? true : false;
   myFile(document.getElementById("playlist").selectedIndex);
   setTime();
   if (py) playMusic();
  }

  function volumeMusic() {
   myMusic.volume = document.getElementById("volume").value;
   document.getElementById("volume").title = "Lautstärke " +
    document.getElementById("volume").value * 10;
  }

  function previousMusic() {
   var py = (!myMusic.paused) ? true : false;
   var ix = document.getElementById("playlist").selectedIndex;
   if (ix > 0) {
    ix--;
    document.getElementById("playlist").selectedIndex = ix;
    myFile(ix);
    if (py) playMusic();
    setTime();
   }
  }

  function nextMusic() {
   var py = (!myMusic.paused) ? true : false;
   var ix = document.getElementById("playlist").selectedIndex;
   if (ix < file.length-1) {
    ix++;
    document.getElementById("playlist").selectedIndex = ix;
    myFile(ix);
    if (py) playMusic();
    setTime();
   }
  }

  function backwardMusic() {
   myMusic.currentTime -= 10.0;
   setTime();
  }

  function forwardMusic() {
   myMusic.currentTime += 10.0;
   setTime();
  }

  function loopMusic() {
   if (document.getElementById("loop").checked) {
    myMusic.loop = true;
   }
   else {
    myMusic.loop = false;
   }
  }

  function setTime() {
   if (myMusic.readyState) {
    var ct = Math.ceil(myMusic.currentTime);
    var dn = Math.ceil(myMusic.duration);
    document.getElementById("progress").innerHTML= ct + " / " + dn;
    document.getElementById("progress").style.width = Math.floor(ct / dn * 100) + "%";
    if (document.getElementById("autoplay").checked) {
     autoplayMusic();
    }
   }
  }

  function autoplayMusic() {
   if (myMusic.currentTime >= myMusic.duration) {
    myMusic.currentTime = 0;
    if (document.getElementById("random").checked) {
     randomMusic();
    }
    else {
     var ix = document.getElementById("playlist").selectedIndex;
     if (ix < file.length-1) {
      ix++;
      document.getElementById("playlist").selectedIndex = ix;
      myFile(ix);
      playMusic();
     }
     else {
      document.getElementById("playlist").selectedIndex = 0;
      myFile(0);
      playMusic();
     }
    }
   }
  }

  function myFile(nr) {
   document.getElementById("myMusic").src = file[nr];
  }

  function init() {
   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("forward").addEventListener("click", forwardMusic);
   loadMusic();
  }

  window.addEventListener("load", init);
</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="Titel auswählen"></select>
   <input type="button" value="&gt;" id="play" title="Wiedergabe">
   <input type="button" value="II" id="pause" title="Pause">
   <label title="Automatische Wiedergabe"><input type="checkbox" id="autoplay">&#8805;</label>
   <label title="Zufällge Wiedergabe"><input type="checkbox" id="random">&#8646;</label>
   <label title="Titel Wiederholung"><input type="checkbox" id="loop">&#8635;</label>
  </td>
 </tr>
 <tr>
  <td>
   <input type="button" value="&lsaquo;" id="previous" title="Vorheriger Titel">
   <input type="button" value="&rsaquo;" id="next" title="Nächster Titel">
   <input type="range" id="volume" value="0.7" min="0" max="1" step="0.1" title="Lautstärke 7">
   <input type="button" value="&laquo;" id="backward" title="10 Sekunden zurück">
   <input type="button" value="&raquo;" id="forward" title="10 Sekunden vorwärts">
   <audio id="myMusic"></audio>
  </td>
 </tr>
 <tr>
  <td>
   <div id="progress"></div>
  </td>
 </tr>
</table>

... und fertig. Bitte denkt daran, dass Ihr nur gemafreie Musik verwendet.

Viel Spaß!

Tutorials von Thomas Frei-Herrmann

diese Seite weiter empfehlen


Counter Statistik