Tuesday, August 19th, 2008
Reading ID3 tags with JavaScript
Category: Examples, JavaScript
, Library
Jacob Seidelin is up to more tricks, this time playing with the binary side of life and writing a library that can reading ID3 tags from MP3 files and such.
- // URL of the mp3 file (must be on the same domain!)
- var file = "mymusicfile.mp3";
- // define your own callback function
- function mycallback() {
- // either call the ID3.getAllTags([file]) function which returns an object holding all the tags
- alert(
- "All tags in this file: " + ID3.getAllTags(file).toSource()
- );
- // or call ID3.getTag([file], [tag]) to get a specific tag
- alert(
- "Title: " + ID3.getTag(file, "title") + " by artist: " + ID3.getTag(file, "artist")
- );
- }
- ID3.loadTags(file, mycallback);
You can view a demo at work or download the code.
Of course, Jacob realises that this doesn’t make sense for many use cases:
Of course, one big disadvantage of doing this on the client in JavaScript is that the you need to download the entire MP3 file before the tags are available, so it might be better to stick to server-side solutions in many cases if all you need is the tag info.
3.1 rating from 34 votes
This could also be quite useful in Adobe Air applications. An AIR port of Amarok, now there’s a thought…. :-)
For what it’s worth, ID3V2 is the first 10 bytes of the MP3 (part of that defines the size of the ID3 content itself), much more logical; V1 is at the end. Flash is able to get this information via the Sound object in AS2/AS3, but getting the data (from a wide variety of fields) seems to be a little inconsistent from what I’ve found.
what about images? Is there anyway to read an images’s file size or Content Type?
I’m trying to find the best way to tell when amazon gives me an empty gif instead of a book cover.
if this library combined support for using flXHR instead of native XHR, this type of ‘binary’ data inspection could be performed cross-domain, instead of being limited to only using the native XHR on same-domain requests.
http://flxhr.flensed.com/
Sos…
AIR applications can already read file information. It’s built into the API.
This could be very useful (and fast) in static / html / CD based media format. Granted, this is a very specialized use-case but for off-line applications that are reading the MP3’s locally this could be a cool option. You could build an offline Itunes type app w/ this to run through your MP3’s :) Cool idea
As an alternative, there’s a Google App Engine app for extracting metadata from images and returning them as JSON: http://img2json.appspot.com/. I guess it’d be easy enough to do something similar for MP3s.
neat, but I can’t really see the application..
I’ve written a basic php id3 parser that some people might find useful :)
FWIW, it is now only requesting the actual tag data instead of downloading the entire file.
@Schill: The problem is because there isn’t necessarily a standard, “these must be defined” set of ID3 tags for audio files. iTunes takes things a step further and adds proprietary tagging information in a non-standard field.