HTML/Tutorials/Multimedia/audio

Mit dem Element audio können Sie Audio-Dateien wie Musik, Reden oder Töne ohne Plugins oder Add-Ons wiedergeben. Sie können Medien entweder über das src-Attribut oder über ein oder mehrere source-Elemente einbinden.

audio-Element

Beispiel So sieht's aus

<audio id="audio_with_controls" 
  controls
  src="/local/Europahymne.mp3" 
  type="audio/mp3" 
>
       Ihr Browser kann dieses Tondokument nicht wiedergeben.<br>
       Es enthält eine Aufführung der Europahymne. 
       Sie können es unter
       <a href="/local/Europahymne.mp3">diesem Link</a>
       abrufen.
</audio>

Durch das boolesche Attribut controls werden die Bedienelemente eingeblendet. Die audio-Datei wird mit dem src-Attribut referenziert. Für den Fall, dass ein älterer Browser das audio-Element noch nicht kennt, gibt es als Fallback einen kurzen Hinweis.

Folgende Attribute sind möglich:

• autoplay: boolesches Attribut, beginnt sofort mit dem Abspielen, wenn die Seite geladen ist
  
  Beachten Sie: Nichts ist nerviger als ungewollt beginnende Musik oder Fanfarenstöße. Überlassen Sie dem Benutzer die Entscheidung, ob er das Audio abspielen möchte.
  In Firefox, Safari und Chrome wird das Attribut vom Browser auf Wunsch ignoriert
  (Dies lässt sich vom Nutzer in den Browser-Einstellungen festlegen.)
  .
• buffered: liest aus, wieviel schon zwischengespeichert worden ist, benutzt TimeRanges
• controls: boolesches Attribut (Standardwert false), aktiviert eine Leiste mit Steuerungsfunktionen für den Benutzer
• loop: boolesches Attribut (Standardwert false), Tondokument nach Ende erneut von vorne abspielen
• muted: boolesches Attribut (Standardwert false), Audio ist zu Beginn stumm geschaltet
• played: TimeRanges-Object, wie viel schon gespielt wurde
• preload: bestimmt, wie die Datei beim Laden der Seite in den Browser geladen werden soll, mögliche Werte:
  • auto: gesamte Datei wird geladen (Standardwert)
  • none: Datei wird nicht vorgeladen, da nicht erwartet wird, dass sie benutzt wird
  • metadata: nur die Metadaten werden geladen
• src: URL der Quelle

Abspielen mit autoplay

Mit dem booleschen autoplay-Attribut können Sie das selbständige Abspielen einer Audiodatei aktivieren.

Empfehlung: Vermeiden Sie das ungefragte Abspielen von Hintergrundmusik und Audio-Dateien. Viele Nutzer fühlen sich überrascht und brechen ab. Stellen Sie lieber einen Play-Button zur Verfügung.

Beachten Sie: Auch ein Setzen von autoplay="false" führt zum sofortigen Abspielen.

Steuerung mit controls

Sie können mittels des booleschen controls-Attributs den browsereigenen Player zuschalten.

Auf die Darstellung der einzelnen Browser haben Sie nur wenig Einfluss. So kann das übergroße Bedienfeld im IE mit Hilfe von width und height verkleinert werden.

Sie können aber auch einen eigenen Player mit Javascript einbinden, bei dem Sie das Aussehen und die Eingabemöglichkeiten frei festlegen können.

mehrere Versionen mit source einbinden

Mit dem source-Element können Sie mehrere Dateien referenzieren. Diese werden von Browser nacheinander aufgerufen. Wenn ein Browser das Format nicht erkennt, wird es ignoriert. So kann für Browser, die ein bestimmtes Format nicht verstehen, die Datei in einem weiteren Format zur Verfügung gestellt werden.

Anfänglich gab es Differenzen, ob man im Internet proprietäre oder freie Formate verwenden sollte, da es z. B. bei Grafiken Bestrebungen gab, das weitverbreitete Gif-Format nachträglich mit Lizenzgebühren zu belasten. Wie Sie aus folgender Tabelle entnehmen können, hat sich aber der mp3-Standard weitgehend durchgesetzt.

Browser	mp3	wav	ogg
IE 9+
Firefox
Chrome
Safari	]
Opera	(¹

¹ abhängig vom Betriebssystem. Keine native Unterstützung. Getestet mit:

Browser	OS	mp3	wav	ogg
Opera (28.0, 29.0)	(K)(X)Ubuntu 14.04

Beispiel So sieht's aus

<audio id="audio_with_controls" controls>
    <source src="europahymne.mp3" type="audio/mp3" />
    <source src="europahymne.ogg" type="audio/ogg" />
     Ihr Browser kann dieses Tondokument nicht wiedergeben.<br>
     Es enthält eine Aufführung der Europahymne. 
     Sie können es unter <a href="#">Link-Addresse</a> abrufen.
</audio>

Für den Fall, dass ein Browser das mp3-Format nicht erkennt, wird als Fallback in einem weiteren source-Element eine Datei im freien .ogg-Format referenziert.

Empfehlung: Verwenden Sie zusätzlich das Type-Attribut mit einem passenen MIME-Typen, damit der Browser erkennen kann, um welches Format es sich handelt.

-webkit- Pseudoelemente zum Stylen der Audio-Controls

Chromium-Browser unterstützen mehrere Pseudoelemente, mit denen Sie einzelne Teile der Audiocontrols per CSS umgestalten können. Die Einrückung in der Liste entspricht der Struktur des Shadow DOM, das Chrome zur Darstellung der Steuerelemente erzeugt:

Vorsicht: Diese Liste enthält Interna von Chrome. Sie können sich nicht darauf verlassen, dass diese Liste inhaltlich stabil bleibt.

::-webkit-media-controls
  ::-webkit-media-controls-overlay-enclosure
  ::-webkit-media-controls-enclosure
    ::-webkit-media-controls-panel
      ::-webkit-media-controls-play-button
      ::-webkit-media-controls-current-time-display
      ::-webkit-media-controls-time-remaining-display
      ::-webkit-media-controls-timeline
      ::-webkit-media-controls-volume-control-container
        ::-webkit-media-controls-volume-control-hover-background
        ::-webkit-media-controls-volume-slider
        ::-webkit-media-controls-mute-button

Siehe auch

• mehrere Versionen eines Mediums mit source einbinden
• Bedienelemente mit controls
• ein eigener Player mit JavaScript

• Referenz: audio
• Referenz: source