Chrome only Loading 6 HTML5 audio tags

Question

We are working on project at wavestack.com and we are dealing with an issue that its giving us a hard time.

Our page is supposed to load many audio tags at the same time, from a streaming source. You can check the concept in the following link:

http://wavestack.com/songs/nTNonwsCSg932CtzPLk1FA==

The problem comes when we're trying to load more than 6 tracks at the same time, as shown in the following link:

http://wavestack.com/songs/hp7G8CSsg45t3fV5YNeqbQ==

This page is working well on Firefox and IE10 but NOT IN CHROME.

We also notice something curious:

I'm printing in the console the value of a counter that increments when an audio tag fires up the event "canplaythtough", We're getting a total of 6, when it is supposed to be 7. The weird thing is that when you set a breakpoint at line 472 (as shown in the attached image) and then resume it does hit 7 times

Concluding with this, CHROME is not loading more than 6 tracks at the same time but it strangely does when you put a breakpoint in the canplaythrough's handler.

Thank you, Please Help!

Answer 1

Set the preload attribute of audio (and video) tags like this: <audio controls preload="none">

This way media files won't download on page load (think about mobile performance especially). When a user presses play the relevant file will download as normal.