Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
Dr. Web Team 26. Mai 2010

Frage an die Community: Player in Website integrieren – aber wie?

Man kennt das Problem mit Music-Playern auf Web-Seiten: Falls die Seite nicht in Flash gelöst ist, fängt der Song wegen HTTP-Request immer wie­der von vor­ne an. Lässt sich das intel­li­gen­ter abschal­ten als mit den mir bereits bekann­ten Methoden über PopUps oder iFrames?

Soweit ich weiß, gibt es zwei Möglichkeiten, die mei­ner Meinung nach aber alle nicht schön sind, ent­we­der das Pop-Up oder iFrame

  • PopUps wer­den heu­te viel geblockt,
  • iFames sind mei­ner Meinung nach ver­al­tet.

Derzeit arbei­te ich mit einem Kunden zusam­men, der eige­ne Loops pro­du­ziert und die­se an Firmen ver­kauft. Der Kunde möch­te natür­lich, was ich ver­ste­hen kann, auf sei­ner Web-Seite einen Song lau­fen las­sen, was sei­ne Arbeit unter­strei­chen soll.

Nun zur mei­ner Frage: Könnt Ihr mir eine Möglichkeit vor­schla­gen, einen Player in eine Seite zu inte­grie­ren? Kann man den HTTP-Request umge­hen (was für eine blö­de Frage..)?

Auf ret­ten­de Antworten und Lösungen in den Kommentaren hofft den­noch ein momen­tan rat­lo­ser Dr.-Web-Leser :-).

(mm),

