HTML5 audio trouble

For a website of a music band that I’m currently developing, I needed a onscreen playlist controlled by javascript. The features are:

• Save the songs in the same .playlist as the currently playing audio-tag.
• Save current seek time of the playing audio-tag as it changes.
• Save current song in the .playlist, so the index.
• Restore the playing playlist on page load in a .playlist-player element if this exists.

This way the audio keeps playing when navigating through the website. When the player works, I’m also going to use AJAX to load the next page and push- and popState to update the URL, for a completely smooth audio experience.

So halfway during development suddenly the audio started crackling. Whenever I paused and played the audio again and again the crackling started to get worse. To test if this was a HTML5 thing I tried a YouTube video, but that audio also crackled. Googling for ‘Chrome audio crackling’ gave me some hints, but when I discovered the solution, that was no where near the solutions of the Google-results.

When developing in Chrome I also tried to view the player in an iPad Simulator (from XCode). This was not working and I decided to make things compatible later, and I forgot about having it open. So I restarted Chrome and the crackling was still there, I cleared cache, nothing worked. Then, I remembered the Simulator, closed it, and audio was back normal! The problem is probably with Core Audio being used by both Mobile Safari and Chrome, but I’m not sure.

You can test this by doing the following:

1. Starting Chrome and Mobile Safari (in iOS Simulator) on the same OSX device
2. Load a website using html5 audio-tags and start playing them on both browsers
3. Toggle the play pause button a few times in Chrome, audio should become bad.
4. Close the iOS Simulator and instantly audio goes back to normal in Chrome.

It will not always occur as I discovered doing it the 3rd time, but still: hope this helps anyone.