fäberer: einbindung von musik (eine frage zu)

Hallo!

Ich habe ein Fotoalbum erstellt, bei dem auf einzelnen Seiten Musik eingebunden wird. Anschauen könnt Ihr das (vorläufige) Ergebnis unter: http://home.balcab.ch/venanz.nobel/qwant/eroedokz/index.html

Das Script zum Einbinden der Musik habe ich geklaut ;-) Es sieht so aus:

<div class="imagetitle">Alt-Stadtpräsident Josef Estermann (Zürich) hielt die erste Rede. <br>
<br><i><font size="-1">kurzer Auszug aus seiner Rede (Schweizerdeutsch)</font></i>  <br>
<OBJECT ID="MMPlayer1" WIDTH=280 HEIGHT=70 classid="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95" CODEBASE="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701" standby="Loading Microsoft Windows Media Player components..." type="application/x-oleobject">
<PARAM NAME="FileName" VALUE="../sounds/Schellenwerk.mp3">
<PARAM NAME="ShowControls" VALUE="1">
<PARAM NAME="ShowStatusBar" VALUE="1">
<PARAM NAME="ShowDisplay" VALUE="0">
<PARAM NAME="DefaultFrame" VALUE="Slide">
<PARAM NAME="Autostart" VALUE="0">
<Embed type="application/x-mplayer2" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/download/default.asp" src="../sounds/Schellenwerk.mp3" Name=MMPlayer1 Autostart=0 ShowControls=1 ShowDisplay=0 ShowStatusBar=1 DefaultFrame="Slide" width=280 height=70></embed></OBJECT>
</div>

Eigentlich funktioniert das ganz hübsch, vorteilhaft bei dieser Lösung finde ich vor allem, dass der Besucher der Seite bestimmen kann, wann er Musik will oder nicht, dass ihm der Player komfortabel gleich beim Bild zur Verfügung steht.

Das Problemchen ist folgendes: So wie das jetzt läuft, wird die Sounddatei beim Laden der Bilderseite immer gleich mitgeladen. Und die Sounds sind mitunter auch in mp3 doch 1.2 MB gross. Ich möchte nun, dass die Sounddatei erst auf Anklicken vom Server abgerufen wird.

Weiss mir jemand dafür eine Lösung, die in diese (oder eine ähnliche) Erscheinungsform der Seite passt?

Vielen Dank im voraus für's Mitdenken!

