Hier ein Screenshot vom gesamten Audio-Code im Code-Editor.
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. Wollt Ihr die Musik erst einschalten lassen, so lasst das autoplay im Audio-Tag einfach weg.
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.
Bitte besucht auch meine Testseite hier
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>