Web Audio does not work on some devices (Panner Audio)

I am trying to add all my page sounds to web audio panner such that the sounds move from left to right. For this I created this function to add all of them to pannner but it seems to work only on some devices and on other devices no sound comes from audio even when it is showing the speaker icon in tab( audio is playing).

let panNode;    var source=new Array(60);
const myAudio = document.querySelectorAll('audio');
const panControl = document.querySelector('.panning-control');
 var AudioContext = window.AudioContext || window.webkitAudioContext;   
const audioCtx = new AudioContext();
  panNode = audioCtx.createStereoPanner();


for(let i = 0; i<myAudio.length; i++){
  source[i] = audioCtx.createMediaElementSource(myAudio[i]);
   
  source[i].connect(panNode);
  panNode.connect(audioCtx.destination);
}

Ignore how I manage to move audio as I have created a separate function to automatically increase or decrease pannode value every second. I need help in adding all sounds to pannode compatible with all devices.

Solution

Unfortunately createStereoPanner() isn't available in Safari. It will probably be part of the next release though. It's already available if you switch on the "Modern WebAudio API".

For now you would need to use a polyfill. standardized-audio-context for example has an implementation of the StereoPannerNode which works in Safari. There is also the stereo-panner-node package which is a standalone polyfill. But that is not maintained any longer.

Here is a little example which uses standardized-audio-context:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
    </head>
    <body>
        <audio crossOrigin="anonymous" src="https://mp3l.jamendo.com/?trackid=1630628&format=mp31&from=app-devsite"></audio>
        <button id="play">play</button>
        <button disabled id="stop">stop</button>
        <input id="left" type="radio" name="panning" value="left"><label for="left">left</label>
        <input id="center" type="radio" name="panning" value="center" checked><label for="center">center</label>
        <input id="right" type="radio" name="panning" value="right"><label for="right">right</label>
        <script type="module">
            import { AudioContext } from 'https://jspm.dev/standardized-audio-context';

            const audioContext = new AudioContext();
            const stereoPanner = audioContext.createStereoPanner();

            const audioElement = document.querySelector('audio');
            const playButton = document.getElementById('play');
            const stopButton = document.getElementById('stop');
            const leftInput = document.getElementById('left');
            const centerInput = document.getElementById('center');
            const rightInput = document.getElementById('right');

            const mediaElementAudioSourceNode = audioContext.createMediaElementSource(audioElement);

            mediaElementAudioSourceNode
                .connect(stereoPanner)
                .connect(audioContext.destination);

            playButton.addEventListener('click', () => {
                stereoPanner.pan.value = leftInput.checked
                    ? -1
                    : centerInput.checked
                        ? 0
                        : 1;

                audioContext.resume();
                audioElement.play();

                playButton.disabled = true;
                stopButton.disabled = false;

                leftInput.disabled = true;
                centerInput.disabled = true;
                rightInput.disabled = true;
            });

            stopButton.addEventListener('click', () => {
                audioElement.pause();
                audioElement.currentTime = 0;

                playButton.disabled = false;
                stopButton.disabled = true;

                leftInput.disabled = false;
                centerInput.disabled = false;
                rightInput.disabled = false;
            });
        </script>
    </body>
</html>