33 Kommentare

  1. .… habe es nicht getes­tet, ist aber schein­bar eine gute Flash vari­an­te.

    http://s3.envato.com/files/56448/index.html

  2. Danke für den Tipp mit Ajax, wer­de ich gleich mal aus­pro­bie­ren.

  3. Hallo,

    hat­te vor kur­zem das­sel­be Problem, wel­ches ich fol­gen­der­ma­ßen lösen konn­te:
    Die Seite bestand bereits, wes­halb ich hier nicht alles neu machen woll­te. Um jedoch immer die Unterbrechung der Musik bei Seitenwechsel zu ver­mei­den erwei­ter­te ich die Seite dahin­ge­hend, dass die Inhalte in einem ver­steck­tem, mit­tels JS erstell­tem iFrame nach­ge­la­den wer­den. Sobald die Seite im iFrame gela­den ist (dort ohne die Musik), wird der gewünsch­ten Inhalt in den sicht­ba­ren Bereich über­nom­men. Dies hat den Vorteil, dass die Links für Suchmaschinen oder Browser ohne JS wei­ter­hin funk­tio­nie­ren und den­noch wird die Musik nicht unter­bro­chen sobald ich eine neue Seite auf­ru­fe. Auch ein Refresh der Seite ist hier kein Problem, da ich auch hier ein­fach nach aus­la­den den Inhalt des iFrames über­neh­me – lei­der mit einem unschö­nen “zucken” der Seite, da natür­lich zu Beginn kurz die Startseite erscheint.

    hier das Beispiel: http://www.kinderfestival.it/de/

  4. Ich bin auch kein Freund davon, das eine Seite auto­ma­tisch Lärm von sich gibt. Gerade wenn man mit meh­re­ren Tabs arbei­tet muss man mal den Übeltäter fin­den (im schlimms­ten Fall hat man sogar meh­re­re davon – klingt dann super).

    Daher wür­de ich das Problem fol­gen­der­mas­sen lösen:
    Auffälliger Link/Button “Play Background Music” mit Verweis auf eine Playlist (m3u Datei). Diese wird beim Klick dar­auf auto­ma­tisch, im vom User bevor­zug­ten Player (VLC, Media Player, …), abge­spielt (also aus­ser­halb des Browsers).
    Weitere HTTP Requests haben damit kei­nen Einfluss auf die Musik. Der Besucher muss weder Flash noch JavaScript akti­viert haben.
    Ausserdem hat der Besucher, auch nach schlies­sen der Seite, die Möglichkeit der Musik wei­ter zu lau­schen.

  5. iFrames mögen ver­al­tet sein, aber solan­ge Sie ihren zweck sehr gut erfül­len, soll­te es egal sein. Ansonsten sehe ich den “Ajax-Ansatz” als dann die moderns­te Lösung.

  6. Wer so vie­le Tipps gibt, der soll­te auch mal fra­gen stel­len dür­fen. Ich habe da kei­ne zwei­fel das dies OK ist. Doch soll­ten es Fragen wie die­se sein, die auch für den Leser inter­es­sant sind. In die­sem Fall z.B. ein Oft dis­ku­tier­tes und sel­ten gelös­tes Problem.

  7. Wenn ich ein­mal einen kom­plett ande­ren Vorschlag machen darf: Startet ein­fach kei­ne Musik beim Seitenaufruf. Das ist so benut­zer­un­freund­lich. Der User soll selbst ent­schei­den, wann er Musik haben möch­te.

  8. Wenn dann bit­te als Forum. Sonst muss ich den feed hier strei­chen …

  9. @ 123 wenn der Kunde es Verlangt macht man sich schon mal gedan­ken..

    Zu dei­ner Kritik, guter Punkt aber natür­lich soll­te der Player nicht auto­ma­tisch anlau­fen, son­der man soll­te dem User die frei Wahl las­sen, das Umgeht dein Problem..

  10. Bei der iFrame-Lösung, die eigent­lich die ein­fachs­te und “sichers­te” Variante zu sein scheint, müss­te der eigent­li­che Content / Website im iFrame ste­hen, damit die Musik auch beim Wechsel der Inhalte wei­ter klin­gen kann. D.h. nur der “Player” für die Sounds / Musik müss­te in der auf­ru­fen­de Seite (z.b. index.html) ste­hen.

    Das hät­te als Nachteile kein direk­tes Bookmarking von Unterseiten, kein opti­sches Feedback in der Adress-Zeile und evtl. auch SEO-Nachteile…

  11. find sol­che Frage-Antwort Themen gene­rell gut. aber nur in einem extra Berreich. Umsetzen könn­te man es ähn­lich wie bei http://www.gutefrage.net

  12. Mit die­ser Frage habe ich mich lan­ge beschäf­tigt, bis ich her­aus­fand, daß es den WordPress-Audio-Player auch in einer Standalone ver­si­on für HTML – freun­de gibt.

    Finde ich per­sön­lich am bes­ten.

    Link und down­load:

    http://wpaudioplayer.com/standalone

    cheers

    udo

  13. Ajax ist die bes­te Lösung imo.
    Man könn­te auch nen Timer mit­lau­fen las­sen und den Track aber der Stelle wei­ter­lau­fen las­sen, jedoch erhält man dadurch nen klei­nen Cut beim Laden der sehr stö­rend ist.

    Und wie mein Vorredner schon gesagt hat mit Ajax ist es sehr ein­fach und schafft fast kein Mehraufwand.

  14. Seit wann baut man denn einen Ajax Seitenwechsel so das die Seite mit deak­ti­vier­ten JS nicht funk­tio­niert? Das so zubau­en ist ja sogar noch mehr auf­wand als die ordent­li­che Variante (ein­fach den Click per JS abfan­gen und den Request per JS aus­füh­ren + return fal­se; soll­te ohne zusätz­li­che Effekte nicht mehr als ne Stunde dau­ern).

  15. Also wenn sich der Kunde den Luxus gön­nen möch­te, lie­ber alles ande­re in AJAX zu rea­li­sie­ren (und kom­plett JS-abhän­gig zu sein), statt eines bes­ten­falls naht­los inte­grier­ten IFrames, der die Aufgabe in weni­gen Codezeilen löst… ob dann der Player in Flash ist oder auf Systemplayer zurück­ge­grif­fen wird, ist imho sowie­so unab­hän­gig von der Art der Einbindung sei­nes Aufrufs durch­zu­ar­bei­ten.

    @font-face war auch mal ver­al­tet, bzw. eine IE-Spielerei und nun ist es das neus­te von Neuen-Non-Plus-Ultra ;-)

  16. @Georg

    Wo soll denn bei AJAX der Nachteil bezüg­lich Performance und SEO sein?
    Wenn man es rich­tig anstellt, ist bei­des kein Problem.
    Siehe mein Beispiel wei­ter oben. Schalte das JS ab und klick dann mal auf die Navi(“Tabs”)

  17. … oder ein­fach ein Dr. Web Forum ein­rich­ten ;-)

  18. @Manuela:

    Ich fin­de das gut, aller­dings dann bit­te in einer eige­nen Sparte und nicht ver­mischt mit den “nor­ma­len” Beiträgen.

    Man könn­te auch dar­über nach­den­ken, das Design etwas anzu­pas­sen, da im Gegensatz zu den nor­ma­len Artikeln bei den Fragen die Kommentare viel mehr in den Vordergrund rücken.
    z.B. wie bei ande­ren Frage-Antwort Seiten kann die bes­te oder nütz­lichs­te Antwort vom Fragesteller mar­kiert wer­den. Alle User kön­nen bewer­ten wie hilf­reich eine Antwort war. Die nütz­lichs­te Antwort steht dann immer oben… usw.

    Also wenn ihr die­ses Feature nach einer Testphase dau­er­haft imple­men­tiert, dann bit­te rich­tig!

    @Frage:
    bit­te kei­ne auto­ma­ti­schen Sounds beim Aufruf einer Webseite abspie­len…
    Eine schi­cke und moder­ne Art bie­tet z.B. die Mediabox:
    http://iaian7.com/webcode/Mediabox

  19. @123:
    poin­tiert, aber da ist was dran

    @Manuela Müller:
    ich find´s gut. Nicht immer, aber immer öfter …

    rock on
    led­zep

  20. @0815: Seit ges­tern sozu­sa­gen. War eine spon­ta­ne Idee der Dr.-Web-Redaktion bezie­hungs­wei­se von mir. Das soll kein Ersatz für redak­tio­nel­le Inhalte sein, son­dern eine Möglichkeit, inner­halb der Community zu dis­ku­tie­ren oder auch – nach reich­li­chem Nachdenken und vor­he­ri­ger Recherche – Hilfe zu bekom­men, wenn man selbst nicht mehr wei­ter weiß. Warum nicht?

    Frage an alle: Nervt das tat­säch­lich oder wür­det Ihr selbst auch ger­ne mal Fragen stel­len und vom Wissen der ande­ren pro­fi­tie­ren bezie­hungs­wei­se Euer Wissen mit den ande­ren tei­len? Das soll ja angeb­lich der viel­ge­lob­te Geist der Blogosphäre sein …

  21. Tue ihm einen Gefallen und tei­le ihm mit, das im Jahr 2010 wirk­lich nie­mand eine Website auf­ruft, die selbst­stän­dig Geräusche von sich gibt. Wer sei­ne Lautsprecher auf­ge­dreht hat, wird einen Schock bekom­men, wer in einem Großraumbüro sitzt, wird einen Anschiss vom feins­ten bekom­men und wer weder Lautsprecher noch Kopfhörer aktiv hat kriegt nur schlech­te Peformance.

  22. laut.fm macht das bei­spiels­wei­se auch kom­plett mit Ajax:
    http://www.laut.fm

    mit den bekann­ten Problemen wie SEO, Deeplinking usw.

  23. Das Argument “iFrames sind .. ver­al­tet” wür­de ich mal dahin­ge­hend hin­ter­fra­gen, ob trotz des Alters der Technik die­se das Problem res­sour­cen­scho­nend löst. Man kann auch in Schönheit ster­ben..

  24. Seit wann wer­den per­sön­li­che job Probleme hier öffent­lich dis­ku­tiert? Wenn ich also kei­ne Lust habe über mei­ne Probleme nach­zu­den­ken schick ich die euch auch oder wie?

    Mfg

  25. @ Georg: An sich trig­gern die meis­ten Popup-Blocker, die ich so ken­ne, nicht den expli­zi­ten Aufruf, son­dern den impli­zi­ten, d.h. etwa Pop-Unders oder vom onLoad-Event.

    Für Firefox + Chrome gin­ge natür­lich das direk­te Abspielen via Ogg Vorbis. Ich wür­de mal ein­fach auf die­se Flash-Ogg Vorbis-usw. Fallback-Geschichte zurück­grei­fen. Soweit mir bekannt, wer­den im Ogg Vorbis vor­lie­gen­de Musikdateien vom jewei­li­gen Browser NICHT auto­ma­tisch wie­der­holt.

    cu, w0lf.

  26. ich wür­de das popup bevor­zu­gen weil, wenns eine kom­ple­xe Seite ist, die Ajax-Variante ziem­lich auf­wän­dig sein kann, insb mit Performance und SEO im Hinterkopf. Popup ist ein­fach umzu­set­zen, kann auch direkt ver­linkt wer­den und hat genü­gend Platz für Playlist, Text und sons­ti­gen Kram. Jeder der Popupblocker ein­setzt, weiß auch wie man Ausnahmeregeln defi­niert, ansons­ten kann man noch immer einen Layer mit etwas Hilfetext dazu bas­teln

  27. Vielen Dank für Eure Antworten!

    Auf die Idee mit Ajax bin ich auch noch nicht gekom­men..

    @ Holger: Finde ich eine sehr schö­ne Lösung!

    Was auch eine Möglichkeit ist, was ich jetzt erst raus­ge­fun­den habe, ist es mit
    hori­zon­ta­lem oder ver­ti­ka­lem sli­der zu lösen. Je nach Seitenaufbau kann so der
    Content “ein­gesli­det” wer­den.

    Siehe als bsp: http://www.edpeixoto.com

  28. Hier ein Beispiel mit Ajax:
    http://sonic-club.de/

    Der Laden hat zwar schon zu, die Seite steht aber noch!:)

  29. Gleiche Frage habe ich mir auch schon öfters gestellt. Ich den­ke das Ajax die bes­te Lösung ist. Allerdings so machen das es auch mit aus­ge­schal­te­ten Ajax noch geht, also unob­trusi­ve vor­ge­hen!

  30. Oder ein­fach die Seite kom­plett in Flash machen. Aber AJAX klingt natür­lich auch cool. Daran habe ich noch gar nicht gedacht.

  31. Eine halb­wegs ele­gan­te Lösung fin­det man z.B. auf http://simfy.de/ .

  32. Seitenwechseln mit Ajax rea­li­sie­ren – dann ent­fällt das Neuladen. Alternativ blei­ben nur Frames und PopUps.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.