Töne einbetten mit <audio>

Zum Schluss dieses Blocks: <audio> funktioniert fast identisch zu <video>, nur eben für reine Tonspuren ohne Bild - zum Beispiel Musik, einen Podcast, oder in Finns Fall vielleicht eine Aufnahme vom Torjubel seiner Mannschaft.

Das <audio>-Element

<audio controls>
  <source src="toene/torjubel.mp3" type="audio/mpeg">
  <source src="toene/torjubel.ogg" type="audio/ogg">
  Dein Browser unterstützt leider kein Audio.
</audio>

Du erkennst das Muster wieder: controls für Play/Pause und Lautstärke, mehrere <source>-Elemente für verschiedene Formate, und ein Rückfalltext für sehr alte Browser ganz am Ende. Der einzige echte Unterschied zu <video>: Es gibt kein Bild zum Anzeigen, deshalb machen width/height hier keinen Sinn.

Gemeinsame Attribute mit <video>

<audio> versteht dieselben booleschen Attribute wie <video>: autoplay, loop und muted funktionieren genau gleich. Auch hier gilt: autoplay ohne ausdrückliche Zustimmung des Besuchers ist meistens keine gute Idee und wird von vielen Browsern blockiert.

Einen Tonclip einbauen

Falls du eine Audiodatei hast, füge sie so ein:

index.html

<h2 id="torjubel">Unser Torjubel</h2>
<p>So klingt es, wenn wir ein Tor schießen:</p>
<audio controls>
  <source src="toene/torjubel.mp3" type="audio/mpeg">
  Dein Browser unterstützt leider kein Audio.
</audio>

Tipp: Block geschafft! Du kennst jetzt <img>, <figure>/<figcaption>, <video> und <audio> - damit kannst du bereits eine ganz lebendige Webseite mit Bildern und Multimedia-Inhalten bauen, komplett ohne CSS oder JavaScript. Im nächsten Block geht es um Tabellen.