Three.js: WebAudio Orientation example not working on mobile browser (iOS)

[dataexcess]

Description of the problem

I am having problems making PositionalAudio work on mobile. I am initialising everything Audio related after a user click like so:

$('#enter-popup').click( function() { 
    $('#enter-popup').hide()
    var AudioContext = window.AudioContext || window.webkitAudioContext    
    audioContext = new AudioContext()
    listener = new THREE.AudioListener()
    camera.add(listener)
    createSoundObjects()
    setupLocalUser()
})

The createSoundObjects method fetches a source url from firebase and uses it for the initialiser of my "Sound" class like so..

this.mediaElement = new Audio(url);
this.mediaElement.loop = true;
this.mediaElement.preload = 'auto';
this.mediaElement.crossOrigin = 'anonymous';
this.mediaElement.play()

This works great on desktop, but I cannot get it to work on mobile (iOS 13, Safari && Chrome && Firefox).

I then proceeded to check out some examples and found out that the official WebAudio Orientation example isn't working either.

=> https://threejs.org/examples/webaudio_orientation.html

Nothing abnormal is getting logged in my console. please help. Thank you.

Three.js version

• "three": "^0.112.1"

Browser

• [x] All of them

OS

• [x] iOS

Hardware Requirements (graphics card, VR Device, ...)

• iPhone XS (iOS 13)

[Mugen87]

I'm unable to reproduce on a Pixel (1) Android with latest Chrome and Firefox. The example works as expected. I don't have an iOS device at hand so somebody else needs to confirm this issue.

BTW: The following two lines of code should not be necessary when using the audio classes of three.js:

var AudioContext = window.AudioContext || window.webkitAudioContext    
audioContext = new AudioContext()

three.js internally manages the audio context so there is no need to do this on application level.

[dataexcess]

I'm unable to reproduce on a Pixel (1) Android with latest Chrome and Firefox. I don't have an iOS device at hand so somebody else needs to confirm this issue.

BTW: The following two lines of code should not be necessary when using the audio classes of three.js:

var AudioContext = window.AudioContext || window.webkitAudioContext    
audioContext = new AudioContext()

three.js internally manages the audio context so there is no need to do this on application level.

Thanks for the clarification. :)
I guess I added those lines trying to fix the"iOS" related bug, but yeah out of pure ignorance...

[Mugen87]

What do you mean with "does not work"? Do you hear no sound at all in webaudio_orientation? Or does the audio not have any spatiality?

[dataexcess]

What do you mean with "does not work"? Do you hear no sound at all in webaudio_orientation? Or does the audio not have any spatiality?

no sound at all. when visiting another website (youtube) there is sound.

[Mugen87]

Okay, I see. But the other WebAudio examples do work on your iPhone?

[dataexcess]

Okay, I see. But the other WebAudio example do work on your iPhone?

No, the webaudio_visualizer example is also not wortking :/

[Mugen87]

All examples work on an iMac with macOS 10.15.3 and Safari/FF/Chrome. So yeah, it is obviously an iOS issue.

[dataexcess]

All examples work on an iMac with macOS 10.15.3 and Safari/FF/Chrome. So yeah, it is obviously an iOS issue.

Yep, tested this myself with my MacBook Pro.
All good.

[dataexcess]

All examples work on an iMac with macOS 10.15.3 and Safari/FF/Chrome. So yeah, it is obviously an iOS issue.

Yep, tested this myself with my MacBook Pro.
All good.

I just tested on iOS 12. The examples seem to work.
So it is definitely an iOS 13 issue.

Sadly enough my code does not work on either...

[Mugen87]

Probably related: #17948

[mrdoob]

Hmm, will test tomorrow.

[dataexcess]

Any chance you tested this on iOS 13?
I Just want to know if it is a general issue, or somehow caused by my device/configuration. 🙂

Thnx

[mrdoob]

I can confirm that https://threejs.org/examples/webaudio_orientation.html works on Safari 12.1/iOS 12.4.

[mrdoob]

Updating to iOS 13.3.1...

[mrdoob]

And I can confirm that audio no longer works in Safari 13/iOS 13.3.

[mrdoob]

The console has no relevant messages either.

So I guess this should be reported to Apple instead...

[chrisguttandin]

Hi everyone, I guess this is caused by a bug in Safari (https://bugs.webkit.org/show_bug.cgi?id=203435) which seems to be fixed but not yet shipped.

[Mugen87]

That would perfectly explain why webaudio_orientation is broken.

[dataexcess]

Hi everyone, I guess this is caused by a bug in Safari (https://bugs.webkit.org/show_bug.cgi?id=203435) which seems to be fixed but not yet shipped.

👏 good find. 👍

Keep in mind it is not just a Safari issue, also does not work on Chrome and Firefox. Basically anywhere were MediaElement is used in code.

I guess nothing to do but wait it out... (or is there an alternative way to play audio sources?)

Cheers!

[chrisguttandin]

Unfortunately there is no real Firefox or Chrome on iOS. Apple doesn't allow that. Every browser is a Safari (or WebKit) on the inside.

If your audio file is small enough you could use an AudioBufferSourceNode to play it. But I'm not sure how that works with three.js.

[dataexcess]

Unfortunately there is no real Firefox or Chrome on iOS. Apple doesn't allow that. Every browser is a Safari (or WebKit) on the inside.

If your audio file is small enough you could use an AudioBufferSourceNode to play it. But I'm not sure how that works with three.js.

aha, didn't know that.
but makes sense., coming from Apple...

[dataexcess]

@chrisguttandin Any chance we can find out when the fix will be shipped?

[chrisguttandin]

I have no idea. Hopefully it comes with the next security update for iOS but I wouldn't bet on it. :-(

[Mugen87]

Any chance we can find out when the fix will be shipped?

You might want to ask this question at the webkit issue 👍

[dataexcess]

Any chance we can find out when the fix will be shipped?

You might want to ask this question at the webkit issue 👍

Ok! Thnx