WebAudio Examples not working on iOS and macOS Safari

Questions
,
1

Hey folks! I’m working on a music related web-game and am very much new to ThreeJS.

Thinks are working fine in Chrome 87 on Windows but found myself running into issues on Safari and iOS.

These does not function on either iOS 14 or macOS Safari 12

on iOS only, these do not function:

But this seems to work everywhere

There are two differences that I can find:

  • The sandbox example uses ogg formatted audio clips, which are not supported by any implementation of Safari
  • the “orientation” example uses standard html5 media elements as opposed to the internal loader/buffer routines. I can reproduce in my own project using .play() command in a touch or click event just fine.

Any thoughts? I’d love to use the ThreeJS loader for various reasons, but need some guidance for cross compatibility. Thank you!!

2

We are aware of that. This was actually done on purpose. If you really need 100% cross-browser support, use MP3.

I’m not able to test the other examples though since I have no iOS device at hand. But I’ll try to do this in the next weeks.

3

Thanks @Mugen87, let me know what you find.

One of the reasons Ogg was desirable was looping performance, it was one of the few formats that looped seamlessly out of the box. I’ve seen a few hacks and workarounds for this, but am definitely interested in the best practice for cross-browser seamless looping.

4

Try this:

Ogg for Chrome and Firefox
ACC/M4A for Safari