Safari - createMediaElementSource not working?

Question

I like to add audio panning effect to Youtube.

But I found web audio api works in Chrome but not in Safari (v.13.1 on MacOS 10.15.4)

Steps to reproduce:

1. Open Youtube Video in Safari
2. Open the dev console and paste the following code

    var button = document.createElement("button");
    button.innerHTML = "Pan";
    button.style.position = "fixed"
    button.style.backgroundColor = "#0C9"
    button.style.bottom = "20px"
    button.style.right = "20px"
    button.style.fontSize = "24px"

    document.body.appendChild(button);

    let audioCtx = new (window.AudioContext || window.webkitAudioContext);
    const videoElement = document.querySelector('video');

    button.onclick = () => {
        console.log("== onclick ==")
        const source = audioCtx.createMediaElementSource(videoElement);
        var panner = audioCtx.createPanner();
        panner.panningModel = 'equalpower';
        panner.setPosition(-1, 0, 0);

        source.connect(panner);
        panner.connect(audioCtx.destination);
    };

3. Click the Pan button

It should pan the audio to the left. But it didn't work in Safari.

The action is triggered by user click and it doesn't violate the cross-origin restriction.

Did I miss anything?

Answer 1

In short:

createMediaElementSource is not working on streaming source in Safari.

According to this thread Possible to analyze streaming audio from Icecast using Web Audio API and createMediaElementSource?

I tested:

• case 1: streaming source with cors issue => mute sound

• case 2: streaming source with correct cors => play the sound but no data from the source node.

I also tested the static file as source case. Safari is worked correctly.