By common request from Dreado, which asked me how to display cover art on the mp3 player, I present you a quick tutorial about how to complete this task.
The complete code relies on the previous MP3 player (part 3) since I’m sure there are people around which kept the original code,
so let’s get started, for this example I’m using 3 pictures of the songs I use to test the player
Our first step relies on creating an empty movieclip, for that just press CTRL+F8 to create a new movieclip, give it a recognizable name and drag it out to the stage, as soon as it has been placed give it an unique instance name, in this case I’m using “picLoader” since it’s an empty movieclip, you need to keep in mind that you will only see a white dot on stage.
Our images are 160x160px so we need to resize our stage accordingly, in our case I’m using a stage size of 370x200px and picLoader MC is positioned at 203:37xy, freely I just created a small border around the “imaginary” cover just for layout purposes.
Our IDE work has been done, now let’s have a look at our XML, we don’t need to change it much, since we are only adding a new attribute to it, so extend your playlist.xml accordingly to:
example:
1 | song name ="Rip out the wings" band ="HIM" file="track1.mp3" cover="him.jpg" |
As you see I just added a new attribute called cover with the name of the image I want to display.
Last but not least we need to create some more lines of code so that everything works out properly therefore let’s go back to flash select our actions layer press F9 and write a new Array responsible for handling our covers
1 2 3 4 | ... _global.songcover = []; ... _global.songcover[i] = playlist.firstChild.childNodes[i].attributes.cover; |
in our _root.button function, the function responsible for the display of the tracks in button form, add this line to the end of the block of it:
1 | loadMovie(songcover[this.id], picLoader); |
Lastly we create a function at the end of our code that loads the new cover everytime a control button is pressed or the song is finished.
1 2 3 | function updateCover(){ loadMovie(songcover[song_nr], picloader); } |
Now you just need to add to reverse and forward button as well to our songStart call on line 40
1 | updateCover(); |
That’s it, we’re done, here the last screenshot to show you how my example and if you followed all the tutorials how it should look like
As always I’m happy to help you in case of questions, leave a comment or write me an email
If you missed any of the lines of code, here the complete code for your review.
COMPLETE CODE
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 | stop(); title_txt.autoSize = "left"; timeDisplay_txt.autoSize = "left"; toolTip._visible = false; var amountLoaded:Number; var duration:Number; playlist = new XML(); playlist.ignoreWhite = true; playlist.onLoad = function(success) { if (success) { _global.songname = []; _global.songband = []; _global.songfile = []; _global.songcover = []; for (var i = 0; i<playlist .firstChild.childNodes.length; 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; _global.songcover[i] = playlist.firstChild.childNodes[i].attributes.cover; attachMovie("butTemp","but"+i,i+50); eval("but"+i).id=i; _root["but"+i]._x = 5; _root["but"+i]._y = 40 + (i*15); _root["but"+i].but_txt.text = songname[i]; if (i >= 3){ _root["but"+i]._x = 160 _root["but"+i]._y = -5 + (i*15); } _root["but"+i].onRelease = function(){ clearInterval(timeInterval); _root.timeDisplay_txt.text = "00:00/00:00"; _root.sound_mc.songStarter(songfile[this.id]); loadMovie(songcover[this.id], picLoader); } } } _root.createEmptyMovieClip("sound_mc", 1); _global.song_nr = random(songfile.length); _root.sound_mc.songStarter(songfile[song_nr]); updateCover() }; 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+"/"+totalDuration; } function duration (){ timed = _root.sound_mc.sound_obj.duration/1000; mind = Math.floor(timed/60); mind = (mind<10) ? "0"+mind : mind; secd = Math.floor(timed%60); secd = (secd<10) ? "0"+secd : secd; totalDuration = mind+":"+secd; } MovieClip.prototype.songStarter = function(file) { 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.sound_obj.setVolume(0); this.onEnterFrame = function() { if (this.sound_obj.position>0) { delete this.onEnterFrame; timeInterval = setInterval(timer, 1000, this.sound_obj); track = this.sound_obj.id3.songname; artist = this.sound_obj.id3.artist; this._parent.title_txt.text =artist+" - "+track; } else { this._parent.title_txt.text = "loading..."; } }; this.sound_obj.onSoundComplete = function() { clearInterval(timeInterval); _root.timeDisplay_txt.text = "00:00/00:00"; (song_nr == songfile.length-1) ? _global.song_nr=0 : _global.song_nr++; _root.sound_mc.songStarter(songfile[song_nr]); }; this._parent.volume1.dragger.onPress = function() { startDrag(this, true, 0, this._y, this._parent.volBG._width, this._y); _root.toolTip._visible = true; setInterval(draggableTip,100); function draggableTip(){ _root.toolTip._x = _root._xmouse; } 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() { _root.toolTip._visible = false; stopDrag(); }; }; function soundStatus(){ var amountLoaded = _root.sound_mc.sound_obj.getBytesLoaded() / _root.sound_mc.sound_obj.getBytesTotal(); _root.loader.loadBar._width = amountLoaded * 260; duration = _root.sound_mc.sound_obj.duration; position = _root.sound_mc.sound_obj.position; _root.playHead._x = position / duration * 272 + 5; } btn_play.onRelease = function() { clearInterval(timeInterval); _root.timeDisplay_txt.text = "00:00/00:00"; this._parent.sound_mc.songStarter(songfile[song_nr]); }; btn_stop.onRelease = function() { clearInterval(timeInterval); _root.timeDisplay_txt.text = "00:00/00:00"; this._parent.sound_mc.sound_obj.stop(); }; btn_fw.onRelease = function() { clearInterval(timeInterval); _root.timeDisplay_txt.text = "00:00/00:00"; (song_nr == songfile.length-1) ? _global.song_nr=0 : _global.song_nr++; _root.sound_mc.songStarter(songfile[song_nr]); updateCover() }; btn_rev.onRelease = function() { clearInterval(timeInterval); _root.timeDisplay_txt.text = "00:00/00:00"; (song_nr == 0) ? _global.song_nr=songfile.length-1 : _global.song_nr--; _root.sound_mc.songStarter(songfile[song_nr]); updateCover() }; function updateCover(){ loadMovie(songcover[song_nr], picloader); } playlist.load("playlist.xml"); setInterval(duration,100); setInterval(soundStatus,100); </playlist> |
Awesome tutorial, Thiago! Thanks for putting so much time and effort into creating a flash mp3 player that can compare to windows media layer, itunes et al. The XML may be simple, but it sure is powerful!