Seiten

Dienstag, 20. April 2010

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>
Download Beispiel 3 komplettes Beispiel

Keine Kommentare:

Kommentar veröffentlichen