Safari - createMediaElementSource 不起作用？答案

【问题标题】：Safari - createMediaElementSource not working?Safari - createMediaElementSource 不起作用？
【发布时间】：2020-08-21 15:23:20
【问题描述】：

我喜欢为 Youtube 添加音频平移效果。

但我发现网络音频 api 在 Chrome 中有效，但在 Safari 中无效（MacOS 10.15.4 上的 v.13.1）

重现步骤：

在 Safari 中打开 Youtube 视频
打开开发控制台并粘贴以下代码

    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);
    };

点击平移按钮

它应该将音频平移到左侧。但它在 Safari 中不起作用。

动作是triggered by user click，它不违反cross-origin restriction。

我错过了什么吗？

【问题讨论】：

标签： safari web-audio-api

【解决方案1】：

简而言之：

createMediaElementSource 不适用于 Safari 中的流媒体源。

根据这个帖子 Possible to analyze streaming audio from Icecast using Web Audio API and createMediaElementSource?

我测试过：

案例 1：出现 cors 问题的流媒体源 => 静音
案例 2：具有正确 cors 的流式源 => 播放声音但没有来自源节点的数据。

我还测试了静态文件作为源案例。 Safari 工作正常。

【讨论】：