www.BuntesWeb.de
www.BuntesWeb.de - Computer & Internet
 
 

Das Homepage-Handbuch speziell für blutige Anfänger

Spezielle Elemente einer Webseite - Multimedia

Klänge und Musik

Tonsignale erregen auf jeden Fall die Aufmerksamkeit des Anwenders - wenn er über ein Soundsystem verfügt und dieses aktiviert hat. Oft ist das nicht der Fall, denn jede noch so schöne Hintergrundmusik geht einem sehr bald auf die Nerven und so haben viele Websurfer die Lautstärke ihres Computers auf ein Minimum reduziert.

Musikdownload

Die einfachste Variante zur Verwendung von Multimedia ist das Downloadangebot. Die Musik dudelt also nicht auf der Homepage, sondern nur bei Klick auf einen entsprechenden Link. Hierbei hat der Anwender die Wahl, ob sich der Mediaplayer öffnen soll, um die Datei sofort wiederzugeben, oder ob er die Klangdatei erstmal nur herunterlädt und speichert.

Kopieren Sie die Musikdatei einfach in Ihren Homepageordner und setzen Sie im Webdokument einen Link direkt auf diese Datei. Laden Sie nun beides zusammen zum Webserver hoch. Wenn der Anwender auf diesen Link klickt, dann öffnet sich der mit diesem Dateiformat verknüpfte Player und er kann das Musikstück anhören. Je nach (Sicherheits-)Einstellung des Browsers wird der Anwender vermutlich erst gefragt, ob er die Datei ausführen oder lieber nur speichern will.

Wenn Sie eine Mediendatei ganz gezielt zum Download anbieten wollen, dann schreiben Sie einen Hinweis neben den Link: Für Download klicken Sie bitte mit der rechten Maustaste und wählen Sie "Ziel speichern unter". Wenn Sie die Datei ausschließlich zum Download anbieten wollen, dann packen Sie sie am besten in ein ZIP-Archiv. damit verhindern Sie die sofortige Wiedergabe und durch die Datenkompression verkürzen Sie ggf. noch etwas die Downloadzeit und verringern somit Ihren Traffic.

Die Musikbox - hier am Beispiel einer MIDI-Sequenz

Angenommen, Sie wollen auf Knopfdruck eine Melodie abspielen lassen. Dann benötigen Sie ein Bedienelement. Das müssen Sie gar nicht selbst basteln, denn das erscheint ganz automatisch, wenn der Browser auf das Plug-In zur Musikwiedergabe zurückgreift. Wie dieser Player aussieht, das hängt ganz davon ab, welche Abspielsoftware der jeweilige Anwender auf seinem System installiert hat. Windows-Rechner verfügen in der Regel über den Window-Mediaplayer. Vom Internet Explorer wird dieser ganz selbstverständlich benutzt. Mozilla lehnt das ab und daher muss erst ein anderes Plug-In nachgeladen und installiert werden. Zumeist ist das Quicktime von Apple. Dieser Player startet also, wenn Firefox auf eine Musikdatei stößt.

Wenn Sie mit Namo WebEditor beispielweise ein Klang-Datei einfügen wollen, dann kopieren Sie die Tondatei in Ihren Homepageordner und dann fügen Sie eine Musikbox auf Ihrer Homepage ein.

Dabei haben Sie die Wahl zwischen einem Active/X-Control Element und einem veraltetet Plug-In-Befehl. Wählen Sie Active/X, dann baut Namo WebEditor zusätzlich noch den alten Plug-In-Befehl ein, da andere Browser als der Internet Explorer (wie Mozilla Firefox oder Opera) kein Active/X unterstützen. Außerdem gibt es noch einen dritten Weg, der ohne Active/X und ohne den veralteten Plug-In-Befehl auskommt, der aber im WYSIWYG-Modus von Namo WebEditor nicht unterstützt wird und daher von Hand in den HTML-Code eingefügt werden muss.

Musikbox Beispielseiten

Hintergrundsound

