⬆
Youtube Video

Audio

Einfaches Beispiel

Siehe dazu auch Audio CSS und Audio mit Javascript 

<audio controls src="media/audio/test.mp3">
</audio>

Alternative Möglichkeit. Hier werden 2 verschiedene Dateiformate angeboten. 

<audio preload controls>
	<source src="media/audio/test.ogg">
	<source src="media/audio/test.mp3">
</audio>

HTML5

Mit dem audio Element kann man mit HTML5 Audioformate dirket im Browser abspielen ohne ein Plugin zu benötigen.
Tipp: Der Online Audio Converter ist ein tolles Tool für die Umwandlung in HTML5 Audio Formate.

Das audio Element benötigt das Attribut controls. Es blendet die Abspielsteuerung ein. Den Verweis auf die Audio Datei kann man auf 2 Arten definieren:

Es lassen sich auch mehrere source Elemente einfügen, in denen unterschiedliche Dateiformate angeboten werden. Setzt man zusätzlich das src Attribut im audio Element wird dort das bevorzugte Dateiformat angegeben.

Die Attribute im Audio Element

controls
Das controls Attribut blendet die Abspielsteuerung ein. Das Attribut ist erforderlich, damit der User die Möglichkeit hat die Audio Datei zu starten. Man kann nur dann auf das controls Attribut verzichten wenn man mittels Javascript einen Play Button zur Verfügung stellt. siehe meinen Javascript Tipp Audioplayer

autoplay
Die Audiodatei hatte den Sinn, dass die Audio Datei sofort abgespielt wurde. Das ist heute nicht mehr möglich. Die Browser spielen eine Audio Datei erst ab, wenn es eine User- Interaktion gegeben hat.

preload
Mit preload="none" wird die Audiodatei nicht vorausgeladen. preload="auto" bedeutet, dass der Browser sofort mit dem Vorausladen der Audiodatei beginnt. Es ist nur dann sinnvoll, wenn man davon ausgehen kann, dass der User die Audiodatei abspielt. Das ist zum Beispiel der Fall, wenn das Audioelement das zentrale Element der Seite ist. Letzendlich bestimmt der Browser, ob die Audiodatei vorausgeladen wird. Die Spezifikation empfiehlt den Standardwert metadata. Mit dem Standardwert preload="metadata" werden nur Daten wie Spieldauer, Auflösung, Qualität etc. geladen, aber nicht die Audiodatei selbst. Gerade wenn man mehrere Audiodateien auf der Seite eingebunden hat, sollte man preload="metadata" oder preload="none" setzen. Bedenke, dass die Nutzer auf Smartphones in der Regel nur ein begrenztes Datenvolumen haben.

loop
Mit loop = Schleife wird der Sound wieder von vorne abgespielt, wenn das Ende des Sounds erreicht ist.

src
Das audio Element kann ein src Attribut mit url auf eine Audiodatei enthalten. Ein source Element ist dann nicht mehr erforderlich.

Mehrere Source Elemente bieten die Möglichkeit verschiedene Dateiformate anzubieten. Gibt man zusätzlich noch ein src Attribut im Audio Element an, verweist dieses auf das bevorzugte Dateiformat.

 

Attribute im source Element

type
Hier können Sie den MIME- Type angeben. Er beginnt in diesem Fall mit audio/ zB.: type="audio/x-aiff". Außerdem kann man mit Semikolon getrennt einen Audio Codec angeben. Den codec sollten Sie aber nur angeben, wenn Sie sich sicher sein können, dass es der richtige Codes ist. Es ist sicherer darauf zu verzichten. Es folgen einige Beispiele für das ogg Format:

type="audio/ogg; codecs=vorbis"
type="audio/ogg; codecs=speex"
type="audio/ogg; codecs=flac"

media
Mit dem media Attribut gibt man an für welche Medientypen die Audiodatei geeignet ist. Die Voreinstellung ist media="all"