[Firefox] ID3.loadtags never returns for cached files

[Luigi Pulcini]

I am using this plugin on my personal website (www.luigipulcini.com) in combination with jPlayer.
The script I created reads the ID3 tags every time a new track is selected to be played.
After loadTags succeeds (callback), the div displaying the information gets populated with the tags and the audio track itself starts playing.

This works perfectly in every browser, including Firefox.

The problem comes when a user goes back to a track that has already been played back (cached). In that case, ONLY IN FIREFOX, loadTags never calls the callback function and the whole player gets stuck.

I tried several browser in several devices, including mobile devices.
This only happens in Firefox.

How to reproduce the issue in Firefox:

1. Go to www.luigipulcini.com
2. Let the first track be cached (white line in the circular player)
3. Skip to the next track
4. Skip back to the previous track: the player won't play anymore and the div displaying the information of the track gets stuck with the "loading... please wait..." warning

All the cached tracks won't play anymore, even if I reload the page, until I empty Firefox cache folder.

Here is the code I am using.

ID3.loadTags(file, function() {
    var tags = ID3.getAllTags(file);
    if (tags) {
        [... populate the <div> with the info...]
    } else {
        [...no tags warning message...]
    }
    [...playback...]
}, {tags: ["artist", "title", "album", "year", "comment", "track", "genre"]});

The reason why I am putting the playback inside the loadTags callback function is that I don't want the track to start playing back without the tags being showed.

I don't know whether I am doing something wrong, but if this is the case, it only happens in Firefox.

[António Afonso]

I wasn't able to replicate locally what I see on your website (which is no network request at all).
It's a bit hard to debug on firefox since I'm not able to do step-by-step debugging when pretty printing is configured.

I suspect the problem is that the server is returning a status code the library is not expecting (perhaps FF devtools isn't showing this), even though I don't see this with Chrome, but maybe FF interacts with the server in a different manner that will make it return a different status code.

Can you please try with this branch - https://github.com/aadsm/JavaScript-ID3-Reader/tree/gh-28_error-handling - that has a mechanism to report errors, and tell me if the error function is called?
You'd have to change your code to:

}, {
    tags: ["artist", "title", "album", "year", "comment", "track", "genre"],
    onError: function(reason) {
       console.log(reason, reason.xhr && reason.xhr.status);
    }
});

[Luigi Pulcini]

The function onError is called, even though I just get this in the console:

[object Object] undefined

If I click on [object Object] it says

error: 'xhr'

[António Afonso]

Thanks for that. After debugging on your website it seems that Firefox 28 is returning status code 206 for HEAD requests.. This is odd, I would not expect this.
I created a version that takes this into account, can you please check it? https://github.com/aadsm/JavaScript-ID3-Reader/tree/gh-33_head-206-status

[Luigi Pulcini]

Hey António, thank you so much for that. As you can see yourself, this works like a charm now.
Thank you so much for taking care of this issue in such a prompt way: It is very appreciated!

[António Afonso]

Cool! I'm happy it worked and have another bug fixed.
Btw, great music you have on your website, I enjoy piano solos myself.

[Luigi Pulcini]

Thanks for appreciating my work, António! :)