Flash: Audio-Datei in Webseite einbetten

Nachfolgend beschreibe ich Schritt für Schritt das Erzeugen und Einbetten einer Audiodatei als Flash-Objekt in eine Webseite.

1. Die Audiodatei am besten im WAV-Format z.B. mit einem Handy aufzeichnen (wenn möglich gleich als MP3 speichern).
2. Liegt bereits eine MP3-Datei vor, kann dieser Punkt übersprungen werden. Jetzt sollte ein geeigneter MP3-Encoder gefunden werden, hier kann man z.B. den WAV to MP3 Converter benutzen (Herstellerseite).
   Die Bedienung des Tools ist einfach, die gewünschten Dateien über Add hinzufügen und dann Start klicken.
3. Verringern Sie die Bit- und Samplerate (max.160kbs/44100Hz) wie im Screenshot dargestellt, sonst kann es später Probleme beim Import nach Flash geben.

Erforderliche Einstellungen im MP3-Encoder

1. Ist die MP3-Datei erzeugt geht es im Adobe Flash, mit der im unten angehängten Download enthaltenen FLA-Datei, weiter. Öffnen Sie die FLA-Datei und wählen Datei->Importieren->In Bibliothek importieren....
   Anschließend sollte Ihre MP3 in der Bibliothek (Bibliothek evtl. mit STRG + L oder Fenster->Bibliothek öffnen) sichtbar sein. Im Kontextmenü (rechte Maustaste) der Datei wählen Sie Eigenschaften und nehmen die im Screenshot dargestellten Einstellungen vor (sind die gezeigten Einstellungen nicht sichtbar klicken Sie auf die Schaltfläche Erweitert).

var soundToLoad:Sound = new Sound();
startSound_btn.onRelease = function() {
  var song = songName_txt.text;
  soundToLoad.attachSound("mp3");
  soundToLoad.start(0,1);
};

In der FLA-Datei integriertes Actionscript, welches die MP3-Datei beim Klick
auf das Symbol abspielt.

Aktivieren Sie die Checkbox Export für Actionscript
und tragen Sie unter Bezeichner "mp3" ein.

1. Sollte die endgültige Soundqualität nicht ausreichen, können Sie im oben gezeigten Dialogfeld unter dem Dropdown Komprimierung->MP3 weitere Einstellungen vornehmen.
2. Anschließend wird das Projekt mit den Standardeinstellungen über Datei->Veröffentlichen veröffentlicht, dabei sollte am Speicherort der FLA-Datei eine SWF- und eine HTML-Datei entstehen.
3. Jetzt muss die SWF-Datei auf den Webserver hochgeladen werden. Am UFZ benutzt man dazu das Bild- und Filearchiv im administrativen Intranetbereich. Man lädt hier die SWF-Datei hoch und erhält eine ID (z.B. 123456).
4. Jetzt muss man die hochgeladene Datei noch in der HTML-Datei referenzieren. Entweder die beim Veröffentlichen entstandene HTML-Datei verwenden oder den unten stehenden Quelltext (am UFZ wird für die Dateireferenz das Makro getfiler verwendet).

HTML-Quelltext zur Verwendung auf der eigenen Webseite

