Tutorial: Musikplayer

 

 

Vorschau

Standard-Layout:

Würfel-Layout:

 

 

Schwierigkeitsgrad

Einfach - noch leichter als der minimal-Musikplayer

 

 

Rechtlicher Hinweis

In diesem Musikplayer dürfen nur Musikstücke, an denen ihr die Rechte besitzt, verwendet werden. Bei Audiodateien anderer Personen müsst ihr diese stets um eine Erlaubnis bitten.

 

 

Tutorial

 

 

1. Bei Soundcloud anmelden

Bild zum Vergrößern anklickenBild zum Vergrößern anklicken

Meldet euch kostenlos für einen Free-Account bei soundcloud.com an. Die Basis-Mitgliedschaft ist kostenlos, werbefrei und ermöglicht das Hochladen von 120 Minuten an Audiomaterial.

 

Nach der Anmeldung müsst ihr noch einen Benutzernamen wählen und könnt weitere Daten angeben, nicht alle davon müsst ihr ausfüllen.

 

Ihr erhaltet per Mail eine Bestätigungsmail. In dieser müsst ihr auf den Bestätigungslink klicken, um die Anmeldung abzuschließen.

 

 

2. Audiodateien hochladen

Bild zum Vergrößern anklickenBild zum Vergrößern anklicken

Nach der Bestätigung landet ihr direkt auf der Soundcloud Startseite, auf der ihr Songs hochladen könnt.

 

Wählt die Datei aus und ladet den Song hoch. Während der Verarbeitung könnt ihr noch Songtitel sowie weitere Daten und Privacy-Einstellungen angeben.

 

Bei den Privacy-Einstellungen sind die Standard-Settings recht gut, weshalb ihr die einfach belassen könnt.

 

 

3. Player einbinden

Bild zum vergrößern anklickenBild zum vergrößern anklicken

Nach dem erfolgreichen Hochladen klickt ihr am Musikplayer auf den Share-Button (1) und danach auf "customize player" (2).

 

Eine Übersicht aller hochgeladenen Auditracks und die Möglichkeit diese einzubinden findet ihr, indem ihr in der Soundcloud-Navigation am oberen Seitenrand auf "You" klickt.

 

 

4. Embed Code anpassen und einfügen

Bild zum Vergrößern anklickenBild zum Vergrößern anklicken

Im sich öffnenden Fenster, wechselt zunächst zum Tab "Flash". Alternativ kann auch der HTML5 Player verwendet werden - hier ist jedoch kein Würfel-Layout möglich.

 

Wählt bei (1) eine Player-Farbe und deaktiviert optional bei (2) das Anzeigen der Soundcloud-Kommentare. Ich empfehle die Autoplay-Funktion ausgeschaltet zu lassen.

 

Nun kopiert ihr den Embed-Code (Pfeil) und fügt ihn auf eurer Jimdo-Page in ein neues WIDGET/HTML-Objekt ein. Fertig.

 

 

5. Textlink entfernen (optional)

Gefällt euch der Textlink unter dem Player nicht, so könnt ihr ihn entfernen, indem ihr im eingefügten Embed-Code diesen Codeteil am Ende löscht:

<span><a href="http://soundcloud.com/euer-benutzername/songname">Songname</a> by <a href="http://soundcloud.com/motiondesign">euer Benutzername</a></span>

 

 

6. Würfel-Layout aktivieren (optional)

Gefällt euch das "Würfel Layout" (siehe oben), könnt ihr das ganz einfach aktivieren.

Im Quellcode gibt es zwei mal folgenden Parameter:

 

width="100%"

 

Diese ändert ihr beide um in:

 

width="81"

 

 

7. Die Tutorialsammlung unterstützen

 

Unterstützt die Tutorialsammlung, damit es auch weiterhin Jimdo Tutorials gibt!

Z.B. indem ihr auf "gefällt mir" drückt oder meine Hauptseite besucht.

 

      

 

 

Kommentar schreiben

