HTML/Multimedia und Grafiken/audio

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

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.

  • Android
  • Chrome
  • Firefox
  • IE 9
  • Opera
  • Safari
  • HTML5

Details: caniuse.com

Inhaltsverzeichnis

[Bearbeiten] audio-Element

Beispiel ansehen …
      <audio id="audio_with_controls" 
             controls
             src="http://wiki.selfhtml.org/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="#">Link-Addresse</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
  • 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), Video 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
  • volume: Lautstärke (von 0.0 [stumm] bis 1.0 [volle Lautstärke])

[Bearbeiten] 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.

[Bearbeiten] Steuerung mit controls

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

Screenshots verschiedener browsereigener Audioplayer

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.

[Bearbeiten] 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+ Tick.gif Cross.gif Cross.gif
Firefox Tick.gif Tick.gif Tick.gif
Chrome Tick.gif Tick.gif Tick.gif
Safari Tick.gif Tick.gif Cross.gif
Opera (Tick.gif Tick.gif Tick.gif

¹ Betriebssystem (OS) abhängig. Keine native Unterstützung. Getestet mit:

Browser OS mp3 wav ogg
Opera (28.0, 29.0) (K)(X)Ubuntu 14.04 Cross.gif Tick.gif Tick.gif
Beispiel ansehen …
<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.

[Bearbeiten] siehe auch


Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Schnell‑Index
Mitmachen
Werkzeuge
Spenden
SELFHTML