Sie wollen einen Hintergrundsound abspielen. Das könnte Musik sein oder meinetwegen auch Vogelgezwitscher oder allgemeine Umweltgeräusche. Das Prinzip ist das selbe wie bei der oben beschriebenen Musikbox. Nur dass diesmal der Sound automatisch abgespielt wird.

Sie können außerdem das Objekt mit den Bedienelementen verbergen. Aber ganz ehrlich: Es ist egal, wie wunderschön das Hintergrundgedudel auch sein mag - schon nach kurzer Zeit geht es auch dem geneigtesten Leser auf die Nerven. Daher ist es ein wirklich netter und guter Service, wenn der Anwender die Musik auch abschalten kann. Am besten bauen Sie daher die Hintergrundmusik genau so ein, wie ich das schon oben bei der Musikbox beschrieben habe. Einziger Unterschied: Diesmal aktivieren Sie den Autostart und verpflanzen den Player vielleicht an eine noch nicht genutzte Stelle am Rande der Webseite. Wenn Sie ihn doch lieber ganz verstecken wollen, dann machen Sie ihn einfach ganz klein (Breite und Höhe Null).

Hintergrundmusik Beispielseiten
Supereinfach, aber nur für den Internet Explorer:

Eine weitere Methode für Hintergrundmusik funktioniert leider nur im Internet Explorer. Der kennt nämlich noch das alte Tag <bgsound>. Wenn Sie damit leben können, dass Anwender von Firefox und Opera keinen Ton hören, und sie eigendlich ein HTML-Tag verwenden, das laut W3C überhaupt nicht existieren sollte, dann fügen Sie einfach irgendwo im Kopf des HTML-Quellcodes das folgende ein:

<bgsound src="midisequenz.mid">

Oder erledigen Sie das ganz einfach mit Namo WebEditor:

- Öffnen Sie die Dokumenteigenschaften.
- Wählen Sie dort die Karteikarte "Stile".
In der unteren Hälfte des Eingabedialoges unter "Hintergrundsound" befindet sich die Eingabezeile "Pfad:".
- Geben Sie dort den Dateinamen ihrer Hintergrundmusik ein
-- oder klicken Sie auf [Durchsuchen], um die Datei aus dem Verzeichnis auszuwählen.
- Sie können anschließend noch bestimmen, wie oft die Musik wieder von vorn anfangen soll
-- bzw. ob sie in einer Endlosschleife wiederholt werden soll.
 

Ereignisklang

Es soll ein Klang ausgegeben werden, sobald der Anwender einen Link oder ein bestimmtes Objekt (ein Bild) anklickt.

Ganz wie bei der Musikbox kommt es nun wieder darauf an, dass der Klang nicht einfach losspielt, wenn die Seite geladen wird. Also verwenden wir für den Einbau des Klanges auch die selbe Methode wie bei der Musikbox mit dem Parameter AutoPlay=False. Zusätzlich sollte der Player versteckt werden. Das geschieht am besten wie in den Beispielen für Hintergrundmusik beschrieben durch Verkleinerung der Musikbox bis zur Unsichtbarkeit (Breite und Höhe gleich Null) oder/und Unterbringung irgendwo ganz unauffällig am Rande der Seite. Zur besseren Veranschaulichung habe ich den Player auf dieser Seite aber sichbar gelassen und am linken Bildrand unter die Navigation gesetzt.

Die oben angeführten Beispiele Nr. 1, bei denen eine Kombination aus Active/X-Objekt und <embed> Plug-In verwendet wird, würde das Script viel zu kompliziert machen. Und das in den Beispielen Nr. 2 verwendete Embed-Tag ist eigentlich veraltet und so wollen wir dieses auch nicht verwenden. Also fällt die Wahl gleich auf das dritte Beispiel mit dem <object>-Tag.

Bauen Sie also folgenden Code irgendwo gleich unterhalb vom <body>-Tag in Ihren HTML-Quelltext ein:

<object data="wavklang.wav" type="audio/x-wav" width="0" height="0" id="klang">
    <param name="src" value="wavklang.wav">
    <param name="autostart" value="false">
    <param name="playcount" value="1">
