Flash: Displaying cover art with the MP3 player

Posted by Tiago on May 29, 2007 Leave a comment (44) Go to comments

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.
Screeny1

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.
screen2

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
screen3
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&lt;10) ? "0"+min : min;
	sec = Math.floor(time%60);
	sec = (sec&lt;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&lt;10) ? "0"+mind : mind;
	secd = Math.floor(timed%60);
	secd = (secd&lt;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>
Leave a comment

44 Comments.

  1. john June 28, 2007 at 11:52 pm

    Hi

    This is great, do you have the fla for this by any chance? Id like to check it against what I have as I’ve messed up along the way somewhere and my player has vanished into the ether of white space.

    Many Thanks

    John

  2. Tiago June 29, 2007 at 10:10 am

    :) Hi John

    As soon as I’m back at home, I will send you the fla file.
    Meanwhile can you check that every movieclip on the stage has it’s unique instance names?

    Thanks
    Tiago

  3. john July 2, 2007 at 10:04 am

    Hi Tiago,

    I have checked and they all seem to, and so I am starting from the top again to see where I went wrong and to see if I can find the problem.

    I’ll let you know how I get on. Thanks again

    John

  4. john July 2, 2007 at 10:25 am

    Hey,

    I hadn’t made sure that the picLoader had its’ instance name ! (Just as you thought).

    It all works now, so I have the full player, adjusted it to not auto-start, and have the album cover artwork displayed. It’s very impressive and so thank you again.

    John

  5. Tiago July 9, 2007 at 8:55 pm

    Hey John

    Happy that I could help you, stay tuned for the new CS3 player :)

  6. Anonymous July 14, 2007 at 1:33 am

    pienzo que a todos les falta un scroll para el playlist

  7. johnny August 2, 2007 at 7:24 am

    how do u make this mp3 player not auto start.. great tutorial btw thanks tiago!

  8. Tiago August 8, 2007 at 11:03 pm

    Anonymous:
    To come in the new CS3 version of the player

    johnny
    Just remove the start function in the prototype function.

  9. James August 28, 2007 at 2:43 am

    May I have the fla too? (for flash 8)
    I’d like to compare.
    From what I imagine, it could rival WinMediaPlayer!

  10. Russell Levin September 7, 2007 at 12:28 am

    This part got messed up somehow, sorry!

    for (var i = 0; i

  11. Pale September September 20, 2007 at 10:45 pm

    ^Oh code is too wide and parts are getting cut off . Sorry i can’t show you.

  12. Derek October 13, 2007 at 12:54 am

    Thanks Tiago,
    I had luck building player based on your tutorials but I’m having difficulty with this one. My songs (the audio) are loading and playing but I’m not getting any display of scrolling text or of album covers. I’ve checked the code sooo many times but can’t figure it out. If I link the .xml for this player to another I loose the scrolling text as well. That means something, but its beyond my small brain.

    Here are some files if you have a moment:

    http://cellocelli.com/OPmembers.html
    http://cellocelli.com/OPplaylist.xml

  13. Derek October 13, 2007 at 3:36 am

    I just realized that my player isn’t displaying the song & artist info from the playlist.xml but rather what is embedded in the mp3 file. If there is nothing embedded then nothing shows in my scrolling display. What might be causing this lack of connection to the xlm?

  14. Tiago October 15, 2007 at 11:10 pm

    Derek
    Sorry for the late reply dude, the issue why the player is displaying the metadata from the mp3 eg. the ID3 is because you implemented the code of part 3 of my tutorial, if you would rather use the code from the first part the ID3 will not be taken and therefore the player will grab the information from the XML.
    Regarding the coverart, can you send me your fla, so I can have a look around it.

    Thanks
    Tiago

  15. Derek October 22, 2007 at 5:08 pm

    Thanks for the reply Tiago! I just saw it. Jeez. Don’t know the best way to send you the files so I just sent you an email with files attached. Thank you again!

  16. Tiago October 23, 2007 at 8:48 am

    Hey Derek

    I’ve modified my contact form, you can now upload your zip file through it.

  17. Derek October 26, 2007 at 6:59 pm

    Hi Tiago,
    I’m sure you are a wicked busy dude! Just want to confirm that you got my troubled files. Thanks again for any assistance!
    derek

  18. dreado October 28, 2007 at 11:45 am

    Another nice addition to this would be to be able to specify the size of the images, so the artwork files don’t have to be exactly the right size.

  19. s'PlatterKep October 30, 2007 at 8:07 pm

    This is outstanding! Thank you so much – I was easily able to add Live 365 streams to it, now trying ASX. I read the comment above re XML / listmenu. I followed the link, but was wondering if anyone knows if there’s something that spells it out in a little more detail, ie, hooking up a list menu to load the titles instead of the song buttons?

    Thanks, again!

  20. webdiva3000 January 31, 2008 at 7:29 am

    Hi Tiago!
    Thanks for taking at my files the other day… really appreciate it. I took another stab, following the tutorial above. Getting two error messages – not figuring out what to fix. Please could you take a look at this file again.
    http://www.tallowahmedia.com/audioplayer3/
    Thanks a million!

  21. webdiva3000 February 11, 2008 at 8:02 am

    Hey there,
    Still haven’t been able to figure this out. Please could you take a look at my file and tell me what I’m doing wrong, so I can get the player working? Hope all is well with you!
    Here’s the link to review my ….blunder :-)
    http://www.tallowahmedia.com/audioplayer3/
    Thanks

  22. Brian February 16, 2008 at 5:38 pm

    Hi Tiago,

    This has been a fantastic series of tutorials – I’m very grateful to you for your hard work, patience and help.

    I have one hopefully helpful tip and one question:

    Tip: there’s an ‘updateCover()’ missing in your code for the added album cover. I noticed that having completed a track the player moved onto the next track in the playlist, but the cover image didn’t change. So I fiddled around and found it needed an extra line to the onSoundComplete section:

    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],songname[song_nr],songband[song_nr]);
    updateCover()
    };

    However there’s a problem I cannot find a solution for: the scrolling track text works perfectly for me – but only for the initial playing track and if you advance or go back in track number using the player controls. If you select another track using the text list generated from the xml file, the scrolling text doesn’t change. The newly selected track plays fine, the cover changes and the counter resets to 00.00, but the title in the scroller doesn’t change.

    If you (or anyone else) have any suggestions, I’d be hugely grateful!

    Thanks in advance & hope you’re having a good time here in Amsterdam.

  24. johnny March 24, 2008 at 11:13 pm

    can i get a copy of the FLA having trouble with the code posted on here

  25. Arun April 17, 2008 at 3:44 pm

    @brain
    Instead of update cover function use following line:

    loadMovie(songcover[song_nr], picloader);

  26. Sy April 26, 2008 at 9:24 am

    Hi Tiago,

    First of all, thanks so much for this unbelievable tutorial. You are making the W.W.W. a better place. : )
    I was wondering if you had the “.fla” for this tutorial (with the art cover code)? I am having some difficulties making it work. I would really appreciate it.
    Thanks a lot.

    Sy.

  27. Sean April 29, 2008 at 10:48 pm

    Hi Tiago,

    Thanks for the great tutorials. I have one quick question, when I click on the links in the playlist, the cover isn’t updating, but everything else is working perfectly. Am I missing a update cover function somewhere?

    Any help would be awesome, thanks again.

    Sean

  28. design:forge May 27, 2008 at 11:03 am

    Hi Tiago,

    Great tutorial although I’m having a problem getting the images to show (I’ve checked that it has a unique instance name) – any chance you could upload the .fla file please so I can see where I’m going wrong!

    Any help would be much appreciated!

    Many thanks
    Neil

  29. akkcreative June 25, 2008 at 5:51 am

    Is there a way to get the list to display inside a movieclip? I want to make scrollable.

  30. Joey August 17, 2008 at 1:41 am

    I have created a player but I want to be able to choose the xml file from a dropdownlist so that I can load different playlist for different albums…

    Essentially I want to select an album fom a selection list (dropdown style) and have the songs for that album load. I figure there is a way to do it with one xml file as well.

    Ultimately I would like to select by album or by band and have only songs from a specific album appear or only songs from a specific band.

    Would this be easy to do, my client wants to be able to choose from about 10 albums. It would be nice to have it all work with a single xml file and this player

  31. amat August 20, 2008 at 8:28 pm

    please give me .fla… i messed up the code

  32. Tiago August 21, 2008 at 12:14 am

    Sorry there is no fla with this tutorial, I had a crash a while ago and lost all the data.

  33. JAMES March 16, 2009 at 3:34 am

    PLEASE.. PUBLISH DE .FLA IT WILL HELP A LOT EVERYONE, THANK YOU

  34. Dave April 7, 2009 at 1:57 am

    Hey Tiago. Is it possible to incorporate say a 30 song playlist with this player, that has a scrollbar at a fixed height, with the picture option? Right now, if I have more than 3 songs, it starts a new list to the right of the original 3 files, as opposed to just continuing a list on the left hand side.

    Have you had a chance to build the CS3 tutorials for an MP3 player yet?

  35. reid May 4, 2009 at 9:19 pm

    @Brian or anyone else
    did you ever find a fix if you “select another track using the text list generated from the xml file, the scrolling text doesn’t change”?

  36. reid May 4, 2009 at 10:35 pm

    nevermind, scratch that, i figured it out….

  37. Rathin May 7, 2009 at 11:46 am

    Hi Tiago,
    I am grateful to you. This inclusion of a picture has changed the view of my MP3 Player. But, I wanted a toggle button of pause/play. I tried hard and could make the button but implementation was a big problem. Could you please help me.

  38. Rathin May 16, 2009 at 7:58 am

    Hi Tiago,

    Although the picture is coming on pressing a song in the play list or pressing the next or previous button, but the picture does not change when a song is finished and the the next song starts. I checked the entire action script line by line. Please can you show the example fla file so that we can download it. Please…….

  39. feleps May 27, 2009 at 10:07 pm

    Hi tiago

    do you have the fla for this by any chance? (too)

  40. Isabel October 21, 2009 at 10:08 pm

    @reid and @Brian ,

    What is the solution for ““select another track using the text list generated from the xml file, the scrolling text doesn’t change”?

    Mines already has:
    function updateCover(){
    loadMovie(songcover[song_nr], picloader);
    }

    But I notice on mine that the track text does change but once it finishes panning it doesn’t show anything anymore.

  41. Isabel October 22, 2009 at 7:35 pm

    Ignore my last comment, now I cant get the cover to update when song finishes. It only changes when button is clicked.

  42. Aliaksandr October 24, 2009 at 12:10 pm

    could u send me the files fro this code??? just trying to learn…

  43. George November 3, 2009 at 3:30 am

    Nice tutorials!

    Question: how can we make the position indicator dragable (with a corresponding change in the time display)?

  44. Danielle May 18, 2010 at 4:12 pm

    Is there any way to have the album art come up as you hover over a song title?

    Love the player by the way!

Leave a Reply


[ Ctrl + Enter ]