NOF-Forum | Referenzen | Kontakt | Impressum | Sitemap
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:
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ützt.
</audio>
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ü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.