HTML5 Audio Player

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

Musik von Thomas Langen
Auf Facebook: thomaslangen.de

Tutorial 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 den Bereich:

> Menü > Seiten > am Zahnrad ⚙️ Seiteneinstellungen > Inside <head> code

JavaScript zum ein- und ausschalten

<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 Code mit automatischen Start ohne Player-Anzeige

<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

Audio Code mit Button zum ein- und ausschalten

Audio Player mit Bedienung

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 Code mit Player-Anzeige - hier nur mit .mp3 Datei. Zum Einbau habe ich hier einen einfachen Textblock aus der Rubrik "Article" verwendet und das Audio-Tag unter dem Beispieltext anzeigen lassen. Siehe Screenshot unten:

<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

Audio Code mit Player und eigener CSS

Audio Player





Audio Player auf einem Hintergrundbild
Automatisch gestartete Hintergrund-Musik ausschalten 

Impressum | Datenschutz | Spenden

Copyright © Mobirise-Tutorials.com Thomas Frei-Herrmann
Private Homepage