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

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

• All of them

OS

• iOS

Hardware Requirements (graphics card, VR Device, …)

• iPhone XS (iOS 13)