bootstrap button

HTML5 Audio Player


Ein einfaches Beispiel
für Hintergrund-Musik
und einen einfachen HTML5 Player.

Musik von Thomas Langen 

Tutorial für MP3 Player

Schalte die Hintergrund-Musik am Button unten aus oder wieder ein

Diese Hintergrundmusik wird über ein kleines JavaScript über eine ID, die ich id="myAudio" genannt habe, gestartet. Dieses JavaScript gehört in die:


> "Page Settings" > "Inside <head> code"

<script>

function aud_play_pause() {

  var myAudio = document.getElementById("myAudio");

  if (myAudio.paused) {

    myAudio.play();

  } else {

    myAudio.pause();

  }

}

</script>

Ich habe mir hier, mit meinem FTP-Programm. ein Verzeichnis "music" in meiner Root (Stammverzeichnis) auf meinem Server und auch im Verzeichnis der lokalen Publizierung angelegt (damit ich die Musik auch lokal schon testen kann) und meine Musik-Dateien in dieses Verzeichnis kopiert. Hierbei genügt heutzutage eigentlich auch nur das .mp3 Format, da dieses Format von allen gängigen Browsern unterstützt wird. Dem HTML5 Audio-Tag habe ich hier die id="myAudio" aus dem JavaScript oben gegeben.

<audio id="myAudio" autoplay loop>

   <source src="./music/Land-Of-Wizards.mp3" type="audio/mpeg">

   <source src="./music/Land-Of-Wizards.ogg" type="audio/ogg">

   Dieser HTML5 Player wird von Deinem Browser nicht unterstützt.

</audio>

Man sollte immer für Hintergrund-Musik auch eine Möglichkeit zum Abschalten schaffen, so wie ich das hier mit dem Mobirise-Button

"PLAY / PAUSE"

getan habe, denn sonst kann die Musik schnell auch nervig werden.


Ich habe also einfach als Link, für den bereits von Mobirise vorhandenen Button, gewählt (hin geschrieben):

javascript:void(0);


und dann dem Button im "Code Editor" die "onClick" Funktion aus dem JavaScript gegeben:

onclick="aud_play_pause()"

Hier ein Screenshot vom gesamten Audio-Code im Code-Editor.

Natürlich könntet Ihr ebenso einfach ein ganz normales HTML5 Audio Tag inklusive Player ("controls") einbauen (ohne das JavaScript):

<audio id="myPlayer" controls loop>

   <source src="./music/Land-Of-Wizards.mp3" type="audio/mpeg">

   <source src="./music/Land-Of-Wizards.ogg" type="audio/ogg">

   sorry - your browser does not support the audio element

</audio>