info@a-coding-project.de

Beispiele: Multimedia mit JavaScript

Das JavaScript weitaus mehr kann als nur Formulare und Popups dürfte den meisten klar sein, dass JavaScript aber auch wunderbar geeignet ist Multimedia zu steuern ist vielleicht etwas Neues.

Musik abspielen

Soll die Seite noch etwas bunter werden könnte man z.B. zu musikalischer Untermalung greifen. Netscapes Navigator und Microsofts Internet Explorer unterstützen bekanntlich das embed-Element mit welchem sich problemlos eine Musikdatei einbinden läßt (bitte beachten Sie jedoch, dass dieses Element nicht HTML-konform ist). Soll die Musik dann ereignisgesteuert abgespielt brauchen wir noch etwas JavaScript . Zuerst einmal die HTML-Umsetzung:

<embed src="musik.mid" hidden="true" autostart="false" loop="false" 
name="musik" MASTERSOUND><br>

<a href="#" onclick="abspielen(); return false;"> 
 Abspielen
</a><br>
<a href="#" onclick="stoppen(); return false;">
 Stoppen
</a>

Es fehlen nun also die Funktionen abspielen und stoppen. Das Stoppen ist soweit kein Problem:

function stoppen() { document.musik.stop(); }

...allerdings bereitet das starten der Musik dann schon einige Probleme. Bei Netscape geht das noch relativ einfach. Nach einer kleinen Browserabfrage wird mit document.musik.play(false) losgelegt. Microsofts Browser hat jedoch das Problem, dass für .wav-Dateien die Methode Run und für .mid-Dateien (MIDI) die Methode play verwendet werden muss. Es muss hier also eine Unterscheidung vorgenommen werden, welcher Dateityp gerade verwendet wird. Sofern er nicht feststeht könnte die abspielen-Funktion wie folgt aussehen - steht er fest, kann einer der beiden Teile entsprechend weggelassen werden:

function abspielen()
{
 if(navigator.userAgent.toLowerCase().indexOf('msie') != -1 &&
    parseInt(navigator.appVersion) >= 4)
 {
  if(document.musik.src.toLowerCase().indexOf('.wav') != -1)
  {document.musik.Run()}
  if(document.musik.src.toLowerCase().indexOf('.mid') != -1)
  {document.musik.play()}
 }
 else
 {
  document.musik.play(false)
 }
}

Im Test hatte Netscapes 4er Browser einige Probleme mit .mid-Dateien, bei Opera funktionierte gar nichts. Auch bei Netscapes 6er Browser lief nicht viel. Es gibt jedoch einen Workaround: Man erzeugt ein Frameset mit einem unsichtbaren Frame, nennen wir ihn musik, in dem ein bgsound-Element für Hintergrundmusik sorgt. Soll ein Sound abgespielt werden, startet man nicht die Musik wie oben neu, sondern schreibt den Frame erneut. Beispiel:

function abspielen()
{
 a = parent.musik.document;
 a.open();
 a.writeln('<html>');
 a.writeln(<head>);
 a.writeln(<bgsound src="musik.wav" loop="1">);
 a.writeln(</head>);
 a.writeln(<body></body>);
 a.writeln(</html>);
 a.close();
}

Sobald das Dokument geschrieben wurde beginnt die Musik zu spielen. Um sie wieder anzuhalten muss der Frame lediglich neu geschrieben werden - eben ohne dass darin ein bgsound-Element auftaucht.

Laufschriften erzeugen

Laufschrift, also bewegte Texte, sind gern gesehen und noch lieber werden sie verwendet. Microsoft führte dazu ehemals das marquee-Element ein, mit dem es möglich ist Laufschrift zu erzeugen. Da dieses Element aber leider auch nur mit dem Internet Explorer funktioniert und außerdem nicht zum HTML-Standard gehört, muss zu einer Alternative gegriffen werden, die alle Browser beherrschen: JavaScript . Das Prinzip ist relativ einfach: Der Text wird verschoben, indem Leerzeichen vorangestellt oder Zeichen am Anfang abgeschnitten werden. Mit zunehmender Dauer werden dann mehr Zeichen angefügt bzw. abgeschnitten, wodurch der Text dann nach rechts (Leerzeichen vorangestellt) bzw. links (Zeichen abgeschnitten) wandert.
Um den Text von links nach rechts laufen lassen zu können benötigen wir zunächst einen Text der in der Variablen text gespeichert wird sowie einen Zähler der uns sagt, ab welcher Stelle der Text schon sichtbar ist:

var text = 'JavaScript in der Praxis';
var zaehler = 0;

Das Verschieben ist dann relativ einfach: In einem Intervall wird jeweils der Zähler erhöht und der Teil des Textes angezeigt der vom Ende gezählt so lang ist wie der Zähler groß ist. Ist der Zähler größer als die Länge des Textes werden Leerzeichen an den Anfang angehangen:

var inter = window.setInterval('anzeigen()',100);

