Sonntag, 26. Januar 2020

Audio-Dateien in einem Blogger-Blog einbinden

Googles Blogger sieht es leider nicht vor, MP3 dateien direkt einzubeinden, mit Videos funktioniert es direkt, Audio braucht etwas Starthilfe, aber es ist durchaus möglich Audio-Player abzubilden.

Der Einfachste Weg ist das direkte einbinden einer  MP3 datei aus dem Internet, dazu braucht es nur den HTML5-Tag Audio und den direkten Pfad zur Datei.
Dies wird im Blogger-Editor in der HTML Ansicht an der Stelle eingefügt , an der der Player erscheinen soll.

<audio controls=""><source src="HTTPS://direkten.link.zur.mp3" <type="audio/mp3"> ></source></audio>

Hier ein kurzer Beitrag, direkt eingebunden, es geht mittlerweile nur noch über das hhtps-Protokoll





Audio aus Gdrive einbinden


Da wir aber mit einem Blog unter Blogger schon einmal im Google-Universum sind, bietet es sich auch an sie Audios im Google-Drive abzulegen, hier ist es leider nicht ohne weiteres möglich direkt auf die Datei zu verlinken und wir müssen die Freigabeoption in GDrive bemühen.


Der Ordner in dem sich die gewünschten MP3-Dateien befinden muss über die Freigabe als "Öffentlich freigegeben"  eingestellt werden.

Nun erhalten wir bei einem Abruf des Freigabelinks einen Link in folgender Form in die Zwischenablage kopiert :


https://drive.google.com/open?id=1y964QXhVV-F3j-4x3k3joSdRisRNhWG2

Der Link besteht aus 2 Teilen dem 1. Teil, der den Pfad beschreibt und der ID, welche den ursprünglichen Dateinamen für die Freigabe eretzt.
Damit haben wir fast alles as wir brauchen um dem HTML5-Audio-Tag die Parameter zu geben die er benötigt.


Hier wird https://drive.google.com/ aus dem Freigabelink durch https://docs.google.com/uc?export= ausgetauscht anschließend folgt die ID.
In diesem Beispiel ist das 1y964QXhVV-F3j-4x3k3joSdRisRNhWG2

Dies wird dann im Blogger-Editor in der HTML Ansicht an der Stelle eingefügt, an der der Player erscheinen soll.

<audio controls="">
<source src="https://docs.google.com/uc?export=open&id=1y964QXhVV-F3j-4x3k3joSdRisRNhWG2" type="audio/mp3">

</source>
</audio>

Es erscheint ein Player direkt im Layout des Blogs, in diesem Fall ein Podcast von Radio Haspe





Keine Kommentare:

Kommentar veröffentlichen