Home
Flash & Swish
Swish Tutorials
Mp3 Player With Xml Playlist
Level: Professional Software:
Swish Max
Example: Mp3 Player With Xml Playlist
Click the buttons on the player to see their functions
Add the following code to Scene_1.
|
onFrame (1) {
stop(); playlist = new XML(); playlist.ignoreWhite = true; playlist.onLoad = function(success) { if (success) { _global.songname = []; _global.songband = []; _global.songfile = []; for (var i = 0; i _global.songname[i] = playlist.firstChild.childNodes[i].attributes.name; _global.songband[i] = playlist.firstChild.childNodes[i].attributes.band; _global.songfile[i] = playlist.firstChild.childNodes[i].attributes.file; // trace(songname[i]+" "+songfile[i]+" "+songband[i]); } } _root.createEmptyMovieClip("sound_mc", 1); _global.song_nr = random(songfile.length); _root.sound_mc.songStarter(songfile[song_nr], songname[song_nr], songband[song_nr]); }; MovieClip.prototype.songStarter = function(file, name, band) { if (this.sound_obj) { this.sound_obj.stop(); delete this.sound_obj; } this.sound_obj = new Sound(this); this.sound_obj.loadSound(file, true); this.onEnterFrame = function() { if (this.sound_obj.position>0) { delete this.onEnterFrame; this._parent.display_txt.text = name+" / "+band; timeInterval = setInterval(timer, 1000, this.sound_obj); } else { this._parent.display_txt.text = "loading..."; } }; this.sound_obj.onSoundComplete = function() { clearInterval(timeInterval); this._parent.timeDisplay_txt.text = "00:00"; (song_nr == songfile.length-1) ? _global.song_nr=0 : _global.song_nr++; _root.sound_mc.songStarter(songfile[song_nr], songname[song_nr], songband[song_nr]); }; this._parent.volume1.dragger.onPress = function() { startDragunlocked(this, 0, this._parent.volBG._width, this._y, this._y); this.onEnterFrame = function() { var p = (this._x/this._parent.volBG._width)*100; this._parent._parent.sound_mc.sound_obj.setVolume(p); }; }; this._parent.volume1.dragger.onRelease = function() { delete this.onEnterFrame; stopDrag(); }; this._parent.volume1.dragger.onReleaseOutside = function() { stopDrag(); }; }; btn_play.onRelease = function() { clearInterval(timeInterval); this._parent.timeDisplay_txt.text = "00:00"; this._parent.sound_mc.songStarter(songfile[song_nr], songname[song_nr], songband[song_nr]); }; btn_stop.onRelease = function() { clearInterval(timeInterval); this._parent.timeDisplay_txt.text = "00:00"; this._parent.sound_mc.sound_obj.stop(); }; btn_fw.onRelease = function() { clearInterval(timeInterval); this._parent.timeDisplay_txt.text = "00:00"; (song_nr == songfile.length-1) ? _global.song_nr=0 : _global.song_nr++; _root.sound_mc.songStarter(songfile[song_nr], songname[song_nr], songband[song_nr]); }; btn_rev.onRelease = function() { clearInterval(timeInterval); this._parent.timeDisplay_txt.text = "00:00"; (song_nr == 0) ? _global.song_nr=songfile.length-1 : _global.song_nr--; _root.sound_mc.songStarter(songfile[song_nr], songname[song_nr], songband[song_nr]); }; playlist.load("playlist.xml"); } function timer(sound_obj) { time = sound_obj.position/1000; min = Math.floor(time/60); min = (min<10) ? "0"+min : min; sec = Math.floor(time%60); sec = (sec<10) ? "0"+sec : sec; timeDisplay_txt.text = min+":"+sec; } |
You will need the following items for the code to work.
4 Buttons - Play, Stop, Next, Previous.
Name the buttons as follows. Play = btn_play, stop = btn_stop, next = btn_fw and finaly previous = btn_rev.
2 Dynamic text boxes.
1 named timeDisplay_txt and the other named display_txt
1 Sprite named volumeSlider
And also you will need an xml file for the playlist.
Next you will learn how to create the volume slider bar.
Example:Volume Slider Bar.
Use the mouse to turn the volume down on the sample above.
Lets learn how to create a volume slider for your mp3 player.
First of all create your bars using the rectangle tool until you have some formation that you are happy with.
Once you have what you want group the shapes as a shape and name mask.
Copy the shape right click and paste in place, rename the shape from mask to bars. Fig.1
Now using the rectangle tool, create a shape that is going to fit over your bars.
Make it the colour you wish your slider to be. name the shape sliderButton,
Right click on the shape and group as a sprite, name the sprite slider. Fig.2
Now using the rectangle tool again create a rectangle about 83 pixels x 7 pixels name the shape sliderTrack
Now select slider track and slider and group together as a sprite, name the sprite sliderBar. Fig.3
Add the following code to the sprite.
|
onLoad () {
audio = new Sound();{ startVol = 50;{ audio.setVolume(startVol);{ slider._x = (sliderTrack._width - slider._width) / (100 / startVol);{ sliderTrack._visible = false;{ }{ onEnterFrame() {{ if (isDragging) {{ audio.setVolume(Math.ceil(100 / ((sliderTrack._width - slider._width) / slider._x)));{ }{ }{ |
Now select slider bar, bars and mask group all together as a sprite.
Name the sprite volume Slider and check where is says use bottom object as mask.
That's it press play, you should now have a working volume control Fig.4
Example: XML Playlist.
Lets create an Xml playlist for your Mp3 Player
Open up notepad or any other html editing software, and type the following. Save it as playlist.xml.
You can add as many songs to the list as you please just by creating new lines.
Change the green text areas to point to where your own mp3s are, the name of the mp3 and the artist.
Example:
| <song name="Girls Just Wanna Have Fun" band="Cyndi Lauper" file="mp3s/p.mp3" /> |
Feel free to use my Xml Playlist code generator to help generate you playlist.
More Flash & Swish: Most Popular Materials | Fresh Materials
| More Swish Tutorials at FlashPerfection.com