Lately I am working on a piece of code that makes the browser play an audio, using Three.js. Below lies the related snippet:

function loadAudio(i) {
    document.getElementById('overlay').innerHTML =
        '<div class="text-loading">a moment please...</div>'
    const files = [
        'https://xxx.yyy.com/1.mp3',
        'https://xxx.yyy.com/2.mp3',
        'https://xxx.yyy.com/3.mp3',
        'https://xxx.yyy.com/4.mp3',
    ]
    const file = files[i]

    const loader = new THREE.AudioLoader()
    loader.load(file, function (buffer) {
        audio.setBuffer(buffer)
        audio.play()
        analyser = new THREE.AudioAnalyser(audio, fftSize)
        init()
    })
}

However, I am notified that the website did not quite work on Desktop and Mobile Safari (where I initially tested upon but I released the code whatsoever when it worked on Chrome on my MacBook, thought it was internet problem..), and I still couldn't figure out what do to after perusing all related questions on stackoverflow (forgive me for my stupidity).

Can someone please help me with it?

also, some related links might be handy:

• why audio visualizing a livestream is not working on mobile / Safari?
• https://discourse.threejs.org/t/three-audioloader-not-playing-other-audio-format-except-wav-on-iphone-safari-browser/23844/3
• https://github.com/mrdoob/three.js/issues/10404
• https://bugs.webkit.org/show_bug.cgi?id=195043 (might this be something related to webkit?)