The Problem: Audio files frequently fail to load. As in they do not even show up under the "Network" tab in Chrome Dev Tools.
Test Case:
index.html
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="main.js"></script>
</head>
<body>
</body>
</html>
main.js
['audio1.ogg', 'audio2.ogg', 'audio3.ogg'].forEach((path) => {
new Audio(path);
});
Audio Files:
- https://github.com/Joncom/chrome-audio-bug/raw/master/audio1.ogg
- https://github.com/Joncom/chrome-audio-bug/raw/master/audio2.ogg
- https://github.com/Joncom/chrome-audio-bug/raw/master/audio3.ogg
Steps To Reproduce:
- Open new tab in Chrome browser
- Open "Dev Tools"
- Select "Network" tab
- Open test case "index.html" in current tab
- See "Explanation" and then refresh as needed
Explanation:
- The first time you load the test case, you will notice all 3 audio files show up in the "Network" tab. They will all start and finish loading successfully.
- However upon refreshing, likely none of the audio files will show up or be loaded again.
- Strangely, by waiting a good minute or two, the issue temporarily vanishes, and the next refresh will load all audio files correctly again.
- But after that, loads will fail as before.
I can replicate them not showing up in the Network tab (even with the Disable Cache flag set), but the files do load and play correctly — most of the time.
I discovered that if I do what's in your test case, just creating the
Audioobject but not adding it to the DOM, usually I gotcanplayevents from them, but not always — about one in ten times one, two, or even all three of them wouldn't firecanplay. But if I appended them to the DOM, I always got thecanplayevent.So if you're not adding them to the DOM (just
document.body.appendChild(new Audio(path));is enough), that could be the cause of your preloading-never-ending issue.