Montag, 19. September 2011

Wenn die Musi spielt: MP3’s in Blogger einbinden

Tja, manchmal steht man vor Problemen, die man anderswo wohl nicht hätte.

So bieten andere Blog-Plattformen für bestimmte Aufgaben bereits von Haus aus Möglichkeiten an, die hier bei den Google-Blogs nicht vorhanden sind. Ich habe mich aber für diese Seite entschieden, da ich sowieso die ganzen Google-Dienste nutze, und somit ja alles irgendwie miteinander verzahnt ist.

Im Grunde wird für den normalen Hausgebrauch alles bereitgestellt, nur neulich habe ich nach der Lösung gesucht, Audiodateien direkt im Blog abzuspielen. Es sollte halt ohne eigenen Webserver funktionieren und möglichst ohne Flash. Na ja, von dem Gedanken ohne Flash habe ich mich dann vorerst verabschiedet. Ist auch egal, Flash hat im Grunde sowieso jeder installiert.

Möglichkeiten gibt’s einige, wenn auch alle recht ähnlich. Beispielsweise lade ich die MP3 bei einen Online-Storage-Dienst, wie box.net hoch. Dort kann ich mir dann den Einbettungscode als HTML für den Quelltext meiner Seite anzeigen lassen. Dann Copy & Paste, fertig.

Unter Sharing gibt es den Embed-Code


Als Ergebnis hat man dann einen Player, wie bei Youtube oder ähnlichen Portalen auf seiner Seite. Das war für mich aber zu globig und ich suchte mir daher etwas dezenteres.

Fündig geworden bin ich dann beim Yahoo! Webplayer. Das ist ein kleines Script, welches ich im HTML-Quelltext oberhalb des schließenden </body>-Tags einfüge. Das sieht dann so aus:


<html>
 <head>
  <title>My Website</title>
 </head>
 <body>
 .
 .
 .
 <script type="text/javascript" src="http://webplayer.yahooapis.com/player-beta.js"></script>
 </body>
</html>

In Blogger auf HTML umschalten und den Code einfügen

Damit man diesen Schritt nicht bei jedem Post, in dem man Audio anbietet, wiederholen muss, kann man das einmal global erledigen. Das ist schnell erledigt und der Weg dazu ist folgender:

Ich klicke auf meiner Blogger-Seite oben rechts auf die Design-Schaltfläche, worauf hin sich die Seite mit den Designvorlagen öffnet. Dort klicke ich auf den HTML bearbeiten - Button. Den Warnhinweis ignorieren wir und drücken dann auf Fortfahren.



Jetzt sehen wir den globalen Quelltext unserer Designvorlage, der bei einem neuen Post zunächst einmal zu Grunde liegt. Was wir hier ändern, betrifft also alle folgenden Posts. Deshalb aufpassen, was man hier anstellt!

Den Code

<script type="text/javascript" src="http://webplayer.yahooapis.com/player-beta.js"></script>
genau an der selben Stelle oberhalb von </body> einfügen, exakt so , wie auf folgendem Bild.



Jetzt muss man nur noch die Vorlage speichern und hat somit den schwersten Teil erledigt. Ein entscheidender Punkt fehlt aber noch. Die Musik.

Der Yahoo! Webplayer sucht auf eurer Seite automatisch nach Links zu Audiodateien, die er im Player abspielbar macht (Videos gehen übrigens auch). Dazu muss man einfach den Link zur Musikdatei auf seiner Seite platzieren. Denkt daran, nur legale Quellen zu verwenden. Die Links müssen direkt zur Datei mitsamt ihrer Erweiterung (z.B. .mp3) führen, damit das ganze funktioniert.

Im folgenden zeige ich das mal mit einem meiner Lieblingslieder, welches das Label auf dieser Seite legal zum freien Download anbietet. Sollte es ein spezielles Lied geben, welches ihr abspielen wollt, könnt ihr die MP3 auch in den Puplic-Ordner eurer Dropbox werfen und dort den öffentlichen Link kopieren. Funktioniert auch.

Beispiel:

Songs: Ohia - Farewell Transmission



So fügt man den Link im Blogger-Editor hinzu.

Wenn jemand die Arbeit mit HTML-Code bevorzugt sähe das dann so aus:

<a href="http://www.scjag.com/mp3/sc/farewell.mp3" title="Farewell Transmission"><img alt="" src="http://ecx.images-amazon.com/images/I/51-lfo-wCVL._SL500_AA300_.jpg" style="display: none;" />Songs: Ohia - Farewell Transmission</a><br />
Wie man sieht kann man noch Quellen für das Albumcover mit hinein packen. Weitere Optionen gibt es auf der Howto-Webseite des Players.

Ich bin jetzt erst mal mit dieser Lösung zufrieden. Alternativ kann ich noch den Player des Google Readers empfehlen, der ist ähnlich einfach zu handhaben.

Keine Kommentare:

Kommentar veröffentlichen