HTML5 Tutorial Player

Das HTML5 Audio-Tag ist sehr einfach anzuwenden und ist ein super Ersatz für komplizierte Skripte. Unten noch die Erklärung für den einfachen Button.

Zunächst muss man wissen, dass die verschiedenen Browser nicht alle Audio-Formate in HTML5 als solche unterstützen, daher ist es notwendig mehrere Audio-Formate anzugeben.

Hier könnt Ihr Euro Audios online in unterschiedliche Formate konvertieren lassen:

Online Audio Converter

Ich habe nun ein Textfeld aufgezogen und das unten stehende HTML5 Audio-Tag in den HTML-Code Editor eingetragen - und fertig.

<audio controls>
   <source src="../multimedia/citylights.mp3" type="audio/mpeg">
   <source src="../multimedia/citylights.ogg" type="audio/ogg">
   Dieser HTML5 Player wird von Deinem Browser nicht unterst&uuml;tzt.
</audio>

  • controls = erstellt automatisch die Player-Funktionen
     
  • <audio controls autoplay> = würde die Musik automatisch starten
     
  • MP3 und OGG = Audio Formate, die von allen modernen Browsern erkannt werden

 

Hier noch die Erklärung zu dem einfachen Button
 

Dazu fügt Ihr in die Layout-HTML dieses Skript ein, dem ich hier die ID myAudio gegeben habe.

> Layout markieren > Fenster “Layout-Eigenschaften” > “Zwischen Head Tags” einfügen

<script>
function aud_play_pause() {
  var myAudio = document.getElementById("myAudio");
  if (myAudio.paused) {
    myAudio.play();
  } else {
    myAudio.pause();
  }
}
</script>

... und dann fügt Ihr das unten stehende HTML5 Audio-Tag mit der ID myAudio wieder in den HTML-Code Editor eines Textfeldes ein, das mit dem Klick auf den Button die Javascript-Funktion aud_play_pause() aufruft - und fertig.

<audio id="myAudio">
   <source src="../multimedia/afrika.mp3" type="audio/mpeg">
   <source src="../multimedia/afrika.ogg" type="audio/ogg">
   Dieser HTML5 Player wird von Deinem Browser nicht unterst&uuml;tzt.
</audio>
<button type="button" onclick="aud_play_pause()">Play/Pause</button>

Für erweiterte und CSS-Einstellungen zum HTML5 Player guckt bitte auch hier. Für mehrere, grafische HTML5 Player guckt auch hier.

HTML5 Powered with Connectivity / Realtime, CSS3 / Styling, Device Access, Graphics, 3D & Effects, Multimedia, Performance & Integration, Semantics, and Offline & Storage 

Tutorials von Thomas Frei-Herrmann

diese Seite weiter empfehlen


Counter Statistik