how to use url

[mradfo21]

hey there! I've been going over what your doing and im a bit confused as to what kind of data the ID3 class is expecting.

for example, ive got a file input called "fileselect" which im manipulating through jquery:

//functions that get called second

function getDataURL(file, callback){
    reader = new FileReader();
    reader.onload = function(){
        callback(reader.result)
        };
    reader.readAsDataURL(file)
}

function fileLoadCallback(file){console.log(file)}

// heres the jquery that gets called first

jQuery("#fileselect").change(function(){
    file = this.files[0]
    getDataURL(file, fileLoadCallback)


})

and i was hoping to put the ID3 stuff into the callback for the onChange. However, im not sure what the ID3 class is expecting from a url (im testing all of this locally btw). i thought it would want the DataURL generated by readAsDataURL, however, when i give it that, nothing happens. btw the callback looks like this with ID3:

function fileLoadCallback(file){
    console.log(file)
    ID3.loadTags(file,function(){
        var tags = ID3.getAllTags(file);
        console.log(tags.artist)
    })
}

So what kind of URL is it expecting?

[António Afonso]

Sorry for the late reply but If you want to read local files then you need to pass a options.dataReader, I have a FileAPIReader that implements a dataReader for FileIO.

function fileLoadCallback(file){
    console.log(file)
    ID3.loadTags(file.urn || file.name,function(){
        var tags = ID3.getAllTags(file);
        console.log(tags.artist)
    }, new FileAPIReader(file));
}

The url parameter in this case isn't really used to load the data, it's just used has a key to cache the tags results. It's not the best API ever but I haven't had the time to rethink it.

[mradfo21]

hey thanks for writing back, i appreciate it! Ah, sadly it seems this will be a no go. I think your operating under the assumption that my local files are actually in the same directory as the html, so the /musicfile.mp3 is a valid url. However, im using files that could be anywhere on a user's hard drive. I can generate that data in a multitude of ways, i can get it as an html5 dataURL, or using jDataView i can get into a dataview object (http://ericbidelman.tumblr.com/post/8343485440/reading-mp3-id3-tags-in-javascript), or i can use your binaryAjax library and turn the file into that, but i believe it errors out each time because the url /something.mp3 isnt ever valid. I suppose my next move is to write my own ID3v2 parser using binary data from jDataView (its pretty slick), I'm just so intimidated by all the different tags and such.. its gonna take me a while. Thanks for reply though man, i really appreciate it !

[António Afonso]

I don't think I make such assumption, the FileAPIReader just uses a FileReader to read the file given. When you use the FileAPIReader the url you give is never used to fetch data, it's only used as a key to store the ID3 tags read, the data is read from the file object directly.
Have you tried loading your file on my test page? www.aadsm.net/libraries/id3
You can also send me a link to your code/page and I can take a look.

I've used jDataView myself in other libraries and it's very good, it's similar to BinaryFile in a way but it doesn't read UTF strings (you should also take a look at jParser from Christopher).
What is that jDataView has that you can't find in BinaryFile?

[mradfo21]

hey thanks for writing back! I've been playing with this for some time now, re-writing the binary ajax stuff trying to understand whats going on, but.. ive hit a bit of a snag.

trying to be as simple as possible,

in theory, this is all i should need to get the tag information.

//this is the function
getID3 = function(file){
url = file.name
ID3.loadTags(url, function(){
tags = ID3.getAllTags(url);
console.log(tags.artist)
}, {dataReader: new FileAPIReader(file)})

}

// this just calls the js function on change
$("#submitFile").change(function(e){
getID3(this.files[0])
})

however i just get an error while running this. chrome says :

Uncaught TypeError: Object [object Object] has no method 'f' id3-minimized.js:9
i.C id3-minimized.js:9
reader.onload filereader.js:14

firefox says:

[00:04:23.710] g.f is not a function @ http://localhost:8083/static/id3-minimized.js:9

i tried rolling my own version of the data reader and just sending a BinaryFile object in, but that isnt what its looking for i guess. what am i messing up here? I can say its related to the FileAPIReader somehow, for example if i throw a string in there it says "string does not contain method .f" etc. Do you know what i could send in there instead. a data url? a binary string? an array buffer? im not quite sure what its expecting in that {dataReader: "what does it want?"} kind of thing. cause i could just bypass FileAPIReader by rolling my own version of whatever FileAPIReader is supposed to return.

thanks again for even taking a look!

[António Afonso]

The dataReader needs to be a function that implements this signature: function(url, fncCallback, fncError), it receives a url (when reading from FileIO you don't really care about the url) and calls fncCallback with a BinaryFile object or an object that implements the same interface.
You can see here my implementation for FileIO: https://github.com/aadsm/JavaScript-ID3-Reader/blob/master/src/filereader.js

Maybe it's a bug in the minimization, could you please test with the unminized version? include all of these instead of id3-minimized.js

<script src="scripts/stringutils.js"></script>
<script src="scripts/bufferedbinaryajax.js"></script>
<script src="scripts/filereader.js"></script>
<script src="scripts/base64.js"></script>
<script src="scripts/id3.js"></script>
<script src="scripts/id3v1.js"></script>
<script src="scripts/id3v2.js"></script>
<script src="scripts/id3v2frames.js"></script>
<script src="scripts/id4.js"></script>

[mradfo21]

YOU ARE AMAZING! IT WOOORKS!!!!!!

Yeah it must be a little bug with the id3-minimized. Anything I can do or send you to help track it down?

But using the original files it all works (hey if i have to ship them, i have to ship them)!! Oh man, this is such a huge weight lifted for me. My web service was like 85% feature complete and this was really one of the last things to implement. Man. its so cool to see that information come up.

whew, i can breathe again ; )

[António Afonso]

Is this still a problem? The latest id3-minimized is now compiled with a version of the closure compiler that has improved on bugs related to naming.