javascript - `AudioContext().audioWorklet.addModule()`，如何通过 `Blob` 加载？

Question

我正在尝试使用 new AudioContext(). audioWorklet.addModule(URL.createObjectURL(blob))加载，但是控制台提示错误:跨源，如果是file://协议(protocol)，如何使用audioWorklet ?

我尝试使用 new Blob([Source Code], {type: 'application/javascript'}); ，但仍然提示错误

However, the file://protocol new Worker(URL.createObjectURL(blob)) method can be used in Chrome.

const getMp3=()=>{
    // return arrayBuffer
};

const playWorkletStr = async () => {
    let audioContext = new AudioContext();
    let audioBuffer = await audioContext.decodeAudioData(getMp3());

    let bypass = `class Bypass extends AudioWorkletProcessor {
                    process(inputs, outputs) {
                        const input = inputs[0];
                        const output = outputs[0];

                        for (let channel = 0; channel < output.length; ++channel) {
                            output[channel].set(input[channel]);
                        }
                        return true;
                    }
                }
                registerProcessor('bypass', Bypass);
                `;
    let blob = new Blob([bypass], {type: 'application/javascript'});

    await audioContext.audioWorklet.addModule(URL.createObjectURL(blob));
    const bypasser = new AudioWorkletNode(audioContext, 'bypass');

    let source = audioContext.createBufferSource();
    source.buffer = audioBuffer;
    source.connect(bypasser).connect(audioContext.destination);
    source.start();
};
document.getElementById('btn').onclick = () => {
    playWorkletStr();
};

<button id="btn">play</button>
<script src="index.js"></script>

Answer 1

file://协议(protocol)在 Chrome 中被认为是跨域的。这意味着 blob URI 也将被视为来自该协议(protocol)的跨域，并且您的工作集将拒绝从跨域脚本编译。

为避免这种情况，最好在您的机器上启动本地服务器。如果您要进行 Web 开发，这是必须的，并且根据您的操作系统只需几分钟即可完成设置。

现在，如果您真的想使用 file://协议(protocol)，那么您可以尝试使用 --allow-file-access-from-files 启动您的 chrome旗帜。