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.
Das HTML Audio Tag gehört in einen Block von Mobirise. Da es hier als Hintergrund-Musik verwendet wird, ist es egal in welchen Block. Ich habe es hier im gleichen Block wie den "Play / Pause" Button eingebaut.
Bitte beachtet, dass der Player noch nicht auf der Arbeitsseite funktioniert, sondern erst im Browser nach dem Publizieren.
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
Automatisch gestartete Hintergrund-Musik ausschalten
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:
Unten noch ein Beispiel mit dem gleichen Player auf einem Hintergrundbild .
<audio id="myPlayer" controls loop>
<source src="./music/musicfox_dancing_street-gemafrei.mp3" type="audio/mpeg">
Dieser Audio-Player wird von Deinem Browser nicht unterstützt.
</audio>
Meine zusätzliche und optionale CSS um den Player etwas zu animieren. Diese CSS gehört in den Bereich "CSS Editor":
/* Tommys audio CSS */
audio {
width: 300px;
max-width: 90%;
height: 30px;
display: block;
transition:all 0.5s linear;
box-shadow: 2px 2px 4px 0px #006773;
border-radius: 30px;
}
/* color player at Edge and Chrome */
audio::-webkit-media-controls-panel {
background-color: lightblue;
}
/* color player at Firefox (takes blue only) */
audio{
background-color: blue;
opacity: 0.8;
}
/* animation of player */
audio:hover, audio:focus, audio:active {
box-shadow: 15px 15px 15px rgba(0, 0, 0, 0.4);
transform: scale(1.05);
}
Audio Code mit Player und eigener CSS
Audio Player auf einem Hintergrundbild
Automatisch gestartete Hintergrund-Musik ausschalten
Google Translator
Funktionale Cookies akzeptieren