Achten Sie bitte darauf, dass die SWF-Datei zweimal referenziert werden muss, hier mit Hilfe des Makroaufrufs [§fgetfiler_123456§] (UFZ-Beispiel, ansonsten ohne das Makro z.B. http://www.foo.com/data/sample123456.swf).

Symbol anklicken um den Sound zu hören

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="37" height="41" id="erste_sahne" align="middle">
  <param name="allowScriptAccess" value="sameDomain" />
  <param name="movie" value="[§fgetfiler_123456§]" />
  <param name="quality" value="high" />
  <param name="bgcolor" value="#ffffff" />
  <embed src="[§fgetfiler_123456§]" quality="high" bgcolor="#ffffff" width="37" height="41" name="erste_sahne" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>

komplettes Beispiel

Flash: Audio-Datei in Webseite einbetten

Nachfolgend beschreibe ich Schritt für Schritt das Erzeugen und Einbetten einer Audiodatei als Flash-Objekt in eine Webseite.

1. Die Audiodatei am besten im WAV-Format z.B. mit einem Handy aufzeichnen (wenn möglich gleich als MP3 speichern).
2. Liegt bereits eine MP3-Datei vor, kann dieser Punkt übersprungen werden. Jetzt sollte ein geeigneter MP3-Encoder gefunden werden, hier kann man z.B. den WAV to MP3 Converter benutzen (Herstellerseite).
   Die Bedienung des Tools ist einfach, die gewünschten Dateien über Add hinzufügen und dann Start klicken.
3. Verringern Sie die Bit- und Samplerate (max.160kbs/44100Hz) wie im Screenshot dargestellt, sonst kann es später Probleme beim Import nach Flash geben.

Erforderliche Einstellungen im MP3-Encoder

1. Ist die MP3-Datei erzeugt geht es im Adobe Flash, mit der im unten angehängten Download enthaltenen FLA-Datei, weiter. Öffnen Sie die FLA-Datei und wählen Datei->Importieren->In Bibliothek importieren....
   Anschließend sollte Ihre MP3 in der Bibliothek (Bibliothek evtl. mit STRG + L oder Fenster->Bibliothek öffnen) sichtbar sein. Im Kontextmenü (rechte Maustaste) der Datei wählen Sie Eigenschaften und nehmen die im Screenshot dargestellten Einstellungen vor (sind die gezeigten Einstellungen nicht sichtbar klicken Sie auf die Schaltfläche Erweitert).

var soundToLoad:Sound = new Sound();
startSound_btn.onRelease = function() {
  var song = songName_txt.text;
  soundToLoad.attachSound("mp3");
  soundToLoad.start(0,1);
};

In der FLA-Datei integriertes Actionscript, welches die MP3-Datei beim Klick
auf das Symbol abspielt.

Aktivieren Sie die Checkbox Export für Actionscript
und tragen Sie unter Bezeichner "mp3" ein.

1. Sollte die endgültige Soundqualität nicht ausreichen, können Sie im oben gezeigten Dialogfeld unter dem Dropdown Komprimierung->MP3 weitere Einstellungen vornehmen.
2. Anschließend wird das Projekt mit den Standardeinstellungen über Datei->Veröffentlichen veröffentlicht, dabei sollte am Speicherort der FLA-Datei eine SWF- und eine HTML-Datei entstehen.
3. Jetzt muss die SWF-Datei auf den Webserver hochgeladen werden. Am UFZ benutzt man dazu das Bild- und Filearchiv im administrativen Intranetbereich. Man lädt hier die SWF-Datei hoch und erhält eine ID (z.B. 123456).
4. Jetzt muss man die hochgeladene Datei noch in der HTML-Datei referenzieren. Entweder die beim Veröffentlichen entstandene HTML-Datei verwenden oder den unten stehenden Quelltext (am UFZ wird für die Dateireferenz das Makro getfiler verwendet).

HTML-Quelltext zur Verwendung auf der eigenen Webseite

Achten Sie bitte darauf, dass die SWF-Datei zweimal referenziert werden muss, hier mit Hilfe des Makroaufrufs [§fgetfiler_123456§] (UFZ-Beispiel, ansonsten ohne das Makro z.B. http://www.foo.com/data/sample123456.swf).

Symbol anklicken um den Sound zu hören

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="37" height="41" id="erste_sahne" align="middle">
  <param name="allowScriptAccess" value="sameDomain" />
  <param name="movie" value="[§fgetfiler_123456§]" />
  <param name="quality" value="high" />
  <param name="bgcolor" value="#ffffff" />
  <embed src="[§fgetfiler_123456§]" quality="high" bgcolor="#ffffff" width="37" height="41" name="erste_sahne" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>

komplettes Beispiel

HTML/Javascript: Framegröße an Inhalte anpassen

Das folgende Beispiel kann genutzt werden, wenn man die Framegröße automatisch an wechselnde Inhaltgrößen anpassen möchte. Ein Anwendungsfall wären die UFZ-Adventskalender, welche sich als Popup öffnen und Kalender unterschiedlicher Größe zeigen. Frames sind hier deshalb eingesetzt weil sich das Menü zum Wechseln der Kalender in einem solchen befindet (siehe Screenshots).

komplettes Beispiel

HTML/Javascript: Framegröße an Inhalte anpassen

Das folgende Beispiel kann genutzt werden, wenn man die Framegröße automatisch an wechselnde Inhaltgrößen anpassen möchte. Ein Anwendungsfall wären die UFZ-Adventskalender, welche sich als Popup öffnen und Kalender unterschiedlicher Größe zeigen. Frames sind hier deshalb eingesetzt weil sich das Menü zum Wechseln der Kalender in einem solchen befindet (siehe Screenshots).

komplettes Beispiel

AJAX: HTML-Element für Autovervollständigung

Nachdem ich nach einigem Suchen kein stabiles Element für eine AJAX-Autocomplete Funktion gefunden habe, hier mein Mix aus einem Text- und Listenfeld.

Zum Test einfach etwas eingeben (ohne Datenanbindung).

Peter Peters Petersen Petersohn ⇑

var charCode = 0;      // Tastencode aus beiden Steuerelementen
var optText  = null;   // Textfeld
var optList  = null;   // Listenfeld
var topOpt   = false;  // Hilfsvariable zum Steuern des Uebergangs
var oldText  = "";     // Vorwert aus Textbox merken

function Init(obj)  {
  if(optList)  // Falls noch andere Liste offen
    //CloseList(false);  // IE hängt sich auf
    optList.style.display = 'none';
    
  optText = obj;
  optList = GetSelect(optText);  // SELECT-Element ermitteln
  // geerbte Breite des Eingabefeldes an SELECT-Element weitergebn
  optList.style.width = optText.offsetWidth + "px";
  // Variable charCode setzen
  document.onkeydown = GetKeyCode;
}
function OpenList()  {  
  oldText = optText.value;  // Wert für Abbruch merken

  if(charCode == 27)  {  // ESC
     optList.style.display = 'none';  // Liste wieder zu machen
     return;
  }
  if(charCode == 13)  {  // ESC
     optList.style.display = 'none';  // Liste wieder zu machen
     // Event valuefixed auslösen
     return;
  }  

  if(optText.value.length > 0)  {  // ist etwas im Textfeld
    topOpt = true;  // Pfeiltaste nach oben soll Textfeld aktivieren
     
    with(optList)  {
      // bei diesen Tasten Liste anzeigen
      if(
          charCode ==   8 ||  // Backspace
          charCode ==  40 ||  // Pfeil nach unten
          charCode ==  46 ||  // Delete
         (charCode >=  48 && charCode <= 57) ||  // 0-9
         (charCode >=  65 && charCode <= 90) ||  // a-z
          charCode == 109 ||  // - 
          charCode == 190 ||  // .
          charCode ==  59 ||  // ü
          charCode == 192 ||  // ö          
          charCode == 219 ||  // ß
          charCode == 222     // ä
        )  {
      style.display = 'block';  // Liste anzeigen
      selectedIndex = -1;       // nichts auswaehlen
    }
    }
  }
  else
    CloseList(false);  // wurde z.B. alles geloescht, Liste schliessen
  
  // Übergang zur Liste bei...  
  if(charCode == 40 &&  // ... Pfeiltaste nach unten
     optList.style.display == 'block')  {  // und Liste offen
     
    optText.value = optList.options[0].value;  // Textbox aktualisieren
    optList.focus();                // Liste aktivieren
    optList.selectedIndex = 0;      // ersten Eintrag auswählen 
  }
}
function CloseList(setOpt)  { 
  if(setOpt && (optList.options.length != optList.selectedIndex + 1))  {
    optText.value = optList.value;  // Listenwert ins Textfeld
    // Event valuefixed auslösen
  }
  else  {
    optText.value = oldText;
    oldText = null;
  }  
  optText.focus();  // Textfeld aktivieren
  optList.style.display = 'none';  // Liste ausschalten
}
function CancelSelect()  {
  optList.style.display = 'none';  // Liste ausschalten 
  optText.value = oldText;  // gemerkten Text einsetzen
  optText.focus();  // Textfeld aktivieren
}
function CtrlList()  {

  if(charCode == 13)  // Enter
     CloseList(true);
  if(charCode == 27)  // ESC
     CancelSelect();        
  if((charCode == 38 || charCode == 40) &&  // Pfeiltaste oben unten
     optList.options.length != optList.selectedIndex + 1)  // nicht letzte Option
     optText.value = optList.value; 
      
  if(charCode != 38)  // nicht Pfeiltaste nach oben
    topOpt = false;
        
  // Pfeiltaste nach oben und oberster Eintrag ausgewaehlt  
  if(charCode == 38 && optList.selectedIndex == 0)  {
    if(topOpt)  {  // beim ersten Mal noch nichts machen
      optList.style.display = 'none';  // Liste ausschalten
      optText.focus();  // Textfeld aktivieren 
    }
    else
      topOpt = true;  // um beim zweiten Pfeiltaste nach oben      
  }                   // Steuerelement zu wechseln
}
function GetKeyCode(e) {
  if (!e)
    e = window.event;
  charCode = e.keyCode;
}
function GetSelect(obj)  {
  var count = 0;
  do  {    
    var elem = obj.nextSibling;
    obj = elem;
    
    count++;
    if(count > 3) break;
  } while(elem.type != "select-one")
  
  return elem;
}
function FixValue()  {
  // TODO: Event valuefixed auslösen
  // aktives Element oder Tastencodes prüfen
}

CSS im HEAD:

input.autocomplete  {
 width: inherit;
}
input.autocomplete  {
  display: block;
}
select.autocomplete  {
  display: none;
  position: absolute;
}
#autocomplete1  {
 float: left;
 width: 200px;
}
#autocomplete2  {
   float: left;
 width: 200px;
}
.lastopt  {
  background-color: lightgray;
}