Kommentare: 31
  • #1

    Anasztazia Rita Baumann (Donnerstag, 09 Juni 2011 00:28)

    Vielen Dank für die Anleitung. Sogar ich habe es kapiert. Das Problem ist jetzt nur noch, dass die Musik aufhört, sobald ich einen anderen Fenster aufmache. Gibt's dafür auch eine Lösung? Vielleicht auch so, dass ich das auch noch verstehe. Vielen Dank

  • #2

    Jimdo Tutorialz (Donnerstag, 09 Juni 2011 00:59)

    Das ist technisch leider nicht möglich, wurde auch beim Tutorial zum anderen Musikplayer in der Sammlung hier genauer beschrieben. Falls dich der Grund interessiert, kannst du dort einmal in die Kommentare schauen...
    Gruß, Fabian

  • #3

    Brigitta Gabriel (Dienstag, 28 Juni 2011 18:14)

    kann ich z.B. meine Fotogalerie mit Musik unterlegen?
    LG

  • #4

    Jimdo Tutorialz (Dienstag, 28 Juni 2011 18:23)

    Du kannst auf der entsprechenden Seite diesen Player einfügen und autoplay aktivieren. Dann hast du Hintergrundmusik für die gesamte Seite, nur für die Fotogalerie allein geht leider nicht...

    Gruß, JimdoFriend Fabian

  • #5

    the-best-of-the-best (Sonntag, 17 Juli 2011 21:12)

    Echt cool!
    Danke...

  • #6

    singkreis-schliersee (Mittwoch, 10 August 2011 11:49)

    Sehr gute Tipps.Danke

  • #7

    Maik (Sonntag, 09 Oktober 2011 16:12)

    Danke für den Tipp mit Soundcloud, so spare ich mir doch glatt einen PRO Account. :D

  • #8

    strohhut-watch (Sonntag, 20 November 2011 09:11)

    echt cooler player
    fielen dank

  • #9

    t-a-t-z-e (Montag, 21 November 2011 10:33)

    Ich habe ein Problem mit der Würfelform. Habe alles wie oben beschrieben geändert. Nur ändert sich das Layout nicht. Hat da einer eine Idee?
    Ansonsten Top.

    Danke.
    Heb

  • #10

    Jimdo Tutorials (Montag, 21 November 2011 10:40)

    Ist dir aufgefallen, dass oben im Text steht, der Wärt ist ZWEI mal vorhanden? Ich schätze du hast einen der beiden vergessen...

    Gruß, JimdoFriend Fabian

  • #11

    Paul Freh (Montag, 05 Dezember 2011 13:36)

    Vielen DAnk für das feine Tutorial. Habe gerade alles gefunden um glücklich zu sein.
    Paul

  • #12

    Tarragona (Mittwoch, 07 März 2012 19:35)

    hallo fabian
    danke für deine tollen tutorials. so wie du schreibts, ist bei soundcloud nur 120 min möglich. ich müsste wöchentlich ca. 3-5h haben wegen den teachings. kennst du da evtl. etwas? es darf auch was anspruchsvolles sein.. nochmals danke und weiter so.. :-)

  • #13

    Jimdo Tutorials (Mittwoch, 07 März 2012 23:36)

    Deine Seite entnehme ich, dass du nicht aus Deutschland, sondern aus Österreich kommst. Schaue dir deshalb einmal dieses (alte) Tutorial an: www.jimdo-tutorials.de/tutorials/multimedia/musikplayer-grooveshark/
    Ich habe es offline genommen, da der Anbieter in Deutschland nicht mehr verfügbar ist. In Österreich geht das natürlich noch problemlos.

    Gruß, JimdoFriend Fabian

  • #14

    wie-arbeitet-mp3-verfahren (Freitag, 23 März 2012)

    Der Weg über soundcloud: ein großes Windei: viel Zeit aufgewendet, für nicht mehr als das, was bei Minimalversion (eine Textzeile) aus Jimdo-Hilfe zusammen mit Dropbox rauskommt.
    Letztlich ist man so immer abhängig, was im Browser installiert ist, ist nix da, spielt nix.
    -> wellendarstellung geht nur bei pay-Version

  • #15

    Jimdo Tutorials (Freitag, 23 März 2012 18:27)

    Von Jimdo gibt es keine Anleitung für einen Dropbox-Musikplayer, sondern nur für 3 Alternativen: http://de.jimdo.com/wiki/Musikplayer

    ps.: Die Musikplayer deiner Seite funktionieren weder im Internet Explorer, noch im neusten Firefox richtig - es werden keine Play-Buttons angezeigt.

    Du verwendest zum einbinden Quicktime, was ein Apple-Spezifisches Format ist und nur auf 70% aller Rechner vorhanden ist. Für den Webeinsatz ist das eher ungeeignet.

    Gruß, JimdoFriend Fabian

  • #16

    wie-arbeitet-mp3-verfahren (Freitag, 23 März 2012 22:46)

    Wenn ichs richtig verstehe, wird der jeweils im browser als add-on integrierte player aufgerufen: bei Rechner 1 IE8 ist es Winmediaplayer, im Rechner2 IE8 quicktime. bei beiden gibts play-buttons und vor allem lineare Ablaufanzeige.
    der tip stammt von jimdo-hilfe seite: Re: eigene Musik als mp3 Datei einfügen in Jimdofree
    von clemo.jimdo.com » 17. Februar 2012 22:40,
    mit dem Hinweis, dass für feste src-adressen DROPBox zweckmäßig ist.
    mfg Jonathan

  • #17

    Jimdo Tutorials (Freitag, 23 März 2012 23:05)

    Quicktime trägt sich bei der Installation immer als Standard Webplayer ein und wir daher bei den meisten erscheinen. Er hat bei dir einen Anzeigefehler (zumindest bei allen meinen Browsern) durch welchen alle Buttons unsichtbar sind.

    Clemo ist nicht "von Jimdo", sondern JimdoFriend wie ich. Ich würde dir auf jeden Fall einen FLASH basierten Musikplayer (wie diesen hier) empfehlen, da die unabhängig überall laufen.

    Gruß, JimdoFriend Fabian

  • #18

    stefan (Samstag, 07 April 2012 12:24)

    Guten Tag
    Hallo Fabian, vorab danke für die Anleitung. Meine Frage: Kann man den player auf der Webseite auch unsichtbar machen?. Danke im Voraus für deine Antwort.
    lieber Gruss
    Stefan

  • #19

    Jimdo Tutorials (Sonntag, 08 April 2012 22:15)

    Indem du vor dem Code noch das einfügst:
    <div style="visibility:hidden;">

    und am Ende des Codes das:
    </div>

    Ich würde dir aber dringend davon abraten! Schließlich kann man die Musik dann nicht mehr ausschalten - Ich persönlich würde deine Seite verärgert direkt wieder verlassen.

    Gruß, JimdoFriend Fabian

  • #20

    Michael Skelton (Mittwoch, 23 Mai 2012 15:53)

    Super, vielen Dank, war extrem verwirrt, jetzt läuft alles und sieht auch noch gut aus. Klar und eindeutig beschrieben.
    Gruß,
    Michael

  • #21

    kathyk (Samstag, 21 Juli 2012 14:40)

    vielen vielen Dank. Ich habe lange und viel gelesen - aber erst nach dieser Anleitung läuft alles perfekt.

  • #22

    gerry-king (Freitag, 27 Juli 2012 11:12)

    wie kann man den den player ohne bild einfügen, das mit dem würfel funzt leider nicht!
    lg
    gerry

  • #23

    Jimdo Tutorials (Dienstag, 31 Juli 2012 09:36)

    Das Würfellayout funktioniert einwandfrei, wenn man bei Schritt 4 den Tab "FLASH" wählt, anstatt "HTML5".

    Gruß, JimdoFriend Fabian

  • #24

    wiebke-weit-weg (Donnerstag, 06 September 2012 13:39)

    Hallo, ich habe eine Frage zu dem anderen Musikplayer auf dieser Seite: http://de.jimdo.com/app/forum/supporter-tutorials-f39/-neuer-musik-player-anleitung-t2410.html

    Ich habe Jimdo-Pro und konnte somit Player und Mp3 auf eine versteckte Seite laden. Ich habe den Code exakt übernommen und die Links der Download-Buttons von Player und Mp3 auf der versteckten Seite in den Code eingefügt.
    Nach dem Speichern sehe ich allerdings garnichts und kann auch nichts anklicken, scheint als sei der Player garnicht wirklich eingefügt worden. Woran kann das liegen?

    <embed wmode="transparent" src=
    "http://www.soulcloud.de/app/download/6545677686/mp3grey.swf?t=1346929991?mp3url=http://www.soulcloud.de/app/download/6545689086/To+love+somebody_120320a.mp3?t=1346930084&amp;txt=MUSIKTITEL&amp;bgcolor=#FFFFFF&amp;txtcolor=#000000&amp;barbgcolor=#DDDDDD&amp;loadbar=#AAAAAA&amp;posbar=000000&amp;loop=false&quot;&quot;"
    quality="high" bgcolor="#FFFFFF" name="mp3" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" align="center" height="50"
    width="275" />

    so habe ich den Quelltext für das Element abgespeichert

    Schöne Grüße!
    Wiebke

  • #25

    Jimdo Tutorials (Montag, 10 September 2012 13:59)

    @wiebke-weit-weg
    Sorry, dieser Musikplayer ist bereits total veraltet. Hierfür gibt es keinen Support mehr. Bitte benutze doch das neue Tutorial.

    Gruß, JimdoFriend Fabian

  • #26

    Iris Krull-Schwartz (Sonntag, 30 September 2012 20:24)

    Hallo Fabian , ich finde Deine Tipp`s einfach genial. Vielen Dank. Iris

  • #27

    ☼ DANSE ☼ (Freitag, 12 Oktober 2012 16:47)

    Bei mir geht es nicht. Ich klicke auf das "Share", aber es kommt kein neues Fenster

  • #28

    ☼ DANSE ☼ (Freitag, 12 Oktober 2012 16:54)

    Sorry, jetzt geht es. Bei Internet Explorer ging es nicht, aber bei Firefox ging es.

    Und Danke für den Tipp

  • #29

    ☼ DANSE ☼ (Samstag, 13 Oktober 2012 10:49)

    Ich hätte noch eine kleine Frage: Kann man den Player so einstellen, dass die Songs zufällig wiedergegeben werden? Im Moment werden die nach der Reihe wiedergegeben.

  • #30

    jacqueline-le-saunier (Donnerstag, 18 Oktober 2012 20:58)

    Danke!!!! Nach unzaehligen Versuchen von Hilfen auf anderen Seiten, hab ichs hier gleich kapiert und geschafft!!!!

  • #31

    Jimdo Tutorials (Dienstag, 23 Oktober 2012)

    @DANSE Ich habe bis jetzt nur Einzelsongs damit eingebunden, eine Playlist habe ich selbst noch nie getestet. Hier kann ich dir leider nicht direkt weiter helfen.