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

Audio

Bisher hatte ich einen Disc-Man dabei. So einen tragbaren CD-Player, den niemand mehr benutzt. Für mich die perfekte Lösung, weil ich CDs kaufe.

Bei der Beschäftigung mit Fabians Seite mokita.de bin ich über seine Aufnahme von Cory Doctorows Buch »Little Brother« gestolpert (gibts als PDF in einer Übersetzung von Christian).

Audio im Netz? Podcasts? Bandbreitenverschwendung!

Obwohl ... interessiert hatte es mich schon. Wie das wohl klingt? Und wie es gesprochen ist? »Little Brother« habe nicht gelesen. Hm. Wenn man den ganzen Tag auf Bildschirme starrt, ist Hören sicher besser als Lesen in der Freizeit, oder?

Mit diesen Ausreden bewaffnet in den Märchenmarkt gezogen und einen mp3-player gekauft. Mit Bedienelementen, die ohne Lesebrille nutzbar sind. Und ohne Obst-Logo.

Weil ich schon mal dabei war, habe ich ein paar Artikel zum Thema Podcasting gelesen. Mich über Equipment informiert. Audacity hatte ich sowieso auf dem Rechner, Headset vorhanden (braucht man bei den Piraten für Mumble), Fabians Buch lag noch in Griffweite - et voilà: die ersten 2 Seiten des »Erdbebens«. Völlig unprofessionell in einem Zug gelesen, ohne Nachbearbeitung, ohne Schnitte, zweiter Take.

Gar nicht so einfach: wie bringe ich das ins Blog? Das Serendipity-Plugin ist ... selbsterklärend. Ich habs nicht verstanden. Also bei anderen Webseiten geguckt und herumprobiert. Schließlich das Büchlein HTML 5 For Web Designers von Jeremy Keith herausgesucht. Damit scheint es geklappt zu haben. Handgeschriebener HTML-Code. Umständlich, aber ich hoffe, dass es funktioniert.

PS: mittlerweile habe ich die ursprüngliche Aufnahme durch eine (wie ich hoffe) bessere ersetzt. Mit einem vernünftigen Mikrofon gemacht. Die Aussprache ... nun ja, ich arbeite dran.

»Das Leben ist ein Erdbeben und ich stehe neben dem Türrahmen«
von Fabian Neidhardt, CC BY-NC-SA, »Vorspiel« (Leseprobe)

Mal sehen, ob bzw. wie das weitergeht. Als Musiker hat man ja sowieso Mikrophonstativ und Kabel. Mein Sure SM57 und das AKG-Clipmikro sind gut fürs Saxophon, für Sprache aber gar nicht geeignet. Vielleicht kann ich mir ein AKG C1000 S leihen. Schaun’wer mal.

PS: sehe gerade, dass es zumindest in meinem Feedreader keinen Hinweis auf die Audio-Datei gibt. Dann eben altmodisch per URL: mp3-Datei herunterladen

Terminpläne übersichtlich anzeigen mit CSS

Das Smashing Magazine veröffenlicht ausgezeichnete Artikel rund ums Webdesign. Gestern erschien dort der Beitrag Technical Web Typography: Guidelines and Techniques von Harry Roberts.

screenshot Neugierig habe ich mich auf dessen Homepage umgesehen. Und den für mich als Webmaster der Blue note BIG BAND hochinteressanten Text Coding up a semantic, lean timeline gefunden.

Sowas muss auf die Bandseite! Harry hat die Verwendung genehmigt, also steht dem nichts mehr im Wege. Here we go.

Nachtrag: nachdem ich mir den Wolf gesucht habe, wo ich Beispiele für »time« in HTML5 finde – das alles und noch viel mehr gibt es beim HTML5 Doctor.

Bastelarbeiten

Mein Blog ist immer auch so ein bischen Spielzeugeisenbahnersatz. Immer wieder mal wird geschraubt, verschoben und geändert. Möglichkeiten bieten sich genug. Beruhigt die Nerven.

Während Mark seinen Kram von Blogger auf eigenen Webspace und natürlich Serendipity umgezogen hat, habe ich heimlich ein bischen HTML 5 eingebaut.

Naja, nicht wirklich viel, aber der neuen Doctype-Deklaration konnte ich einfach nicht widerstehen:
<!DOCTYPE html>
ersetzt dieses Fachchinesisch:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Matthias hat bei den Webkrauts vor längerem einiges zum Thema geschrieben (HTML 5 in der Praxis Teil 1 und Teil 2). Und bei A List Apart kann man das Büchlein »HTML 5 for Webdesigners« vorbestellen. Das erste Kapitel kann man probelesen.