Veröffentlicht am von Karl

HTML5 – <audio> Element

Weil Flash von Adobe durch die schnelle Entwicklung über viele Jahre immer mehr Fehler und Sicherheitslücken besaß, wurden Multimedia- und Animationsfunktionen in HTML5, CSS und Javascript integriert. Eines der TML Elemente ist <audio>. Es ermöglicht die Integration von Audioplayern in Webseiten. Damit können Audio Streams oder Sound genutzt werden.

Das HTML <audio> Element hat 7 Attribute

  • src = Der Pfad und Dateiname des Sounds angegeben werden
  • autoplay = Wenn der Wert “autoplay” eingetragen ist, dann startet die Sound Datei nach dem laden der Datei
  • controls = Bei eingetragenen Wert “controls” werden die Steuerelemente angezeigt
  • loop = Wenn der Parameter “loop” eingetragen ist, dann wird die Musik endlos wiederholt
  • preload = Wenn “preload” eingetragen wird, dann wird der Sound Datei zusammen mit der Webseite geladen. Dies funktioniert nur, wenn das Attribut autoplay nicht genutzt wird!
  • muted = Schaltet die Wiedergabe auf Lautlos
  • crossorigin = Festlegen, wie das Steuerelement ursprungsfremde Anfragen behandelt

Zudem können die Universalattribute verwendet werden

accesskey
autocapitalize
autofocus
contenteditable
dir
draggable
enterkeyhint
hidden		 inputmode
is
itemid
itemprop
itemref
itemscope
itemtype		 lang
nonce
spellcheck
style
tabindex
title
translate

Quellcode Beispiel:

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>Das HTML Element &lt;audio&gt; einsetzen</title>
  </head>
  <body>
    <h1>Ein Klang auf der Webseite</h1>
    <p>Das Sound ist eingebunden</p>

      <video src="http://www.html-lernen.de/wp-content/uploads/2009/12/Gimp_verbesserung.flv"
      controls="controls">
        Ihr Browser unterstützt den &lt;audio&gt; Element nicht.
      </video>
  </body>
</html>

Der Tag wird nur verarbeitet, wenn der Browser des Nutzers dies unterstützt!