Beispiel für einen Player im Post Editor

Hier ein Beispiel wenn ihr den HTML-5 Player in einen Post einbinden möchtet.

Vielleicht möchtet Ihr ja einen gesprochenen Text zu einem Post anbieten oder einfach eine interessante Audio Aufnahme die zu einem bestimmten Post gehört. Dann bietet es sich an den Player direkt mit im Posting einzufügen.

Das geht so:

1. Ihr schreibt, wie immer, einen Text hier im Post-Editor. 
2. Dann, wenn die Stelle gekommen ist wo ihr euren Player platzieren wollt, schaltet ihr um in den HTML-Modus, hier im Post. 
3. Jetzt fügt ihr den Code mit dem Lied ein
4. Achtung! Ihr könnt erstmal nur im HTML-Modus weiterschreiben denn wenn ihr auf Verfassen umschaltet, könnt ihr den Player nicht erkennen, er wird nicht angezeigt also könnt ihr auch nicht dahinter weiter schreiben. Ich zeige es im Video-Tutorial. 
5. Nachdem ihr hinter dem Player im HTML-Modus weitergeschrieben habt könnt ihr auf Verfassen umschalten und dort wie gewohnt weiterschreiben . 
6. Um einen Absatz zwischen Player und Geschriebenen anzuordnen müßt ihr wieder in den HTML-Modus wechseln und diesen Code kopieren:<br /> und unter dem Player einsetzen. Am besten gleich zweimal untereinander damit der Absatz größer ist. Wie das aussieht könnt ihr auf der Abbildung unten anschauen. Zum Vergrößern einfach auf die Abbildung klicken.

Den Player, im Post Editor, könnt ihr im Verfassen-Modus nicht sehen. Er wird erst sichtbar wenn ihr auf Veröffentlichen oder auf Vorschau klickt.

Wenn der Player eingefügt ist, wäre es besser nicht mehr im Text zu arbeiten, ihr solltet mit der Formatierung fertig sein. Denn, jedesmal wenn ihr eine Änderung vornehmt, flippt der Player wieder raus bzw. funktioniert nicht nachdem ihr den Post veröffentlicht habt.

Also erst alle Änderungen vornehmen und dann den Player einbauen oder eben nochmal kontrollieren bzw. direkt den Player-Link nochmal ersetzen. 

Unter dieser Zeile füge ich den Player ein...also schalte ich um in den HTML-Modus!!



Hier weiterschreiben ...............


Abbildung:
Beispiel für den Html-Modus im Posting klicken zum Vergrößern:

Mp3 - Audio-Dateien auf dem Blog abspielen. So wird´s gemacht.

 Mp3 - Dateien auf dem Blog abspielen.

So wird´s gemacht, Video-Tutorial auf YouTube : zum Tutorial

Um Mp3-Audio-Dateien im Internet abspielen zu können brauchen wir :

1. Eigene oder freie Musikstücke die lizenzfrei abgespielt werden dürfen (versteht sich von selbst).
2. Einen Platz, im Internet, wo wir unsere Musik-Dateien ablegen können (Webspace).
3. Einen Player der die Mp3-Dateien abspielt.
4. Und natürlich einen Blog oder eine Webseite wo der Player eingebunden werden soll.

Als Webspace kann man Dropbox oder Goolge Drive nutzen. Das sind kostenlose Online-Services welche kostenlosen Speicherplatz anbieten.

Wer einen der beiden Dienste wie Dropbox oder Google Drive zur Ablage der Mp3-Dateien nutzt, muss die Mp3-Dateien in einem öffentlichen Ordner ablegen und freigeben, sonst können diese nicht abgespielt werden! Außerdem muß man noch eine kleine Änderung vornehmen wenn man die Mp3-Dateien hören möchte.


Oder man nutzt den eigenen Webspace, wenn man hat, ist klar.

Der Code für den Player:

<audio src="url.mp3" controls ></audio>

Sehr einfacher Code, so soll es sein. Dies ist ein HTML5-Player und kein Flash-Player. Mit Flash-Playern treten angeblich vermehrt Probleme auf welche die Sicherheit des Systems betreffen.

Hier, noch einmal, der o.a. Code der diesmal bereits "einen Song(.mp3)" enthält:

<audio src="https://dl.dropboxusercontent.com/s/oyeurtau2l71m20/beethoven_for_elise_terrasound.mp3?dl=0" controls ></audio>

Dieser Code ist bereits verändert. Wer Dropbox nutzt dem fällt auf, das der Link 

anders aussieht als der Link den Dropbox freigibt. 

Beispiel Freigegebener Link von Dropbox:
https://www.dropbox.com/s/oyeurtau2l71m20/beethoven_for_elise_terrasound.mp3?dl=0

Beispiel veränderter Link:
https://dl.dropboxusercontent.com/s/oyeurtau2l71m20/beethoven_for_elise_terrasound.mp3?dl=0
 

Dieser erste Link oben, ist ein Link zum Downloaden nicht zum Abspielen. Man gibt eine Datei nur an jemanden weiter damit dieser sich die Datei herunterladen kann und sie auf seinem Computer öffnet. 

Die Datei kann aber,  so wie sie ist, NICHT in einem Html5-Player auf meinem Blog abgespielt werden. Dazu müssten wir eine Programmierung vornehmen um den Link von einem Share-Link in einen Mp3-Link umzuwandeln. 