HTML im BODY:

<div id="autocomplete1">
  <input type="text" name="autocomplete2" class="autocomplete" onclick="this.focus();" onfocus="Init(this)" onkeyup="OpenList();" onblur="FixValue();" tabindex="2" />
  <select size="4" class="autocomplete" onclick="CloseList(true);" onkeyup="CtrlList();">
    <option value="Peter">Peter</option>
    <option value="Peters">Peters</option>
    <option value="Petersen">Petersen</option>
    <option value="Petersohn">Petersohn</option>
    <option class="lastopt" title="Schließen">⇑</option>
  </select>
</div>

komplettes Beispiel

AJAX: HTML-Element für Autovervollständigung

Nachdem ich nach einigem Suchen kein stabiles Element für eine AJAX-Autocomplete Funktion gefunden habe, hier mein Mix aus einem Text- und Listenfeld.

Zum Test einfach etwas eingeben (ohne Datenanbindung).

Peter Peters Petersen Petersohn ⇑

var charCode = 0;      // Tastencode aus beiden Steuerelementen
var optText  = null;   // Textfeld
var optList  = null;   // Listenfeld
var topOpt   = false;  // Hilfsvariable zum Steuern des Uebergangs
var oldText  = "";     // Vorwert aus Textbox merken

function Init(obj)  {
  if(optList)  // Falls noch andere Liste offen
    //CloseList(false);  // IE hängt sich auf
    optList.style.display = 'none';
    
  optText = obj;
  optList = GetSelect(optText);  // SELECT-Element ermitteln
  // geerbte Breite des Eingabefeldes an SELECT-Element weitergebn
  optList.style.width = optText.offsetWidth + "px";
  // Variable charCode setzen
  document.onkeydown = GetKeyCode;
}
function OpenList()  {  
  oldText = optText.value;  // Wert für Abbruch merken

  if(charCode == 27)  {  // ESC
     optList.style.display = 'none';  // Liste wieder zu machen
     return;
  }
  if(charCode == 13)  {  // ESC
     optList.style.display = 'none';  // Liste wieder zu machen
     // Event valuefixed auslösen
     return;
  }  

  if(optText.value.length > 0)  {  // ist etwas im Textfeld
    topOpt = true;  // Pfeiltaste nach oben soll Textfeld aktivieren
     
    with(optList)  {
      // bei diesen Tasten Liste anzeigen
      if(
          charCode ==   8 ||  // Backspace
          charCode ==  40 ||  // Pfeil nach unten
          charCode ==  46 ||  // Delete
         (charCode >=  48 && charCode <= 57) ||  // 0-9
         (charCode >=  65 && charCode <= 90) ||  // a-z
          charCode == 109 ||  // - 
          charCode == 190 ||  // .
          charCode ==  59 ||  // ü
          charCode == 192 ||  // ö          
          charCode == 219 ||  // ß
          charCode == 222     // ä
        )  {
      style.display = 'block';  // Liste anzeigen
      selectedIndex = -1;       // nichts auswaehlen
    }
    }
  }
  else
    CloseList(false);  // wurde z.B. alles geloescht, Liste schliessen
  
  // Übergang zur Liste bei...  
  if(charCode == 40 &&  // ... Pfeiltaste nach unten
     optList.style.display == 'block')  {  // und Liste offen
     
    optText.value = optList.options[0].value;  // Textbox aktualisieren
    optList.focus();                // Liste aktivieren
    optList.selectedIndex = 0;      // ersten Eintrag auswählen 
  }
}
function CloseList(setOpt)  { 
  if(setOpt && (optList.options.length != optList.selectedIndex + 1))  {
    optText.value = optList.value;  // Listenwert ins Textfeld
    // Event valuefixed auslösen
  }
  else  {
    optText.value = oldText;
    oldText = null;
  }  
  optText.focus();  // Textfeld aktivieren
  optList.style.display = 'none';  // Liste ausschalten
}
function CancelSelect()  {
  optList.style.display = 'none';  // Liste ausschalten 
  optText.value = oldText;  // gemerkten Text einsetzen
  optText.focus();  // Textfeld aktivieren
}
function CtrlList()  {

  if(charCode == 13)  // Enter
     CloseList(true);
  if(charCode == 27)  // ESC
     CancelSelect();        
  if((charCode == 38 || charCode == 40) &&  // Pfeiltaste oben unten
     optList.options.length != optList.selectedIndex + 1)  // nicht letzte Option
     optText.value = optList.value; 
      
  if(charCode != 38)  // nicht Pfeiltaste nach oben
    topOpt = false;
        
  // Pfeiltaste nach oben und oberster Eintrag ausgewaehlt  
  if(charCode == 38 && optList.selectedIndex == 0)  {
    if(topOpt)  {  // beim ersten Mal noch nichts machen
      optList.style.display = 'none';  // Liste ausschalten
      optText.focus();  // Textfeld aktivieren 
    }
    else
      topOpt = true;  // um beim zweiten Pfeiltaste nach oben      
  }                   // Steuerelement zu wechseln
}
function GetKeyCode(e) {
  if (!e)
    e = window.event;
  charCode = e.keyCode;
}
function GetSelect(obj)  {
  var count = 0;
  do  {    
    var elem = obj.nextSibling;
    obj = elem;
    
    count++;
    if(count > 3) break;
  } while(elem.type != "select-one")
  
  return elem;
}
function FixValue()  {
  // TODO: Event valuefixed auslösen
  // aktives Element oder Tastencodes prüfen
}

