iOS 13 - Sound will not play if Waveform element present

[Matukas123]

Issue description

On iOS 13, if a Waveform element is present onscreen then no sound will play upon tapping the play button. Tapping the play button appears to download and buffer the file and trigger playback but no sound actually plays.
(works on iOS 12 though)

Environment

• What's My Browser Support link: https://www.whatsmybrowser.org/b/T9YWKH2

• Amplitude.js Version: 5.0.2

Steps to reproduce the issue

1. Visit a page with an AmplitudeJs layer that contains a waveform element, using a device running iOS 13
2. Press play button
3. File will download/buffer but no sound will play

What is expected?

Sound should play and progress should increment forward

Link to where issue can be reproduced

AmplitudeJS Examples pages: Waveform present, sound does not play: https://521dimensions.com/open-source/amplitudejs/docs/examples/blue-playlist.html

No waveform, sound plays ok: https://521dimensions.com/open-source/amplitudejs/docs/examples/flat-black.html

Additional details / screenshots

[feemcgill]

Adding <div class="amplitude-visualization"></div> to the dom also prevents audio from playing in iOS Safari

[danpastori]

This is a known problem in iOS 13. The WebAudioAPI has been broken from the update from iOS 12 to iOS 13. However, this is due to the fact that new browsers need an interaction from the user before they can render and use the WebAudioAPI:

https://developer.apple.com/library/archive/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/PlayingandSynthesizingSounds/PlayingandSynthesizingSounds.html

☝️There's a small "note" that explains that.

I'll get some new docs and see if I can develop a work around for this

[feemcgill]

Ah ok, I figured hitting the play button would suffice for the interaction. Gonna try initializing Amplitude on interaction

[feemcgill]

@danpastori any ideas for make iOS happy with a play button click/tap?

[LAGENCECREE]

i had same problem, i solved locally ✌️ ( initializing waveform after first user gesture ) is there a way to pull request @danpastori ? someone with an iphone ios 13.x to test ? @feemcgill

[mikopogosyan]

Hi @LAGENCECREE,

can you pls help me with this issue?

Thank you very much

[erikvorkink]

@feemcgill Thanks for your comment about the problem with <div class="amplitude-visualization"></div>. In my case I didn't need that element so I removed it and thereby fixed my problem on iOS 13! I realize it's a workaround but thanks for the inadvertent help anyway :)