HTML: audio / video Lautstärke mit Javascript steuern

Die HTML Tags für Audio- und Video besitzen eigentlich ein Attribut für die Lautstärke: Mit “volume” lässt sich die Lautstärke zwischen 0.1 und 1 festlegen: Dieses Attribut wird aber zur Zeit von keinem Browser unterstützt. Das macht aber nichts: Die Lautstärke von Audio- und Video-Inhalten einer Webseite lässt sich auch per Javascript steuern!

Tipp: So baut man Audio-Elemente und Musik in die Webseite ein!

Dazu greift man direkt auf die ID des Audio-Elements zu und verändert dessen Lautstärke: Das Funktioniert in 0.1 Schritten von 0.0 (stumm) bis 1, dem Standardwert für die Lautstärke. 0.5 ist dabei die halbe Lautstärke. Wichtig ist daher, dass das Audio- oder Video-Element eine eigene ID hat!

<audio id="musik">
<source src="sounds/musik.mp3" type="audio/mpeg">
</audio>

Möchte man jetzt die Lautstärke zum Beispiel mit einem Button verändern, geht das mit Javascript und den passenden HTML-Links:

<script type="text/javascript">
function laut(id) {
   var musik = document.getElementById(id);
   musik.volume = 1;
}

function leise(id) {
   var musik = document.getElementById(id);
   musik.volume = 0.1;
}
</script>

<a onclick="laut('musik');">Musik laut!</a>
<a onclick="leise('musik');">Musik leise!</a>