Chrome only Loading 6 HTML5 audio tags

问题:

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!

回答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.

回答2:

I think this problem can be fixed by setting attribute preload of audio tag to metadata.

回答3:

By default, Chrome lets you download five or six files simultaneously because that is the default value in most Windows installations. If you need to download more than five files, Chrome places some of the target files in a queue and then downloads them as soon as one of the five slots becomes available. Chrome does not allow you to change the number of concurrent downloads within the application itself. However, by editing the Windows Registry, you can set the number of simultaneous downloads in Chrome, or any other Web browser, to any number you choose.

Read More @ ehow.com

Solution: One trick you can use to increase the number of concurrent conncetions is to host your video files from a different sub domain. These will be treated as seperate requests, each domain is what will be limited to the concurrent maximum.

回答4:

For future reference:

It's bad practice to load them all at the same time because people with slow Internet speeds won't be able to use your website at all. All the downloads will make each download very slow.

It's better to create an audio element dynamically with Javascript.

回答5:

Easiest way to load all audio tags on your HTML page, use async.

<audio async preload src="hit1.mp3"></audio>

I am working on a web application (game) so this is a perfectly reasonable solution for me.