Skip to content

Audio in Webseite einbinden

Kein Hexenwerk.

Man speichert seine Audio-Datei im mp3-Format. Das wird von den meisten Geräten abgespielt. Wenn man zusätzlich eine Version im ogg-Format anfertigt, hat man auch z. B. die Linux-Nutzer ohne mp3-Unterstützung versorgt.

Anschließend die Dateien auf den Server hochladen. Hier im Blog habe ich dafür ein Verzeichnis audio eingerichtet.

Um die Datei direkt online abzuspielen, fügt man den folgenden Code ein:

<audio id="audio_with_controls" controls preload="none">
<source src="/blog/uploads/audio/schiller_der-handschuh_v2.mp3" type="audio/mp3" />
<source src="/blog/uploads/audio/schiller_der-handschuh_v2.ogg" type="audio/ogg" />
Ihr Browser kann dieses Tondokument nicht wiedergeben.
Sie können es unter <a href="/blog/uploads/audio/schiller_der-handschuh_v2.mp3">/blog/uploads/audio/schiller_der-handschuh_v2.mp3</a> abrufen.
</audio>

Damit wird zuerst versucht, die mp3-Datei abzuspielen, falls das nicht klappt, die ogg-Datei. Für Seitenbesucher mit antiken Webbrowsern ist der Teil ab »Ihr Browser kann dieses Tondokument nicht wiedergeben ...« eingefügt. Standardmäßig würde beim Seitenaufruf angefangen, die Audio-Datei herunterzuladen. Um damit erst beim Druck auf den Play-Button zu beginnen, verwende ich immer die Option »preload="none"«

Damit man die Audio-Datei bequem herunterladen kann, füge ich meistens noch den folgenden Code ein:

Herunterladen als <a href="http://u1amo01.de/blog/uploads/audio/schiller_der-handschuh_v2.mp3">mp3-Datei</a> oder im <a href="http://u1amo01.de/blog/uploads/audio/schiller_der-handschuh_v2.ogg">ogg-Format</a>.

Und hier das Ergebnis:


Herunterladen als mp3-Datei oder im ogg-Format.


Weil man sich sowas nicht merken will, habe ich mir einen Musterblogbeitrag angelegt, den ich immer wieder kopiere. Immer wieder lustig, wenn ich vergesse die Dateinamen entsprechend anzupassen :-)

Quelle und alle möglichen Optionen: SelfHTML.org

Trackbacks

Keine Trackbacks

Kommentare

Ansicht der Kommentare: Linear | Verschachtelt

Noch keine Kommentare

Kommentar schreiben

Die angegebene E-Mail-Adresse wird nicht dargestellt, sondern nur für eventuelle Benachrichtigungen verwendet.
Textile-Formatierung erlaubt
Formular-Optionen