Clicking noises in Safari 14 (iOS and macOS)

[franckfoulon]

Issue description

We notice huge creaks in Safari with Amplitude. Even with your demo here: https://521dimensions.com/open-source/amplitudejs

Environment

• Browser Information: Safari Mobile (iPhone) and Safari Desktop (V. 14.1)

• Amplitude.js Version: 5.3.1

Steps to reproduce the issue

1. Play mp3 in amplitude
2. Listen for clicking noises in the MP3

Link to where issue can be reproduced

https://meditationspourmieuxvivre.clarissegardet.fr/

Thank you for your help.

Update by @jaydrogers:

• 5/20/21: Updated comment for additional detail submitted in the thread

[jaydrogers]

What do you mean by “huge creaks”?

I just used it in iOS Safari and it seems to run fine.

[franckfoulon]

Hi @jaydrogers and thank you for your quick answer.

It's very random... But we build a small app with a playlist exactly as your demo and we have many people reporting this issue. And we test even in your demo and constat sizzle this issue in safari and safari mobile...

[jaydrogers]

Thanks for the heads up, but unfortunately we will need more detailed steps on how to reproduce the issue before we can fix anything.

I’ll close this issue for now and re-open it once we have clear steps to replicate a bug.

[franckfoulon]

Here is my link: https://meditationspourmieuxvivre.clarissegardet.fr For many people the sound is awful on Safari and Safari Mobile... And it is the same on your demo. Tested in many different devices (Mac and iPhone).

[jaydrogers]

I am re-opening this issue but labeling it as "Cannot Replicate". This is because I cannot replicate this in Safari on our player: https://521dimensions.com/open-source/amplitudejs

However, I can replicate the bug here: https://meditationspourmieuxvivre.clarissegardet.fr/

I wonder if this is a server configuration or an issue with the file? @danpastori would know best.

[aleksej82]

Unfortunately, I also experience this kind of crackling. I have recorded a video about this on my iPhone 12. No problems on the Windows system with Edge browser. The mp3 file is fine.

Link to video: http://russianbeat.de/amplitude_crackling.mov

Link to the MP3: http://russianbeat.de/Stellar%20Sound%20Waves%20-%20Classic%20Rhodeo.mp3

Link to Amplitude Player: http://russianbeat.de/test.html

Edit: I use the version 5.3.1 served on my server.

[jaydrogers]

Thanks for the links!

I can definitely replicate it in your players as well.

Can you use your same iPhone 12 and replicate the issue here? https://521dimensions.com/open-source/amplitudejs

If so, can you upload another video like you did? That is super helpful 🙌

[aleksej82]

https://521dimensions.com/open-source/amplitudejs works on my phone whithout crackles. Maybe it is server related as you mentioned.

[jaydrogers]

Thanks for confirming! We'll have to wait for @danpastori when he is available to give some insight.

[aleksej82]

Ok, no problem. I just tested the older versions. 5.3.0 the same problem, but with version 5.2.1 it works.

[jaydrogers]

Very strange! Thanks for the extra information!!

[jaydrogers]

Additional note:

Is it possible for you to create two pages for us?

• One page with v5.3.0
• One page with v5.2.1

Not sure when @danpastori will be able to look at this, but it might be a while if you could leave those pages up (if that doesn't inconvenience your hosting).

Replicating it on your servers will help us identify the behavior differences between your setup and ours. Thanks much!

[aleksej82]

Very strange :-) On a Samsung Galaxy S5 it works perfect with both versions. I created several versions for further investigations.

Version 5.2.1 (working) http://russianbeat.de/test521.html

Version 5.3.0 (crackles) http://russianbeat.de/test530.html

Version 5.3.1 (crackles) http://russianbeat.de/test531.html

[danpastori]

Hi @aleksej82 ,

Thank you for submitting the detailed bug requests. We have a little bit of a plot twist. I'm still running Catalina and can not replicate. After a little bit of research, it sounds like a Big Sur update with Safari: https://discussions.apple.com/thread/252705782. Others have experienced similar issues.

With that being said, one last thing to try is to remove the waveform element from your player. Historically Safari hasn't worked well with the Web Audio API and that could be part of the issue. It was fixed awhile back, then they broke it, then fixed it again. If you remove the waveform element, that might do the trick.

[danpastori]

I just tested on iOS and can replicate. I'll see if I can find a solution and post it.

[danpastori]

The other issue I can think of is this could be due to server buffering. After the song plays through once, it plays through without clicking the next time. The way Safari handles buffering is different than other browsers. I'd first try removing the waveform and let me know if that helps. I think that could be the culprit.

[aleksej82]

Hello Dan, thanks for looking into the problem. I have removed the whole div "time-container" (same): http://russianbeat.de/test531.html