Upon user interaction, I load an mp3 and when that completes (load event callback), I call audio.play(). However, I receive the following error Unhandled Promise Rejection: NotAllowedError (DOM Exception 35). I believe it has to do with calling audio.play() in the callback event. Is there a work around?
So I think technically the problem is because when a user clicks a play button, I make an async http call to get the download URL for that MP3. Because of the asynchronous nature, I have to load and play the mp3 in the subscription/success of that download URL http call. Perhaps Safari won't allow that since it's called on a separate, background thread.
Hi drall82, This is due to auto-play blocking for media with sound. The user gesture is not recognized by the element because of the delay caused by the async load ahead of play method call. It is likely it will work if you change the per-site auto-play preferences to always allow playing media with sound. If I recall, this is possible if you set the src attribute to trigger the load and call play() immediately. The element should already be created and attached to the DOM with no initial src attribute. Then on click you can set the src and call play() immediately. The media will play as soon as enough data has loaded. Maybe give that a shot and let me know if it works for you.
