Audio Code mit Button zum ein- und ausschalten
Ein einfaches Beispiel
für Hintergrund-Musik
und einen einfachen HTML5 Player.
Musik von Thomas Langen
Webseite: thomaslangen.de
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 den Bereich:
> Menü > Seiten > am Zahnrad ⚙️ Seiteneinstellungen > 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) des Projektes auf meinem Server und auch im Verzeichnis der lokalen Publizierung angelegt, damit ich die Musik auch lokal schon hören kann und meine Musik-Dateien in dieses Verzeichnis kopiert.
Hierbei genügt heutzutage eigentlich auch nur das .mp3 Format, da dieses Format inzwischen 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 am Tab mit den drei Punkten ... am "Custom Code" hin geschrieben):
javascript:void(0);
und dann dem Button im "Code Editor" die "onClick" Funktion aus dem JavaScript gegeben:
onclick="aud_play_pause()"
wie auch unten im Screenshot zu sehen:
Audio Code mit Button zum ein- und ausschalten
Besucht auch meine Testseite hier
Natürlich könntet ihr ebenso einfach ein ganz normales HTML5 Audio Tag inklusive Player ("controls") einbauen und dann ohne das JavaScript zum ein- und ausschalten, da ja nun durch das "controls" ein Player zur Bedienung da ist:
<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">
Dieser HTML5 Player wird von Deinem Browser nicht unterstützt.
</audio>
Google Translator