aadsm / JavaScript-ID3-Reader

ID3 tags reader in JavaScript (ID3v1, ID3v2 and AAC)

Home Page:http://www.aadsm.net/libraries/id3/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Sporadically large load time for tags

zeraphie opened this issue · comments

Hey there,

I've been researching into methods of getting the id3 tag for a track as I'm going to be making a web based music player. I've been toying with the idea of doing it in javascript and found your library, which, albeit with a huge load time, does work.

Here's an example that I've got functioning (at the moment it only logs the tags and how long it took to get them): http://codepen.io/zephyr/pen/e4c432ef9a35ff4df839ca7b2bd01618?editors=001 (this pen is loading the minified js file for the id3 reader from another private pen that I made to have a place to host the code temporarily)

Sometimes (on the first load) I've gotten stupidly high load times :( it's ranged from two minutes to 8 minutes which is completely not in the right ballpark for this.

As an alternative I did find that there are some functions in php that can do it, and could simply send a json response for all the tracks I had, but wanted to try with javascript (with a faster solution than what it is currently).

Would you have any ideas as to why this is so slow compared to your examples?

Kind Regards,
Tony

Hey,

Yeah, that's pretty slow. This library makes range request to only load the bytes of the tags instead of the entire file. In your case it seems that each file is taking ~10s.
I took a look into the network requests and found out the OPTIONS request is taking 9s because it returns the entire file! You don't need to return any data.

The browser needs to make the OPTIONS request to figure out if the server accepts cross domain requests from codepen.io. This request is made for every GET.
Here's a breakdown of the requests made:

copen-requests

  1. HEAD (figure out size)
  2. OPTIONS
  3. GET Range (identify type of tag)
  4. OPTIONS
  5. GET Range (load the tag data)

After you fix the OPTIONS response on the server side then loading a tag should be under 1s.

request-breakdown
Each request is still taking ~300ms which is a lot. A breakdown shows that most of the time is establishing the connection and waiting for a response. You should figure out why it lags so much, the actual data downloading is in the 3ms range.

Hm, thanks for the breakdown on that, I'll need to have a look (zekken.rocks is my own server so should be able to do stuff on it, codepen is just for prototyping stuff :p) In all honesty though, I have no familiarity with the OPTIONS response so I'll come back once I've figured it out (unless you have any pointers)