Babylon crashes audio elements in Safari

If you put a <audio> element on page with babylon, and open it in safari it breaks.

(To see the broken element, right click / inspect/ select the audio-tag/scroll into view)

If you try to play it you get a

Unhandled Promise Rejection: AbortError: The operation was aborted.
	(anonymous function)

The issue only seems to be safari version 14+

Our work around was to use babylon to play the audio we needed, but that causes a new issue. Safari’s autoplay blocker stops the audio getting played unless the user clicks a unmute button. So its not really an option.

Just to make the testing a little easier, I’ve added some CSS to the audio player so that it’s within view and doesn’t require the debugging logs:

I am running Safari 14.0.3 and this is working for me though.

So I went and re-tested it. Its working for me now, in the playground but still broken in our code base.

Could it be vue AND babylon that cause the issue.

Curious if you managed to figure that out!

Are you using the latest preview version of Babylon?

@GwilymNewton : Hi Gwilym - a good welsh name! Over time , I have had issues with audio associated with Chrome. Have you tried this playground with Safari

It works with Chrome, and I read somewhere that Chrome and Safari may share some code… So give it a try.

Stay Safe, gryff :slight_smile:

1 Like

Sorry for the late replies.

  1. Babylon is definitely part of the recipe for the bug. When we pull it out of the page we can use the ‘audio’ tags again. ( This is what we have done now as we had a deadline to hit )

  2. yeah we noticed I was wrong the bug is not there in the playground. So it could be Vue + Babylon JS + Safari. That is the issue.

  3. chrome is fine, that’s been our primary development platform. So only found out when we started beta testing.

  4. happy to spend some time with one of the Devs in a few days walking then through our setup. If it helps debug

Oh and yes we tried 5-alpha-21. No change