Der ROT markierte Teil des Links muß also von uns bearbeitet werden damit die Datei abspielbar und nicht mehr Downloadbar ist. 

Hierfür kann man den Editor oder Wordpad (unter Windows) benutzen. Oder ihr arbeitet im Gadget selber.
Den Link in den Editor/Wordpad oder das Gadget einfügen und von dort aus, wie oben angegeben, bearbeiten. 


Ihr ersetzt also einfach www.dropbox.com mit dl.dropboxusercontent.com das ist alles. 
Die Mp3 - Datei kann jetzt abgespielt werden. 

Leider habe ich keine Informationen darüber gefunden wie man Mp3-Dateien mit Google Drive abspielt. Sollte jemand von Euch wissen wie es funktioniert wäre ich dankbar wenn ihr es mich wissen lasst.  

Google Drive würde sich für Blogspot Nutzer anbieten weil es im "Google-Paket" (bei Anmeldung für einen Google Account) bereits dabei ist. Ihr würdet euch eine Anmeldung bei Dropbox sparen. 

Hier gehts zum Video-Tutorial:  
 https://www.youtube.com/watch?v=e_supee3ELI

Mp3 - Player auf dem Blog einbinden. So wird´s gemacht.

 Mp3 - Player auf dem Blog einbinden.

So wird´s gemacht.

Ihr sucht Euch einen Mp3 Player für Blog´s aus dem Internet indem ihr in die Suchmaschine eingebt:

Mp3 Player für Webseite.

Jetzt habt ihr freie Auswahl, könnt Euch durchklicken und zwischen einem HTML-5 Player oder einem Flash-Player entscheiden.

Ich habe hier für dieses Beispiel einen Html-5 Player genommen.

Bei einem Flashplayer ist zu beachten das man die Mp3 - Dateien nur anhören kann, wenn der Nutzer auch ein Flash-Add-On installiert hat denn nicht jeder Browser kann Flash abspielen. Firefox spielt kein Flash ohne Flash-Add-On ab und zeigt den Player auch nicht richtig an. 

Außerdem treten, mit Flash-Playern, vermehrt Probleme auf welche die Sicherheit des Systems betreffen. Das äußert sich zum Beispiel so, daß der Online-Browser hängen bleibt. 

Es wird eine Meldung gezeigt dass ein Skript auf der Seite nicht richtig ausgeführt wird.

HTML-5 kann angeblich auf vielen Browsern abgespielt werden. 

Und wird immer mehr zum Standard.

Code für einen HTML-5 Player:

<audio src="url.mp3" controls ></audio>

Sehr einfacher HTML5-Code, so soll es sein.


Hier, noch einmal, der o.a. Code der diesmal bereits "einen Song(.mp3)" enthält:

<audio src="https://dl.dropboxusercontent.com/s/oyeurtau2l71m20/beethoven_for_elise_terrasound.mp3?dl=0" controls ></audio>

Diesen Code fügst du im Layout als Gadget hinzu. 

Layout - Gadget hinzufügen - HTML und Javascript auswählen - Code einfügen - abspeichern

Man kann diesen Code auch in einen Post einfügen. 

Das geschieht indem ich, während des Schreibens hier im Posting, in den HTML-Modus (oben links neben Verfassen steht HTML hier einmal draufklicken) wechsel und dann den Player-Code einfüge, fertig. 

So, daß der Player in meinem geschriebenen Post zu finden ist.

Und zwar so:

Zu beachten ist, wenn ihr unter dem Player weiterschreiben wollt, ihr zunächst im HTML-Modus, hinter dem abgeschlossenen Code weiterschreibt. Sonst ist es im Posting unter Verfassen nicht möglich hinter dem Player weiterzuschreiben da man den Player nicht sehen kann während ich im Verfassen-Modus bin. 

Solltet Ihr versuchen trotzdem, hinter dem Player, (soweit man das abschätzen kann wo er ist) auf Enter zu drücken wird der Player wieder gelöscht und ihr wundert euch was passiert weil man den Player nach dem Veröffentlichen nicht sehen kann.

Schwer zu beschreiben ich werde zu diesem Thema ein Video-Tutorial verfassen und versuchen diesen Punkt besser zu erläutern.

Es gibt noch sehr viel mehr Player im Internet zu finden. Dazu einfach mal ein wenig Googlen...nach

"kostenloser MP3 Player für Webseite". 

Da werdet Ihr schon fündig.

Achja, und für wen das alles nichts ist, mit den zwei Playern auf dem Blog, der möge einfach aus seiner Mp3-Datei ein kleines Filmchen machen.

Dafür könnte man den Windows Movi Maker benutzen. Den hat jeder Windows Nutzer auf seinem Pc.

Diesen öffnen und dort dann ein oder mehrere Bilder in die Timeline ziehen (unten der Balken im Movi Maker) auch die Mp3 - Datei dort hineinziehen.

Den Film abspeichern und dann im Posteditor von Blogger als Video hochladen. Geht ganz leicht.

Zum Hochladen auf Blogger gibt es im Posteditor eine kleine schwarze "Filmklappe" oben im Posteditor. Das wäre dann die sichere Alternative um Eure Mp3´s vorstellen zu können. :-) Trick 17 oder?

Jetzt erstmal frohes Schaffen, sehen uns gleich im Tutorial.