Translate

Dienstag, 26. April 2016

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

4 Kommentare:

  1. Dieser Kommentar wurde vom Autor entfernt.

    AntwortenLöschen
    Antworten
    1. Für Google Drive funktoniert es mit dem Code

      <audio controls>
      <source src="http://docs.google.com/uc?export=open&id=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX" type="audio/mp3">
      </audio>

      Löschen
  2. Könntest Du mir das bitte mal für mich als Laien dies für eine Datei Jazz im Ordner Musik bei GoogleDrive richtig schreiben? Vielen Dank
    Jazzrealities

    AntwortenLöschen
    Antworten
    1. 1. mp3 bei Google Drive hochladen
      2. Rechtsklick auf die hochgeladene Datei und Klick auf "Link zum Freigeben abrufen"
      3. Es erscheint ein Link mit einer Nummer: z.Bsp. https://drive.google.com/open?id=XXXXXXXXXXXXXXXXXXXXXX
      4. Die ID kopieren (im Beispiel hier die vielen X)
      5. Im Blog auf Post bearbeiten gehen.
      6. Html-Ansicht einstellen
      7. Oben angeführten Code im Kommentar vom 18.6. einfügen und die X mit der kopierten Nummer ersetzen.

      Dann müsste es funktionieren ...

      Löschen