der fäberer

  1. Moin!

    Vielen Dank im voraus für's Mitdenken!

    Oh. Du willst bestimmt das Ergebnis vollständigen Nachdenkens nicht hören, das würde in böser, böser, ganz böser Kritik ausarten.
    (Browser- und Betriebssystemkompatibilität, Ärger mit GEMA und Rechteinhabern ... alles bedacht?)

    Mach eine Seite mit einem Bild vom Player (*.gif, *.jpg) als Link und wenn der Player angeklickt wird lade eine andere Seite mit dem Objekt.

    der fäberer

    MFFG (Mit freundlich- friedfertigem Grinsen)

    fastix®

    --
    Als Freiberufler bin ich immer auf der Suche nach Aufträgen: Schulungen, Development. Auch  für seriöse Agenturen.
    1. Guten Morgen zurück ;-))
      Erstmal: Danke für den Tip!

      Oh. Du willst bestimmt das Ergebnis vollständigen Nachdenkens nicht hören, das würde in böser, böser, ganz böser Kritik ausarten.

      ----> Oh. Doch, genau die will ich hören....

      (Browser- und Betriebssystemkompatibilität, Ärger mit GEMA und Rechteinhabern ... alles bedacht?)

      ---->Browser- & System: das ist mir heute (nach dem Schreiben des 1. Postings) auch noch durch den Kopf gegangen....Einen Lösungsansatz hat Dein ebenfalls antwortender Kollege geliefert. Vielleicht liest Du die andere Antwort auch? GANZ ist mein Prob. noch nicht gelöst. Aber in Verbindung mit Deinem Vorschlag nähern wir uns dem, was ich mir vorstelle...insbesondere ev. mit dem Pop-up, was ja aber Java-script erfordert (tut es das WIRKLICH?) was ja auch nicht alle Leute eingeschaltet haben....was DANN? ALLEN LEUTEN recht getan....
      ----->Aerger mit GEMA & Rechteinhabern: Du hast den Link offenbar nicht ausprobiert ;-) Die Fotos sind von einer Veranstaltung. Gewisse "Sound-Links" lassen Ausschnitte von Reden hören, andere bringen "Live-Musik" des Anlasses. Ich bin sowohl mit den Rednern als auch mit den Musikern, die Selbstkomponiertes spielen, befreundet und stelle diese Dokumente in Absprache mit ihnen in's Netz. Das sind also freie Tondokumente, die der GEMA wurst zu sein haben....da keine geschützten Werke aufgeführt werden!

      Danke für die gutgemeinten Tips (der mit dem *.gif kommt wohl noch zum Zug!) & ich freue mich auf weitere Kritik!

      der fäberer

  2. Hallo,

    Das Script zum Einbinden der Musik habe ich geklaut ;-) Es sieht so aus:

    (gekuerzt):

    <OBJECT ID="MMPlayer1" WIDTH=280 HEIGHT=70 classid="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95" CODEBASE="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701" standby="Loading Microsoft Windows Media Player components..." type="application/x-oleobject">
    <PARAM NAME="FileName" VALUE="../sounds/Schellenwerk.mp3">
    <EMBED type="application/x-mplayer2" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/download/default.asp" src="../sounds/Schellenwerk.mp3" Name=MMPlayer1 Autostart=0 ShowControls=1 ShowDisplay=0 ShowStatusBar=1 DefaultFrame="Slide" width=280 height=70></EMBED></OBJECT>

    1. Das EMBED-Tag ist nicht valides HTML.
       Es ist Geschmackssache, ob man lieber valides HTML will,
       oder ob man moeglichst viele Browser erreichen will.
    2. Nicht jeder hat den Windows Media Player.
       Der Text im "standby" Attribut (ist dieses valide?) ist deshalb falsch.
    3. Die Hoehen- und Breitenangabe mag vielleicht fuer _Dein_ System mit
       _Deinem_ Mediaplayer passen. Bei anderen sind sie vielleicht zu klein.

    Eigentlich funktioniert das ganz hübsch, vorteilhaft bei dieser Lösung finde ich vor allem, dass der Besucher der Seite bestimmen kann, wann er Musik will oder nicht, dass ihm der Player komfortabel gleich beim Bild zur Verfügung steht.

    Diese Vorteile hast Du auch, wenn Du einen direkten Link auf die MP3-Datei machst:

    <a href="../sounds/Schellenwerk.mp3">Schellen-Musik (MP3, 1.2 MB)</a>

    Dann hat der Benutzer
    a) die Wahl, ob er ueberhaupt Musik will
    b) die Wahl, ob er sich den Download antun will
    c) seinen _Lieblings-Player_ mit den gewohnten Steuerfunktionen - und erst noch
        in der richtigen Groesse.

    Ich wuerde es nur so machen.

    Gruesse,

    Thomas

    P.S.

    Wie Du aus einer URL einen klickbaren Link machen kannst,
    steht in der FAQ: </faq/#Q-19>

    Falls Du der Autor von http://www.jenisch.info/ bist:
    1. Die mehrfach verwendet Telefon-Metapher ist sehr muehsam.
       (Man soll immer nachlesen, welche Zahl welches Thema ist,
       und dann auf der Waehlscheibe-Image-Map diese Zahl klicken.)
       Mach lieber eine normale Navigation mit normalen Text-Links.
    2. Die Hintergrundbilder (weisser Text auf Hellgruen) sind sehr
       haesslich und erschweren das Lesen wahnsinnig.

    1. Hallo,
      danke erstmal für die schnelle Antwort! Sie hat mir weitere Fragen eröffnet ;-)

      1. Nicht jeder hat den Windows Media Player.

      ---> Stimmt schon und ist ja auch gut so, will ja eigentlich niemanden zu "Herrn Kleinweich" zwingen ;-)

      Eigentlich funktioniert das ganz hübsch, vorteilhaft bei dieser Lösung finde ich vor allem, dass der Besucher der Seite bestimmen kann, wann er Musik will oder nicht, dass ihm der Player komfortabel gleich beim Bild zur Verfügung steht.

      Diese Vorteile hast Du auch, wenn Du einen direkten Link auf die MP3-Datei machst:

      <a href="../sounds/Schellenwerk.mp3">Schellen-Musik (MP3, 1.2 MB)</a>

      Dann hat der Benutzer
      a) die Wahl, ob er ueberhaupt Musik will
      b) die Wahl, ob er sich den Download antun will
      c) seinen _Lieblings-Player_ mit den gewohnten Steuerfunktionen - und erst noch
          in der richtigen Groesse.

      ----> wenn ich SO referenziere, wie Du vorschlägst, geht der Player ja im selben Fenster los, ersetzt also meine Bilderstrecke. Mit target="_blank" erreiche ich zwar, dass der Player sich in einem neuen Fenster öffnet, das dann ja aber auch 100% füllend ist und also das Bild ueberdeckt. Eine Variante wäre da allenfalls ein kleineres Popup-Fenster als Verweis-Ziel anzugeben. Was hältst Du davon? Bin an weiteren Vorschlägen sehr interessiert!!

      Ich wuerde es nur so machen.

      Gruesse,

      Thomas

      P.S.

      Wie Du aus einer URL einen klickbaren Link machen kannst,
      steht in der FAQ: </faq/#Q-19>

      Falls Du der Autor von http://www.jenisch.info/ bist:

      1. Die mehrfach verwendet Telefon-Metapher ist sehr muehsam.
           (Man soll immer nachlesen, welche Zahl welches Thema ist,
           und dann auf der Waehlscheibe-Image-Map diese Zahl klicken.)
           Mach lieber eine normale Navigation mit normalen Text-Links.

      ---> Danke für den Tip, die Telefon-Navi war nur ein Versuch und ich bin momentan am überarbeiten der Seite ;-)

      1. Die Hintergrundbilder (weisser Text auf Hellgruen) sind sehr
           haesslich und erschweren das Lesen wahnsinnig.

      ---auf Hellgrün? HILFE! auf meinem PC ist die Grundfarbe "Sandfarben", ich habe also dezenten weissen Text im sandfarbenen Background. Der Farbcode dazu heisst #CCCC99, was aber offenbar bei Dir hellgrün ergibt? Bei mir ist der Grünanteil der Farbe fast nicht erkenntlich, es ist wirklich sandfarben, mit GANZ GANZ leichtem grünstich drin. Wie sieht denn bei Dir #D9CE93 aus? Das ist bei mir sagen wir mal "ziemlich dunkle Vanille-Sauce", aber neben der #CCCC99 noch das, was ich am ehesten als "sandfarben" bezeichnen würde. Ob da mit der Farbeinstellung meines Bildschirms was nicht stimmt?

      Oh Mensch, da schreibe ich zum ersten Mal im "self-Forum", obwohl ich doch nun schon bald 2 Jahre mit "self-hilfe" "bastle" und die Probleme werden gleich grösser statt kleiner ;-))

      Darf ich Dich nochmals um Antwort bitten? Herzlichen Dank!!

      der fäberer

      1. Hallo,

        <a href="../sounds/Schellenwerk.mp3">Schellen-Musik (MP3, 1.2 MB)</a>
        ----> wenn ich SO referenziere, wie Du vorschlägst, geht der Player ja im selben Fenster los, ersetzt also meine Bilderstrecke.

        Bei _mir_ gehen bei Links auf MP3-Dateien unter Windows der Player "WinAmp"
        und unter Linux der Player "XMMS" in ihren eigenen Fenstern auf.
        Im Browser bleibt schoen die HTML-Seite stehen.

        target="_blank" oeffnet bei mir nur ein leeres neues Fenster.
        Auch ein mit JavaScript erzeugtes Pop-Up waere leer und sinnlos.
        Vor allem hast Du dann wieder das Problem, dass Du nicht weisst,
        wie gross Du es machen sollst.

        Ich denke nach wie vor, dass ein normaler Link ohne Firlefanz am besten ist.
        Fuer die armen Leute, die den Windows Media Player haben und bei denen
        das von Dir beschriebene Problem auftaucht, kannst Du ja als "Tip/Hinweis"
        neben/unter den Link schreiben, dass sie mit Rechtsklick auf den MP3-Link
        diesen auch in einem Zusatzfenster oeffnen koennen.

        Falls Du dennoch ein Pop-Up oeffnen willst, lies zuvor
        http://home.t-online.de/home/dj5nu/js-popup.html
        Dort erfaehrst Du auch, wie Du den Link so machen kannst,
        dass er auch ohne JavaScript funktioniert.

        http://www.jenisch.info---> Danke für den Tip, die Telefon-Navi war nur ein Versuch und ich bin momentan am überarbeiten der Seite ;-)

        Sehr gut! Die Telefon-Navi hast Du bereits weggemacht. Bravo!

        1. Die Hintergrundbilder (weisser Text auf Hellgruen) sind sehr
             haesslich und erschweren das Lesen wahnsinnig.
          ---auf Hellgrün? HILFE! auf meinem PC ist die Grundfarbe "Sandfarben",

        OK, OK, ich habe nicht so genau hingeschaut, weil ich es so haesslich fand.
        Die Farbe des Hintergrundes ist effektiv ein Beige/Sand oder so.
        Die gekachelte Schrift darin ist weiss. Deutlicher Kontrast.
        Darauf stehen dann in normaler, feiner blauer Schrift die Links,
        und die sind eindeutig zu schwer zu lesen.
        Wenn schon ein Hintergrundbild, dann bitte ein _Bild_ (und nicht Text), und zwar
        eines mit sehr wenig Kontrasten.

        A propos Kontrast:
        Auf der Seite http://members.aon.at/jenisch.at/romedeinfuehrung.htm ,
        die Du in Dein Frameset einbindest, ist der Text Dunkelviolett und der
        Hintergrund rotbraun oder so. Jedenfalls sehr schlecht zu lesen.
        Also, falls Du Einfluss auf die Seite oder deren Autor hast, aendere das bitte!

        Oh Mensch, da schreibe ich zum ersten Mal im "self-Forum", obwohl ich doch nun schon bald 2 Jahre mit "self-hilfe" "bastle" und die Probleme werden gleich grösser statt kleiner ;-))

        Das ist der Nebeneffekt!
        Hier kriegst Du meist nicht nur die "Loesung" fuer Dein eigentliches "Problem",
        sondern gleich noch ein halbes Dutzend weitere Verbesserungsvorschlaege.

        Ich finde es schoen, dass Du nicht (wie viele andere) den Schwanz einziehst
        und Dich nicht mehr blicken laesst, sondern dass Du Dir unsere Kritik zu Herzen
        nimmst und die Probleme in Angriff nimmst.

        Darf ich Dich nochmals um Antwort bitten? Herzlichen Dank!!

        Klar doch! Ich helfe gerne.

        Gruesse,

        Thomas

        1. Guten Morgen Thomas
          mit der Hilfe dieses Forums habe ich selber noch ein bisschen weiter studiert.
          -->Da ich mich in die diversen Script-Sprachen noch kaum eingearbeitet habe & da viele Leute JavaScript deaktivert haben (Dein Link führte u.a. zu einer Statistik, die von sicher 10% redet),
          -->Da aber (vermutlich gerade unter den Usern der Seite, um die es mir geht) viele Leute eine einfache Windows-Installation haben ("ohne Firlefanz", d.h. halt mit Windows Media Player)
          habe ich einen weiteren Weg gesucht und vermutlich in Form von iframe gefunden.

          Schau Dir meine Lösung bitte mal an:
          http://home.balcab.ch/venanz.nobel/qwant/eroedokz/index.html
          In den 33 Fotoseiten hat es 8 Tondokumente verstreut (z.T. Reden, z.T. Musik
          Ich habe nun eine Seite "player.html" erstellt, die "leer" ist, nur die Grundfarbe der Seite enthält.
          Sodann habe ich auf denjenigen Fotoseiten, die Musik/Reden enthalten, diese "leere" player.html UNTER dem Link für die Musik als i-frame eingebunden.
          Der Link für die Musik enthält jetzt den Target ="player" (name des iframes)
          In meinem IE6 und Netscape 7 läuft das mit dem Windows-Media-Player genau so ab, wie ich es mir vorgestellt habe. Beim Opera 6.05 habe ich den Winamp als Soundplayer verknüpft. Hier macht er brav, so wie von Dir beschrieben, den Winamp separat auf.
          Ich denke deshalb, dass ich die Lösung gefunden habe... Was denkst Du?

          Sehr gut! Die Telefon-Navi hast Du bereits weggemacht. Bravo!

          -->Das wäre nicht so schnell gegangen, wenn ich nicht schon VOR Deinem Posting an der Arbeit gewesen wäre LOL

          -->Farben/Hintergründe: Ich habe Deine Vorschläge zur Kenntnis genommen, weiss noch nicht, was draus wird, was meine & der im Verein verantwortlichen Leute definitive Meinung sein wird.

          Danke nochmals für die Hilfe und falls Du die i-frame-Lösung auch noch mit Schwierigkeiten behaftet siehst, bin ich für Tips sehr dankbar, denn das ist der beste Weg zu lernen...

          Einen schönen Tag wünscht
          der fäberer

          1. Hallo Faeberer,

            Schau Dir meine Lösung bitte mal an:
            http://home.balcab.ch/venanz.nobel/qwant/eroedokz/index.html

            Bitte gib uns doch gleich ein konkretes Beispiel - und das als Link </faq/#Q-19>
            http://home.balcab.ch/venanz.nobel/qwant/eroedokz/imagepages/image29.html

            Ich habe nun eine Seite "player.html" erstellt, die "leer" ist, nur die Grundfarbe der Seite enthält.
            Sodann habe ich auf denjenigen Fotoseiten, die Musik/Reden enthalten, diese "leere" player.html UNTER dem Link für die Musik als i-frame eingebunden.

            Also so:
            <p align="center"> <iframe src="http://home.balcab.ch/venanz.nobel/player.html" name="player"
               width="50%" height="30%" scrolling="no"
               align="center" hspace="0" vspace="0"
               marginwidth="0" marginheight="0" frameborder="0">
            platzhalter für player
            </iframe> </p>

            Ich haette vermutet, dass P kein IFRAME enthalten darf.
            Der Validator meckert allerdings nur wegen anderen Dingen.
            Und die Liste von SelfHTML sagt mir, dass IFRAME ein Inline-Element sei:
            http://selfhtml.teamone.de/html/referenz/elemente.htm#inline_elemente
            Also kannst Du das vermutlich so lassen.

            Der Link für die Musik enthält jetzt den Target ="player" (name des iframes)

            Also so:
            <a href="http://home.balcab.ch/venanz.nobel/qwant/eroedokz/sounds/mueroe4.mp3" target="player">Musik (MP3, 1.9MB)</a>

            In meinem IE6 und Netscape 7 läuft das mit dem Windows-Media-Player genau so ab, wie ich es mir vorgestellt habe. Beim Opera 6.05 habe ich den Winamp als Soundplayer verknüpft. Hier macht er brav, so wie von Dir beschrieben, den Winamp separat auf.

            Klingt gut + brauchbar.

            Hier unter SuSE Linux 8.2:

            Mozilla 1.2.1 laedt (nach Nachfrage) das File herunter und uebergibt es an XMMS,
            den ich zuvor mal als Standard-Applikation festgelegt habe.
            Dort beginnt das Abspielen automatisch.
            (Default in Mozilla waere Download).

            Konqueror 3.1.1 laedt im IFRAME den KMPlayer, und das Abspielen beginnt
            automatisch.
            Weil Du relative Groessenangaben fuer den IFRAME machst, ist dieser allerdings
            nur ab ca. 900px Fensterbreite genug breit, damit man alle Kontrollfunktionen
            zur Verfuegung hat - "Pause" wird erst ab ca. 385 px IFRAME-Breite sichtbar.

            Screenshot aus Konqueror 3.1.1 mit KMPlayer voruebergehend unter:
            http://www.tiptom.ch/tests/fremdes/fab-konq311-kmplayer.png (76kB, 913x732px)

            Ich wuerde dem IFRAME eher eine fixe Breite geben, z.B. 400 oder 500 Pixel,
            oder was halt fuer den MS Windows Media Player notwendig ist.

            Noch zur Info (und fuer's Archiv;-):
            Wenn ein Link direkt auf eine MP3-Datei _kein_ target-Attribut hat:
            <a href="musik.mp3">Musik (MP3, 1.9 MB)</a>
            dann fragt mich Konqueror, ob er die Datei mit XMMS oeffnen soll.
            In der Konfiguration von Konqueror sind fuer MP3 folgende drei Player
            (in absteigender Reihenfolge) eingestellt (Standard-Konfig. von SuSE 8.2):

            • XMMS
            • KMPlayer
            • Kaboodle
              Offenbar kann Konqueror XMMS nur als Standalone-Player brauchen,
              aber nicht als Plug-In, deshalb nimmt er bei Deiner Loesung KMPlayer.

            Ich denke deshalb, dass ich die Lösung gefunden habe... Was denkst Du?

            Ich halte sonst nichts von IFRAME, aber ich denke, hier ist es
            eine durchaus brauchbare Workaround-Loesung.

            Hast Du die selbst "erfunden"? Oder irgendwo gefunden? Wenn ja, wo? ;-)

            Man muesste noch schauen, was Netscape 4.x dazu meint.
            Der kann ja kein IFRAME. Ich vermute mal, dass er ein neues
            leeres Fenster oeffnet. Wuerde mir aber nicht zuviel Gedanken
            machen wegen Netscape 4.x

            Gruesse,

            Thomas

            1. Guten Morgen Thomas
              Danke für die Nachricht & das grosse Lob für den kleinen Laien! Es freut mich sehr, dass meine Lösung (auf einem Nachtspaziergang wirklich selbst erfunden, sonst wär's in meinem Posting gestanden (siehe mein erstes ;-) )) Dein Gefallen findet. "Workaround" ist ein schönes Wort. Dass meine auf Windows mit Eurer (Thomas & fastix) Hilfe ausgetüftelte Variante auch bei Linux mindestens in Deinen beiden Browsern erträgliche Ergebnisse gibt, lässt mich hoffen, dass ich's doch noch irgendwann kapiere... Jetzt muss ich nur noch jemanden finden, der mir berichtet, wie das ganze in einem MAC dargestellt wird... Weil Dein erster Vorschlag (der "reine" Link) bei "reinen" Windows-Konsumenten (und von Denen hat's in "meinem Zielpublikum" wie ich weiss sehr viele) die äusserst unbefriedigende Variante ergab, dass das Foto durch den Windows-Player ersetzt wird, bin ich auf die i-frame-Lösung gekommen, in der anscheinend nicht unberechtigten Hoffnung, damit 2 Fliegen schlagen zu können. Mein grösstes Bedenken war noch, was das target="player" bei Dir auslösen würde, da Du ja das Problem mit target="_blank" schon beschrieben hattest. Deshalb war ich auch so gespannt auf Deine Antwort!

              Ich habe beim i-frame %-Angaben gemacht, in der Hoffnung, damit bestmöglich auf verschiedene Bildschirmgrössen Rücksicht zu nehmen. Der Windows-Player braucht kaum mehr als die Hälfte der Breite, die Dein Sreenshoot zeigt. Danke für den Tip, das werde ich noch nachholen.

              Einen schönen Tag wünscht
              der fäberer

        2. ...kleiner Nachtrag
          beim 5. Bild werden 3 Rede-Auschnitte verlinkt. auch das scheint gut zu funktionieren, indem ein schneller wechsel zwischen den sound-dateien durch klick auf die links, die dann brav im i-frame anlaufen, möglich ist....zumindest bei meinen browsern, aber wer hat schon ALLE browser und ALLE browser-einstellmöglichkeiten zum ALLES durchtesten??

          Gruss nochmals
          der fäberer