Displaying Embedded Album Art in MP3 ID3 tag

[GamezR2EZ]

ok so again i want to say VERY helpful site here guys

i do have another little snag, i am creating a basic MP3 player in flash so i can learn a little more of it

my sound is call currentMusic and i have been able to use the following to get the title, album, artist, ect ect

the code i was using was for that was
currentMusic.id3.TIT2 that was for the title, anyway it worked fine and all i want to know if there is a way to extract the album art i have stored in the mp3 and display it much like i could pull the title from the id3

i have done some searching but come up dry, anyone that can help it would be appreciated!

-Gamez

[Rossman]

Wow, I didn't even know you could embed the art into the MP3!

I don't see a way to access it using the standard Sound class in AS3, but I'm sure you could extract it (if you were sufficiently motivated) from the raw MP3 file using a ByteArray to read the metadata directly.

[GamezR2EZ]

Hi Rossman,

thanx for the reply, yes i thought about that, and no im not sufficiently motivated (yet). I didnt think i could pull it through the sound class, however, it is an ID3 thing so maybe JUST maybe there is a function somewhere.....

As far as embedding art into the music, it is only supported on ID3 v2 and up tags, i personally use id3 v2.3 tags

if anyone else has any suggestions let me know THANX!


Side Note: MP3Tag (http://www.mp3tag.de/en/) is a GREAT program for editing and organizing your tags with a multitude of options, it supports all media that supports id3 tags as far as i know, you can add\view\extract album art with ease in this program! Just if anyone was interested, enjoy

[Rossman]

In the off chance you do feel like tackling it through bytearray, this SWFReader class that senocular wrote shows how to do it with a SWF file - you'd just have to modify it to work for an MP3 file ;)

http://www.senocular.com/?id=2.43

Cheers!

[GamezR2EZ]

im in the middle of writing that byteArray, in fact i have successfully pulled the picture from a file and displayed it in flash!

however currently the byteArray is limited to that one file, not very versatile. But im writing a search method to isolate the file in any mp3
hopefully ill get it done soon, i know im not the only one who wants to do this!

watch someone else will get it out a day before me :P

[Rossman]

Nice, that would be a real handy class to have!

[GamezR2EZ]

ok so here is the code, im not happy with it yet, but im still working on it

new code posted above

that will extract the albumart from any mp3 with a jpeg attached, and possibly any mp3 at all that has any image
it may also work on m4a's and anything else that uses ID3 tags, but i havent tested but one yet so idk (the one worked)

currently there is a pause\freeze and cpu spike becuase of the way it searches for the art, but its only about 3 seconds, however im working on getting that down to less

Almost all of this code was written by wxvxw, i simply adapted it
the only bit i wrote was how to display the byteArray as a picture

if anyone can help with this please let me know!

BTW currently i have only tested ID3 v2.3 tags (v1.0 doesnt support pics) 2.4 SHOULD work the same but i havent tested it so no garuntee's
to read up more about the tags sturcture visit the ID3 site (http://www.id3.org/id3v2.3.0)

EDIT: other useful info
this assumes the picture is no more that 15000 bytes
this assumes only one picture (not sure the outcome if more that one is embedded)
this assumes at least 10bytes padding at the end of the picture (average is well over 1000bytes i believe)

[Rossman]

Wow, even with those assumptions, pretty sweet dude!

[GamezR2EZ]

this code works better, its much faster, picture can be any length, its not thrown by no image either! it has no CPU spike and executes in a blink so its very very fast
it can also be adapted to view any other property in the ID3 tag, but for now this is a fast and easy way to view the attached picture in the ID3 tag
i built an MP3 player that i will be posting the code for in a few days possibly, that will have this implemented, i have yet to see a MP3 player that extracts the picture (an open source one at least), so this may be a first! in any case the important info is below

var binaryData:ByteArray;
var file:URLLoader = new URLLoader(new URLRequest("test.mp3"));
var finalData:ByteArray = new ByteArray;
var byteCon:Loader = new Loader;
var offset:int;
var rLength:int;
var found:Boolean = false;
var end:Boolean = false;


file.dataFormat = URLLoaderDataFormat.BINARY;
file.addEventListener(Event.COMPLETE, handleComplete);

function handleComplete(e:Event):void
{
binaryData = file.data as ByteArray;
binaryData.position = 0;
//get offset and length
while(!found){
var pos:int = binaryData.readUnsignedInt();
if(pos == 0x41504943){
offset = binaryData.position + 20;
}
if(pos == 0){
if (!found){
rLength = binaryData.position - 1 - offset;
if(rLength > 5000){
found = true;
}
}
}
binaryData.position = binaryData.position - 3;
}

finalData.writeBytes(binaryData, offset, rLength);
finalData.position = 0;
byteCon.loadBytes(finalData);
addChild(byteCon);
}

EDIT: also with multiple pics, while it wont display 2 pictures (yet) it wont mess up with you have or more pictures, so far as my test have gone!

[ManyQuestions]

Hi GamezR2EZ,

thanks for your posts and especially for the final one :)
I've been looking for possible attaching artwork from MP3 file and maybe ID3 tags created in iTunes but couldn't find anything useful for me until now. I'm pretty new to ActionsScript ...
Your code works just fine but I have few questions. It would be so nice if you could explain for me this part of the code :

"while(!found){
var pos:int = binaryData.readUnsignedInt();
if(pos == 0x41504943){
offset = binaryData.position + 20;
}
if(pos == 0){
if (!found){
rLength = binaryData.position - 1 - offset;
if(rLength > 5000){
found = true;
}
}
}
binaryData.position = binaryData.position - 3;
}"

What means 41504943 ? I have tried to modify this number with other taken numbers from pos array but it doesn't work.
And how can I modify size of the final image in Loader ?
Thanks again for your post.

[daveystew]

Nice code, thanks!

[lintoka123]

Can anybody help in reading the header information from the ByteArray of an MP3 file loaded .... basically I want to find the BITRATE from the mp3 header. Thanks in advance ... pls send the suggestions/solutions to lintoka123@gmail.com

[Bluntpixel]

Hi folks.
This is potentially exactly the code I was looking for (does Jedi wave). However, I'm getting this error with a variety of mp3 files:

Error #2044: Unhandled IOErrorEvent:. text=Error #2124: Loaded file is an unknown type.

If I comment-out
byteCon.loadBytes(finalData);

Then I get no error (and no result natch).
Has something changed in the MP3 format since this post?

All clues very welcome
Cheers