NOF-Forum  |  Referenzen  |  Kontakt  |  Impressum  |  Sitemap

NetObjects Fusion - Tutorials
NOF Tutorials und Hilfe von Thomas Frei-Herrmann

Flash Musik Player Beispiel

Hier noch eine andere Alternative.


Hier geht es zum Download des “JW FLV Media Player

http://www.longtailvideo.com/players/jw-flv-player/

Bitte beachtet, dass eine kostenlose Nutzung dieses Players, ohne käuflich erworbene Lizenz, nur für private Seiten erlaubt ist. guckt Euch auch diesen Player mal an.

Musik von MusicFillingStation.de

Mein Player

 

Legt Euch einen Ordner für die Skripte des Player an, den Ihr z.B.:

musicplayer

nennt. Diesen Ordner legt Ihr Euch einmal im Ordner der Lokalen Publizierung an und auch einmal im Stammverzeichnis Eures Servers.

Dann kopiert folgende Dateien, die Ihr nach dem Download erhalten habt, in diese Ordner.

1) player.swf
2) swfobject.js

Für diesen Player (oben) fügt Ihr die Codes, wie weiter unten beschrieben, ein.

Ich habe hier die MP3 Datei in folgenden Ordner kopiert:

assets/multimedia/

Natürlich muss diese MP3 wieder sowohl in der “Lokalen Publizierung” als auch auf dem Server in diesen Ordner kopiert werden.

Bitte achtet auf die korrekte relative Pfadangabe (../). Solltet Ihr den Player auf der Startseite einbinden wollen, müsst Ihr die beiden Punkte weglassen, da sich diese Startseite (index.html) ja bereits im Stammverzeichnis befindet.

1) Der unten stehenden Code muss in die HTML des Layouts.

> auf das Layout klicken > im Fenster “Layout-Eigenschaften” auf Buttom > HTML klicken
> Code hier kopieren und “Zwischen Head Tags” (NOF 11 “HeadInner”) einfügen

<script type="text/javascript"
 src="../musicplayer/swfobject.js"></script>

2) Um die Player auf Eurer Seite einzubinden, zieht Ihr bitte lediglich ein Textfeld auf, demarkiert es und markiert es anschließend durch einfachen Klick.

Klickt nun im Fenster “Text-Eigenschaften” auf den Button “HTML” und fügt den unten stehenden Code “Vor dem Tag” (NOF 11 “Vorher”) ein.

Natürlich müsst Ihr Eure eigene MP3 Datei anstelle meiner Datei “lovely.mp3” im Skript eintragen und die Parameter Euren Bedürfnissen anpassen, wie z.B.:

autostart=false dann eben eventuell auf autostart=true setzen, damit die Musik z.B. gleich anfängt zu spielen.

<p>

<div id="player">Mein Player</div>

<script type="text/javascript">
var so = new
 SWFObject('../musicplayer/player.swf','mpl','300','20','9');
so.addParam('allowscriptaccess','always');
so.addParam('allowfullscreen','false');
so.addParam('flashvars','&file=../assets/multimedia/lovely.mp
3&autostart=false&repeat=always');
so.write('player');
</script>

</p>

Die Seite des Players hat eine komfortable Setup-Seite, auf der Ihr die Konfiguration sehr einfach einstellen lassen könnt. Hinterher müsst Ihr aber die Skripte entsprechend meiner Beispiele noch auf Eure Ordner und Dateien anpassen.

http://www.longtailvideo.com/support/jw-player-setup-wizard

Es gibt sehr viele Möglichkeiten diesen Player einzusetzen. Ich beschreibe hier mal nur zwei, den Player für einen einzelnen Song (oben) und den folgenden Multi-Player:

Mein Multi-Player

 

1) Für diesen Player muss der unten stehenden Code ebenfalls in die HTML des Layouts. Wollt Ihr
(wie ich hier) beide Player auf einer Seite haben, müssen beide Skripte in die HTML des Layouts und die Ordner müssen verschiedene Namen haben. Ebenfalls muss die id des zusätzlichen Players dann unterschiedlich sein (hier = “player2”).

Hier Ordner:

musicplayermulti

> auf das Layout klicken > im Fenster “Layout-Eigenschaften” auf Buttom > HTML klicken
> Code hier kopieren und “Zwischen Head Tags” (NOF 11 “HeadInner”) einfügen.

<script type="text/javascript"
 src="../musicplayermulti/swfobject.js"></script>

2) Um diesen Player auf Eurer Seite einzubinden, zieht Ihr bitte wieder ein Textfeld auf, demarkiert es und markiert es anschließend durch einfachen Klick.

Klickt nun im Fenster “Text-Eigenschaften” auf den Button “HTML” und fügt den unten stehenden Code “Vor dem Tag” (NOF 11 “Vorher”) ein.

<p>
 <div id="player2">Mein Multi-Player</div>
 <script type="text/javascript">
var so = new
 SWFObject('../musicplayermulti/player.swf','mpl','500','250',
'7');
so.addParam('allowscriptaccess','always');so.addParam('allowf
ullscreen','true');
so.addParam('flashvars','&file=../musicplayermulti/playlist.x
ml&backcolor=8F8F8F&frontcolor=ffffff&screencolor=B8B8B8&playl
istsize=280&streamer=lighttpd&playlist=right');
so.write('player2');</script>
</p>

... auch in dem obigen Skrip kann man wieder sehr viele verschiedene Parameter für die Darstellung des Players wählen, die man sich am besten auf der Setup-Seite vom JW-Player anguckt.

Für diesen Player benötigt man noch eine XML Konfigurations-Datei, wie Ihr oben im Skript erkennen könnt, habe ich diese selbst erstellt und diese XML Datei heißt:

playlist.xml

Diese Datei sieht so aus:

<?xml version="1.0" encoding="utf-8" ?>
 <playlist version="1" xmlns="http://xspf.org/ns/0/">
  <trackList>
   <track>
   <title>Lovely</title>
   <creator>MusicFillingStation</creator>
   <location>../musicplayermulti/lovely.mp3</location>
   <image>../musicplayermulti/Blumen1.jpg</image>
   </track>
  <track>
   <title>Citylights</title>
   <creator>MusicFillingStation</creator>
   <location>../musicplayermulti/citylights.mp3</location>
   <image>../musicplayermulti/Blumen2.jpg</image>
  </track>
  <track>
   <title>Alsiestamar</title>
   <creator>MusicFillingStation</creator>
   <location>../musicplayermulti/alsiestamar.mp3</location>
   <image>../musicplayermulti/Blumen3.jpg</image>
  </track>
  <track>
   <title>TomTomBrazil</title>
   <creator>MusicFillingStation</creator>
   <location>../musicplayermulti/TomTomBrazil.mp3</location>
   <image>../musicplayermulti/Blumen4.jpg</image>
  </track>
  <track>
   <title>Salizaapicante</title>
   <creator>MusicFillingStation</creator>
   <location>../musicplayermulti/salizaapicante.mp3</location>
   <image>../musicplayermulti/Blumen5.jpg</image>
  </track>
 </trackList>
</playlist>
 

... wie Ihr schon in der XML Datei oben erkennen könnt gehören dann alle Fotos
(hier die Blumen), sowie alle MP3 Dateien ebenfalls (in meinem Beispiel) in den Ordner:

musicplayermulti

und natürlich auch diese XML-Datei selbst



Bitte guckt Euch auch mal den MP3-PLayer von Zappe an.


Viel Erfolg!

zurück

 

Tutorials von Thomas Frei-Herrmann

diese Seite weiter empfehlen


Counter Statistik