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.


  1. // URL of the mp3 file (must be on the same domain!)
  2. var file = "mymusicfile.mp3";
  4. // define your own callback function
  5. function mycallback() {
  6.  // either call the ID3.getAllTags([file]) function which returns an object holding all the tags
  7.  alert(
  8.   "All tags in this file: " + ID3.getAllTags(file).toSource()
  9.  );
  11.  // or call ID3.getTag([file], [tag]) to get a specific tag
  12.  alert(
  13.   "Title: " + ID3.getTag(file, "title") + " by artist: " + ID3.getTag(file, "artist")
  14.  );
  15. }
  17. 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.

Posted by Dion Almaer at 10:27 am

3.1 rating from 34 votes


Comments feed TrackBack URI

This could also be quite useful in Adobe Air applications. An AIR port of Amarok, now there’s a thought…. :-)

Comment by sos — August 19, 2008

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.

Comment by Schill — August 19, 2008

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.

Comment by STHayden — August 19, 2008

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.


Comment by shadedecho — August 19, 2008


AIR applications can already read file information. It’s built into the API.

Comment by commadelimited — August 19, 2008

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

Comment by btopro — August 19, 2008

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.

Comment by rcoup — August 19, 2008

neat, but I can’t really see the application..

I’ve written a basic php id3 parser that some people might find useful :)

Comment by user24 — August 20, 2008

FWIW, it is now only requesting the actual tag data instead of downloading the entire file.

Comment by jseidelin — August 20, 2008

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

Comment by MichaelThompson — August 22, 2008

Leave a comment

You must be logged in to post a comment.