Heute wollen wir einen dynamischen MP3 Player in Flash programmieren. Mit dynamisch ist gemeint, dass er nicht nur einfach ein spezifisches Lied abspielen kann, sondern das Lied dynamisch per Parameter übergeben wird.

Vorkentnisse:

• Umgang mit Flash
• Erstellen von Buttons
• etwas HTML

Ziele:

• Parameter an Flash übergeben
• Arbeiten mit Sound
• ID3 Tags auslesen

Hier die Vorschau unseres Endergebnisses:

Der Player lädt eine Datei mit dem Namen “song3.mp3″ die ihm dynamisch übergeben wird. Dabei liest er die ID3 Tags und zeigt diese dann an.

Bevor mit dem eigentlichen Teil anfangen können müssen zuerst ein paar grundlegende Sachen erstellt werden. Wir müssen uns also überlegen was der Player genau “braucht”.

In diesem Fall sind das folgende Dinge:

• einen Play-Button
• einen Pause-Button
• einen Stop-Button
• ein Textfeld indem Name + Artist angezeigt wird
• ein Textfeld indem die Länge und die Aktuelle Position des Lieds angezeigt wird

Öffnet ein neues Flash Dokument, mit der Grösse euers Players (in meinem Fall 301×21px) und erstellt danach folgende Dinge im erstenSchlüsselbild:

• Play-Button: play_btn
• Stop-Button: stop_btn
• Pause-Button: pause_btn
• Artist/Titel-Textfeld: track_title
• Position/Länge-Textfeld: track_length

Achtet darauf dass ihr “Dynamische Textfelder” erstellt!
So oder ähnlich kann euer Flash Movie nun aussehen:

Natürlich könnt ihr euren Player so designen wie ihr wollt, ich habe mich für ein eher schlichteres Design ohne viel Schnickschnack entschieden.

Nun kommen wir zum Code Teil, fügt folgenden Code in das Hauptframe ein:

[cc lang="Actionscript"]
this._lockroot = true;
var snd = new Sound();
snd.loadSound(_root.my_song, true);
[/cc]

Mit this._lockroot = true bewirken wir, dass wenn der Flashfilm in einen anderen Flashfilm reingeladen wird, die Variablen die mit “_root.” aufgerufen werden immer noch funktionieren. Dies ist zwar nicht 100% nötig, doch zur Sicherheit sollte man dies einfügen.

var snd = new Sound() erzeugt ein neues Sound Objekt in welches wir dann mit snd.loadSound(_root.my_song, true) einen Sound laden. Der erste Parameter ist die Variable “_root.my_song” doch halt, die Varible exisitert ja gar nicht! Dies kommt davon, dass diese Varible erst später beim Einbinden des Flashfilms übergeben wird. Mit dem zweiten Parameter bestimmen wir ob der Sound gestreamt werden soll oder nicht. In unserem Fall soll er gestreamt werden also geben wir “true” ein.

Nun kommen wir zu der Programmierung der Buttons:

[cc lang="Actionscript"]
_root.play_btn.onRelease = function () {
if(_root.pos != undefined) {
_root.snd.start(_root.pos / 1000,0)
} else {
_root.snd.start(0,0);
}
}
this.pause_btn.onRelease = function () {
_root.pos = _root.snd.position
_root.snd.stop();
}
this.stop_btn.onRelease = function() {
_root.snd.stop();
_root.pos = 0;
}
[/cc]

Eigentlich ist dieser Code ganz simpel, wenn ein Button losgelassen wird, wird der Sound entweder abgespielt oder gestoppt. Bei dem Play-Button fügen wir zusätzlich noch eine if Abfrage ein die kontrolliert ob die Variable _root.pos exisitert. Dies benötigen wir für die Pause-Funktion. Wenn der Pause Button losgelassen wird, wird der Sound gestoppt und die aktuelle Position im Sound gespeichert. Dies lesen wir beim Abspielen wieder aus, darum auch die if Abfrage. _root.snd.start(_root.pos / 1000,0) springt also zu der Stelle die wir beim Pause-Drücken gespeichert haben und spielt dann den Sound ab. Der Wert wird aber vorher noch durch 1000 geteilt, da der Wert in Millisekunden gespeichert wurde, man für die start() Funktion aber Sekunden braucht. Die “0″ steht übrigens dafür wie oft der Sound wiederholt werden soll, in unserem Fall gar nicht, also 0.
Speziell beim Stop Button ist noch, dass die Position auf 0 gesetzt wird, damit das Lied auch ja wieder von vorne gestartet wird.

Eine nützliche Funktion von Flash ist, dass man ID3 Tags auslesen kann. Genau diese Funktion werden wir uns nun zu nutzen machen.

[cc lang="Actionscript"]
_root.snd.onID3 = function() {
songname = _root.snd.id3.songname
artist = _root.snd.id3.artist
_root.laenge =_root.snd.duration
_root.Secs = Math.floor (_root.laenge / 1000);
_root.Mins = Math.floor (_root.laenge / ( 1000 * 60));
_root.Hours = Math.floor (_root.laenge / ( 1000 * 60 * 60));
_root.Secs = _root.Secs – (_root.Mins * 60)
_root.Mins = _root.Mins – (_root.Hours * 60)
_root.track_title.text = artist + ” – ” + songname
_root.track_length.text = _root.Mins2 + “:” + _root.Secs2 + ” / ” + _root.Mins + “:” + _root.Secs
}
[/cc]