CSS im HEAD:

input.autocomplete  {
 width: inherit;
}
input.autocomplete  {
  display: block;
}
select.autocomplete  {
  display: none;
  position: absolute;
}
#autocomplete1  {
 float: left;
 width: 200px;
}
#autocomplete2  {
   float: left;
 width: 200px;
}
.lastopt  {
  background-color: lightgray;
}

HTML im BODY:

<div id="autocomplete1">
  <input type="text" name="autocomplete2" class="autocomplete" onclick="this.focus();" onfocus="Init(this)" onkeyup="OpenList();" onblur="FixValue();" tabindex="2" />
  <select size="4" class="autocomplete" onclick="CloseList(true);" onkeyup="CtrlList();">
    <option value="Peter">Peter</option>
    <option value="Peters">Peters</option>
    <option value="Petersen">Petersen</option>
    <option value="Petersohn">Petersohn</option>
    <option class="lastopt" title="Schließen">⇑</option>
  </select>
</div>

komplettes Beispiel

<fieldset> Bug im Firefox

Nur eine Seite beim Ausdruck!

Beim Firefox ab Version 3 wird beim Druck von durch <fieldset> eingefassten Inhalten, nur die erste Seite ausgedruckt.
Wir haben deshalb das Fieldset im Contentbereich unserer Seiten (u.a. www.ufz.de) entfernen müssen, da es momentan keinen Workaround gibt.
Bugzilla@Mozilla – Bug 471015

<fieldset> Bug im Firefox

Nur eine Seite beim Ausdruck!

Beim Firefox ab Version 3 wird beim Druck von durch <fieldset> eingefassten Inhalten, nur die erste Seite ausgedruckt.
Wir haben deshalb das Fieldset im Contentbereich unserer Seiten (u.a. www.ufz.de) entfernen müssen, da es momentan keinen Workaround gibt.
Bugzilla@Mozilla – Bug 471015