function anzeigen()
{
 zaehler++;
 if(zaehler <= text.length)
 { res = text.substr(text.length-zaehler,zaehler); }
 else
 {
  res = text;
  for(i=text.length; i<= zaehler; i++){ res = ' '+res; }
 }
 if(zaehler > 100+text.length){zaehler = 0}
 res = res.substr(0,100)
 window.status = res;
}

Soll sich der Text in die andere Richtung bewegen ist das Verfahren das gleiche - lediglich der Zähler beginnt bei der Textlänge plus Leerzeichen (sagen wir 100) und wird herunter gezählt. Demnach brauen wir die Funktion nur wenig umzustellen:

zaehler = text.length+100;
inter = window.setInterval('anzeigen()',100);

function anzeigen()
{
 zaehler--;
 if(zaehler < 0){zaehler = text.length+100;}
 // ... gekürzt ...
}

Noch flexibler wird die Funktion, wenn wir die Richtung als Zahl angeben. Wir erstellen dazu die Variable richtung mit den Werten 1 oder -1. Soll der Text nach links laufen wird ihr der Wert -1 gegeben - ansonsten 1. Die Funktion braucht auch hierfür wieder nur wenig geändert werden. Das vollständige Skript:

var text = 'JavaScript in der Praxis';
var zaehler = 0;
var inter = window.setInterval('anzeigen()',100);
var richtung = 1; //alt.: -1

function links_rechts(){ richtung = 1; }
function rechts_links(){ richtung = -1; }

function anzeigen()
{
 zaehler = zaehler+richtung;
 if(zaehler < 0){zaehler = text.length+100;}
 if(zaehler > 100+text.length){zaehler = 0}

 if(zaehler <= text.length)
 { res = text.substr(text.length-zaehler,zaehler); }
 else
 {
  res = text;
  for(i=text.length; i<= zaehler; i++){ res = ' '+res; }
 }

 res = res.substr(0,100)
 window.status = res;
}

Ebenso wie hier der Text in die Statusleiste ausgegeben wird kann er natürlich in jeder anderen erdenklichen weise ausgegeben werden (Textfeld, Titelleiste, ...).

Farben

Farben lassen jede Seite freundlicher und ansprechender erscheinen - oder eben das Gegenteil. Mit JavaScript lassen sich nette Effekte erzeugen um z.B. das Fenster blinken zu lassen oder besondere Stimmungen zu erzeugen.
Nehmen wir an der Besucher hat in einem Formular vergessen wichtige Eingaben zu hinterlassen. Anstatt ihn mit einem lästigen Alert-Fenster zu nerven könnten wir ihm auch durch ein Blinken des Feldes darauf aufmerksam machen, dass etwas nicht so ist, wie es sein sollte. Um das Feld blinken zu lassen braucht man prinzipiell nicht viel: Einige Timeouts und jeweils eine Änderung der Hintergrundfarbe. Wir wollen dazu eine kleine Funktion schreiben, die das Feld 3 mal rot blinken läßt.
Um anschließend den Normalzustand wieder herstellen zu können muss als erstes die Orginal-Farbe des Feldes gespeichert werden. Anschließend erzeugen wir 6 Timeouts in kurzen Abständen um das Blinken zu simulieren: rot normal rot normal rot normal. Die Funktion könnte dann z.B. so aussehen:

function blinke(f)
{
 var orginal = 'white';
 if(document.getElementById)
 {
  a = 'document.getElementById(''+f+'').style.backgroundColor';
  org = document.getElementById(f).style.backgroundColor;
 }
 else if(document.all)
 {
  a = 'document.all.'+f+'.style.backgroundColor';
  org = document.all[f].style.backgroundColor;
 }
 else
 {
  a = 'document.bgColor';
  org = document.bgColor;
 }
 window.setTimeout(a+' = "red";',100);
 window.setTimeout(a+' = "'+org+'";',300);
 window.setTimeout(a+' = "red";',500);
 window.setTimeout(a+' = "'+org+'";',700);
 window.setTimeout(a+' = "red";',900);
 window.setTimeout(a+' = "'+org+'";',1100);
}

Mit style.backgroundColor wird hier die Hintergrundfarbe des Feldes ausgelesen bzw. gesetzt. Da nicht alle Browser diese Eigenschaft unterstützen, lassen wir für diese einfach die ganze Seite blinken. Wie wir auf eine falsche Eingabe innerhalb eines Formulars reagieren haben wir ja bereits in einem früheren Abschnitt gelernt - es braucht also nur noch diese Funktion eingebaut zu werden. Beispiel:

//Formular überprüfen
if(document.form1.email.value = ''){blinke('emailfeld')}

Bitte beachten Sie, dass die Formularfelder mit einer eindeutigen ID versehen werden müssen um sie direkt ansprechen zu können.

Über uns

Stefan Wienströer

Wir entwickeln Webanwendungen mit viel Leidenschaft. Unser Wissen geben wir dabei gerne weiter. Mehr über a coding project

Auch interessant