This mp3 player loads a playlist from an XML file using the GET parameter playlist. The GET parameter autostart determines whether or not to start playing the music as soon as the player loads. The quality of the sample songs has been reduced to lower bandwidth use and to avoid copyright issues.
Player Features:
Player Features:
- Playlist loaded from an xml file
- The ability to have music autostart or not on load
- Full volume control
- Alternating play/pause button
- Buttons to advance to the previous or next song
- Scrub bar to advance to any position in a song
- Scrolling text
- Scrollbar for the playlist
- Clicking a playlist item starts that song
- Autostart of the next song after a song has finished
<object data="http://www.somesite.com/musicplayer.swf?autostart=true&playlist=http://www.somesite.com/playlist.xml" type="application/x-shockwave-flash" width="300" height="200"><param name="movie" value="http://www.somesite.com/musicplayer.swf?autostart=true&playlist=http://www.somesite.com/playlist.xml"/></object>
Example XML:
<?xml version="1.0" encoding="UTF-8"?>
<playlist version="1" xmlns="http://xspf.org/ns/0/">
<trackList>
<track><creator>Iron Maiden</creator><title>Fear of the Dark</title><location>http://www.bezzmedia.com/swfspot/resources/42-song3.mp3</location></track>
<track><creator>Social Distortion</creator><title>Ring of Fire</title><location>http://www.bezzmedia.com/swfspot/resources/42-song4.mp3</location></track>
</trackList>
</playlist> Download the files below:
Download XML File
Download Source File
Download the built Mp3 Player
===============================================================
Example: MP3 Playlist This example will demonstrate editing XML from within Flash using an XML based playlist which technically could be sent back to a server and saved for later use. This particular example will not actually be doing any saving, but you will be able to see the XML as its edited in an output window.
The XML used is a simple, generic playlist example containing a title, artist and file path within attribute values of song elements.
mp3_playlist.xml
Here's what you get:
<?xml version="1.0" ?>
- <song title="Chocobo Piano Loop" artist="DJ_XBrav" src="mp3s/NG5402.mp3" />
- <song title="House Of Kalm" artist="ProfitZ" src="mp3s/NG7890.mp3" />
- <song title="Strobe Riding" artist="Dreamscaper" src="mp3s/NG3221.mp3" />
- <song title="Awakening" artist="Evil Dog" src="mp3s/NG3413.mp3" />
- <song title="blue eyes - limp RMX" artist="czer323" src="mp3s/NG4348.mp3"/>
- <song title="Little Organ Diddy" artist="Dustball" src="mp3s/NG10179.mp3"/>
This is loaded into the player giving us a list of songs by name which can be selected and played.
[ mp3 player with playlist ]
Download ZIP
Editing XML With ActionScript
I won't get into the details of how everything works for this example. That might get a little too involved. I'll just cover that which deals with the manipulation of the XML. So starting with your basic XML instance definition, you get:
- var playlist_xml = new XML();
- playlist_xml.ignoreWhite = true;
- playlist_xml.onLoad = function(success){
- if (success){
- GenerateSongListing(this, playlist_mc);
- }else trace("Error loading XML file");
- }
- playlist_xml.load("mp3_playlist.xml");
The button actions allow both the selection of a song and the reordering with in the list (note: some actions. like onPress, are assigned to a button within a playlist item movie clip while others, like onMouseMove, are assigned to the movie clip itself). Song selection is performed on a simple click when there was no dragging of the item, whereas reordering is performed when dragging has been detected. A simple moved variable within each item is set to record this.
- this.moved = true;
- if (!this._parent.moved){
- SetSong(this._parent.node);
- }
- if (this.moved){
- this.node.moveBefore(over_node);
- GenerateSongListing(playlist_xml, playlist_mc);
- }
- XMLNode.prototype.moveBefore = function(beforeNode){
- if (this == beforeNode) return (0);
- beforeNode.parentNode.insertBefore( this.cloneNode(true), beforeNode);
- this.removeNode();
- }
This lets us rearrange the order of the nodes within the playlist XML directly as opposed to using an array as was done with the grades sorting example; the advantage being that this XML could then be re-saved and new order maintained.
=======================================================================
If you haven’t seen Viewzi, go check it out right now. Its a great way to view your search results. My favorite view is the “song view” made by Joshua Sterns. Well I saw this and thought everyone should have a beautiful and easy to use interface like that for their own content. So I made one and am now releasing it to you. Its very simple and it resizes to fit almost any size. Make it full screen or make it part of a page. All you have to do is make a playlist that is structed like this:
<?xml version=”1.0″ ?>
<playlist>
<song title=”Chocobo Piano Loop” artist=”DJ_XBrav” src=”mp3s/NG5402.mp3″ />
<song title=”House Of Kalm” artist=”ProfitZ” src=”mp3s/NG7890.mp3″ />
</playlist>
And pass it in through the Flashvars through the HTML. Here is an example of that code:
<param name="flashvars" value="xmlpath=mp3_playlist.xml" />
Still not sure how to do it then check out the example and view the source of the page. You can also download the source below and change it as much as you want.
Enjoy!
=======================================================================
MP3 Player FX
Download tại đây
=======================================================================
This media player plays flv, mp3, jpg, gif, png, and swf files using either an XML playlist or by directly inputting the file using a GET parameter. It is written in Actionscript 3 using Flash CS3. The full player is under 20K bytes.
The control panel can either fade away after 2 seconds of no mouse movement or can be docked and have the content adjusted for its size. There is a play/pause button with alternating graphics. A volume slider adjusts the volume on mouse click or drag. A fullscreen button alternates the video between normal size and fullscreen mode. The previous and next track buttons change the current track. When the user mouse overs the PL button, the playlist is shown at half opacity. When the PL button is pressed, the opacity is set to full. A timer shows the current progress of the current file, as well as its length. The progress bar can be pressed at any position, or the slider can be clicked and dragged to a desired position.
The playlist slider shows a graphic, title, and artist for each file in the playlist. If no graphic is selected, a default graphic will be used for each type of file. The slider moves according to the mouse x position. Each block is highlighted when the user mouse overs it.
When an mp3 file is selected, the image is displayed in the top left corner, the artist and title are displayed in the top right quadrant (left aligned), and a visualizer is displayed in the bottom half. When an flv, jpg, gif, png, or swf file is selected, the file is scaled to fit the media player without distorting its aspect ratio.
Example code for the player:
<object data="52-mediaplayercs3.swf?playmedia=52-playlist.xml&autoplay=false&dockcontrols=false&panelcolor=000000"
type="application/x-shockwave-flash" width="480" height="360" >
<param name="movie" value="52-mediaplayercs3.swf?playmedia=52-playlist.xml&autoplay=false&dockcontrols=false&panelcolor=000000" />
<param name="allowFullScreen" value="true"/>
</object>
The xml playlist format follows the XSPF standard. Example:
<?xml version="1.0" encoding="UTF-8"?> <playlist version="1" xmlns="http://xspf.org/ns/0/"> <trackList> <track> <creator>The Beatles</creator> <title>Strawberry Fields</title> <location>http://www.beatles.com/strawberryfields.mp3</location> </track> <track> <creator>Leonardo DaVinci</creator> <title>Mona Lisa</title> <location>http://www.fancymuseum.com/monalisa.jpg</location> <duration>10000</duration> </track> <track> <creator>John Bezanis</creator> <title>Growing Tree</title> <location>http://www.bezzmedia.com/growingtree.swf</location> <duration>2000000</duration> </track> </trackList> </playlist>
When adding an image or swf file to the playlist, duration can be specified. Duration is measured in milliseconds (1000 milliseconds=1 second). If no duration is specified, the duration defaults to 5 seconds.
There are five variables that can be changed. Each variable has to be changed in both locations in the code. The blue one is the location of the media player on your server. playmedia refers to the file that will be played (xml playlist, mp3, flv, jpg, png, or gif). autoplay refers to whether or not the player will automatically start playback. dockcontrols specifies whether the control panel fades away after 2 seconds of no movement, or if it remains visible and content is scaled so it does not reach below the control panel y position. panelcolor changes the tint of the control panel. It is an RGB hex number. The height and width of the player can be changed as well. In this example, the width is set to 480 and the height is set to 360.
Example XML playlist:
Download Example XML Playlist
The media player is available as a built SWF or the source FLA:
Download Source File
Download Built Media Player
DEMO
(Khoa Nguyễn - Tổng Hợp)
0 nhận xét:
Đăng nhận xét