Audio playback crackles and has artefacts on mobile (SoundTouch js)

54 views Asked by At

My phone is a Samsung note 10, and I've tested it on Chrome and Firefox. Let me know if it's just me but...

I've basically created the following website, I've put it on github. Basically you choose any audio file and you can change the tempo and pitch with the help of SoundTouch. https://stevenphotos.github.io/ST/ It takes some time to load the audio because of the buffer so wait a couple of seconds, and then you can play around with the settings. Here's the code to it. I've tried to keep it as small as possible, so it's just two JS files. https://github.com/StevenPhotos/ST

The audio rarely seems to crackle and have artefacts when on PC, but when on mobile, it turns into a mess, even if you access the website locally. So I'm pretty certain it has nothing to do with the internet.

At the top of main.js there's a BUFFER_SIZE, which I've set to 8192. I've experimented with the lowest value (256) which seemed like it made the crackle way worse. And you can only go one step higher to 16384, but then it would take even longer to load the audio (and also not fix the issue).

Another issue is that when you turn your phone off, the song plays in the background which is great, but sometimes after 1 or 2 minutes, it clears the song and is no longer selected in the file input, it's like it refreshes by itself. I'm guessing the browser thinks nothing is being played in the background so it automatically clears ram / website.

Genuinely have no clue what to do. Is this just what audio is like on web browser on phones? And how would one go on and fix such an issue?

0

There are 0 answers