</object>

Wie sie sehen, verwenden wir diesmal nicht ein Midi-Lied, sondern eine Klangdatei im Format 'WAV'. Dieses 'Windows Audio Format' verwendet zwar keine Datenkompression, ist aber trotzdem prima geeignet für kurze Geräusche, die man z.B. mit dem WAV-Recorder (und einem Mikrofon) selbst aufgezeichnet hat. Kopieren Sie Ihre WAV-Datei in den Ordner, wo sich auch Ihr HTML-Dokument befindet. Passen Sie ggf. den Dateinamen im <object>-Code an. Achten Sie darauf, dass dieser an zwei Stellen angegeben werden muss, nämlich als Attribut "data' und später noch einmal als Parametername 'src'. (SRC=Source=Quelle). Der Parameter "autostart" anthält den Wert "false", damit der Klang nicht sofort losspielt, wenn die Seite geladen wurde. Und der Parameter playcount erhält den Wert 1, damit der Klang wirklich genau einmal abgespielt wird und nicht endlos weiterdudelt.

Wenn man auf ein Objekt klickt, dann soll der Klang einmal abgespielt werden. Man benötigt quasi eine Fernsteuerung für die Musikbox. Das erledigt man mittels JavaScript. Und damit das JavaScript-Programm auf den Klang zugreifen kann, muss die Musikbox mit einer ID markiert werden. Deshalb enthält das Klang-Objekt das Attribut id="klang" und der JavaScript-Befehl lautet:

klangobjekt=document.getElementById('klang');klangobjekt.Play();

Angenommen, wir wollen einfach nur einen kleinen Sound abspielen, wenn ein Bild angeklickt wird. In dem Falle können wir das Script einfach in Form eines Links aufrufen. Das macht die Sache ganz besonders einfach, da man lediglich folgende Linkadresse eingeben muss:

javascript:klangobjekt=document.getElementById('klang');klangobjekt.Play();

So sieht der HTML-Code des so verlinkten Bildes aus:

<a href="javascript:klangobjekt=document.getElementById('klang');klangobjekt.Play();">
  <img src="klang.gif">
</a>

Und so sieht es dann im Browser aus: (klicken Sie mal auf das Bild)

Der Klick startet das zur ID gehörende Player-Pugin, welches Sie in diesem Falle unterhalb der Navigation sehen sollten und es ertönt ein kleines Glockenspiel. Ob das wirklich klappt, das hängt allerdings stark von Ihren Browsereinstellungen ab - und ob ein geeignetes PlugIn bzw. ein Player für das WAV-File installiert ist.

Sie wissen nicht (mehr), wie man einen Link erzeugt oder wie man ein Bild einfügt?
Dann lesen Sie bitte (noch einmal) nach: Grundelemente einer Webseite : >> Hyperlinks , Bilder

Damit endet die Klangwelt hier im Homepage-Handbuch. Ihrer Experimentierfreudigkeit sind natürlich keine Grenzen gesetzt. Sie können den Dateinamen und die ID an Ihre eigenen Wünsche anpassen und wenn Sie wollen, dann können Sie auf einer Seite auch mehrere Klangobjekte verwenden. Diese müssen lediglich unterschiedliche IDs haben. Die Verwendung eines Links macht es Ihnen sehr einfach, denn Sie können den JavaScript-Aufruf direkt im WYSIWYG-Modus eingeben. Fortgeschrittene Anwender mögen noch etwas tiefer in die JavaScript-Trickkiste greifen. Da dieses Handbuch sich aber nur an die blutigen Anfänger wendet, würde das zu weit führen und ich belasse es bei dieser Methode.
 

Hier geht es jetzt weiter mit dem "Kintop" - Kleine Filmchen auf der Homepage.
 
Copyright by Jörg Wischnewski - Logos, Warenzeichen, Schutzmarken etc. stehen im jeweiligen Recht und Eigentum der eingetragenen Inhaber, auch wenn dies nicht ausdrücklich einzeln angegeben ist.