Es sieht wieder einmal komplizierter aus, als es eigentlich ist. Die “_root.snd.onID3” Funktion wird dann aufgerufen, wenn die ID3 Tags für ein Lied ausgelesen werden können, dazu muss das Lied zu einem bestimmten Teil geladen sein, die ID3 Tags werden also nicht gleich am Anfang angezeigt werden.
Zuerst speichern wir nun den Songname und den Artist in zwei verschiedenen Variablen. Zusätzlich könnte man noch viele Dinge mehr auslesen wie zum Beispiel: Genre, Album, Erscheinungsjahr etc. doch da ich den Player möglichst klein halten will, lassen wir das.

Nun kommen einige Berechnungen. Mit  ”_root.snd.duration” wir die Länge des Liedes in Millisekunden ausgegeben. Nachfolgend werden die Millisekunden dann umgerechnet so dass wir sie ganz einfach darstellen können. Schlussendlich werden die Informationen mit “_root.track_title.text = artist + ” – ” + songname” und “_root.track_length.text = _root.Mins2 + “:” + _root.Secs2 + ” / ” + _root.Mins + “:” + _root.Secs” in den Textfeldern angezeigt. Wie ihr seht werden da die Variablen “_root.Mins2” und “_root.Secs2” verwendet, diese Variablen haben wir aber noch nicht definiert, sie sollen die aktuelle Position des Liedes anzeigen.

Und hier kommt auch schon der Code dazu:

[cc lang="Actionscript"]
_root.onEnterFrame = function() {
_root.laenge2 = _root.snd.position
_root.Secs2 = Math.floor (_root.laenge2 / 1000);
_root.Mins2 = Math.floor (_root.laenge2 / ( 1000 * 60));
_root.Hours2 = Math.floor (_root.laenge2 / ( 1000 * 60 * 60));
_root.Secs2 = _root.Secs2 – (_root.Mins2 * 60)
_root.Mins2 = _root.Mins2 – (_root.Hours2 * 60)
_root.track_length.text = _root.Mins2 + “:” + _root.Secs2 + ” / ” + _root.Mins + “:” + _root.Secs
}
[/cc]

Eigentlich ist das so ziemlich das selbe wie schon oben, nur eben mit der Aktuelle Position die wir mit “_root.snd.position” abfragen können. Danach wird das ganze wieder umgewandelt und schlussendlich in dem Textfeld angezeigt. Der Hauptunterschied besteht dabei, dass das ganze in der “onEnterFrame” Funktion steht und so also immer ausgeführt wird, da sich die Position beim Abspielen auch fortlaufend ändert.

So, der Player ist fertig, doch ihr werdet feststellen, dass wenn ihr ihn testet, nichts passiert und nur eine Fehlermeldung ausgegeben wird, in der steht, dass die Datei nicht geladen werden konnte. Das kommt davon, dass der Player noch nicht weiss welchen Song er laden soll, da er die Variable “_root.my_song” noch nicht übermittelt bekommen hat.

Dies passiert beim einbinden, öffnet nun ein leeres HTML Dokument und fügt folgenden Code ein:

<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”de” lang=”de”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>simple_mp3</title>
</head>
<body bgcolor=”#ffffff”>
<object classid=”clsid:d27cdb6e-ae6d-11cf-96b8-444553540000″ codebase=”http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0″ width=”300″ height=”21″ id=”simple_mp3″ align=”middle”>
<param name=”allowScriptAccess” value=”sameDomain” />
<param name=”allowFullScreen” value=”false” />
<param name=”movie” value=”simple_mp3.swf?my_song=song1.mp3″ />
<param name=”quality” value=”high” /><param name=”bgcolor” value=”#ffffff” />
<embed src=”simple_mp3.swf?my_song=song1.mp3″ quality=”high” bgcolor=”#ffffff” width=”300″ height=”20″ name=”simple_mp3″ align=”middle” allowScriptAccess=”sameDomain” allowFullScreen=”false” type=”application/x-shockwave-flash” pluginspage=”http://www.macromedia.com/go/getflashplayer” />
</object>
</body>
</html>

Wichtig ist hierbei nur diese beiden Teile: “<param name=”movie” value=”simple_mp3.swf?my_song=song1.mp3″ />” und “embed src=”simple_mp3.swf?my_song=song1.mp3″” denn hier wird unsere Variable übermittelt. Nach dem Fragezeichen kommt zuerst der Name der Variable, in unserem Falle “my_song” und anschliessend den Wert. Hier wird dem Player gesagt er soll eine Datei mit dem Namen “song1.mp3” laden. Natürlich kann der Player jede erdenklicke MP3 Datei abspielen, auch wenn sie auf einem externen Webserver liegt.

Probiert das ganze nun aus, indem ihr die HTML Datei in eurem Wunschbrowser öffnet. Nun sollte der Song abgespielt werden, wenn nicht überprüft ob der Song auch wirklich zu finden ist und ob ihr den richtigen Pfad angegeben habt.

Download Source

Vielen Dank fürs Lesen postet euere Meinung/Kritk/Fragen doch in den Comments

MFG
Michael