Cover Image

Fun with HTML5
November 2, 2021 - Lesezeit: 25 Minuten

Jetzt gibt es soviele verschiedene Betriebssysteme und so viele unterschiedliche Musikplayerprogramme von VLC über mplayer oder der im Windows integrierte Grooveplayer. Nur sind die meisten Programme entweder nicht direkt installiert oder umständlich einzurichten, wollen ins Internet um irgendwas runterzuladen oder erstmal die ganze Festplatte durchsuchen. Ich will doch einfach nur ein paar mp3 Dateien anhören. Aber es gibt ja glücklicherweise den Browser, der das Abspielen von Musikdateien im HTML5 Standard ja bereits unterstützt. Super, also schnell die mp3 Datei gesucht und via Drag und Drop in den Browser ziehen und schon wird sie abgespielt. Nach 5 Minuten dann die nächste Datei draufziehen. Und dann nach 5 Min.? Genau: nächste Datei draufziehen. Nach 20 Min. war mir das dann zu doof und zu zeitaufwändig. Aber bis ich jetzt im Grooove mir was zusammengezogen habe und das Ganze dann noch für mein Linux und mein Androiden zusammengstellt habe, kam mir die Idee, warum nicht alles einmal fertig machen und auf jeder Plattform genießen. Also hab ich das Ganze mal in eine Website gepackt:

<audio id="audio" preload="auto" tabindex="0" controls="" type="audio/mpeg">
<source type="audio/mp3" src="./Voodoo Suite - Little Grass Shack.mp3">
Sorry, your browser does not support HTML5 audio.
</audio>

Ok, das war easy. Jetzt kann ich eine Datei abspielen. Die Datei muss im selben Ordner liegen und das Ganze kann, in zusammenarbeit mit einem einfachen Webserver, sogar schon gestreamt werden. Ist aber nur eine Datei, brauchen wir noch eine Playlist:

<ul id="playlist">
<li><a class='active'href="./Voodoo Suite - Little Grass Shack.mp3">Voodoo Suite - Little Grass Shack.mp3 (Local)</a></li>
<li><a href="https://files.freemusicarchive.org/storage-freemusicarchive-org/music/WFMU/Voodoo_Suite/blissbloodcom/Voodoo_Suite_-_03_-_Little_Grass_Shack.mp3">Voodoo_Suite_-_03_-_Little_Grass_Shack.mp3</a></li>
</ul>

Ok, jetzt haben wir eine Playlist. Wenn ich die aber anklicke, dann navigiert der Browser und ich bin soweit wie vorher. Dann packen wir doch einfach noch ein bisschen oldskool Javascript dazu:

<script>
  var audio;
  var playlist;
  var tracks;
  function init() {
    audio = document.querySelector('#audio');
    playlist = document.querySelector('#playlist');
    tracks = playlist.querySelector('li a');
    let links = playlist.querySelectorAll('a');
    links.forEach(e => {
      e.onclick = (evt) => {
        evt.preventDefault();
        playlink(e);
      }
    });
    audio.addEventListener('ended', function (e) {
      var current = playlist.querySelector('li a.active');
      var next = current.parentNode.nextElementSibling;
      if (next) {
        let e = next.querySelector('a');
        playlink(e);
      }
      else {
        let links = playlist.querySelectorAll('a');
        playlink(links[0]);
      }
    });
  }
  function playlink(link) {
    let e = link;
    playlist.querySelectorAll('a').forEach(l => { l.classList.remove("active") });
    e.classList.add("active");
    audio.src = e.getAttribute('href');
    audio.load();
    audio.play();
  }
  init();
</script>

So, jetzt kann ich mir in der Playlist aussuchen was ich will und die ganze Liste läuft solange ich nicht stoppe. Ich kann ich der Playlist entweder lokale Einträge verwenden oder Quellen aus dem Internet. Das Ganze lässt sich mithilfe eines Webservers bequem bedienen und funktioniert sogar mit der Xbox. Was will man mehr. Kein generve vom VLC für Updates oder das Verhalten des mplayers unter windows. Man muss nur seinen Browser aktuell halten und das war's schon.

Das Javascript in diesem Beispiel kann zweifelsohne noch deutlich verbessert werden. Ist aber für den vorliegenden Fall vollkommen ausreichend. Denn sonst hätt ich ja auch einen Player installieren können.

Kategorien

Navigation

Tags