Question

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

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

但是，file://协议new Worker(URL.createObjectURL(blob))方法可以在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://协议在Chrome中被视为跨域协议。这意味着该协议也将Blob URI视为跨源的，并且您的工作集将拒绝从跨源脚本进行编译。

为避免这种情况，最好的方法是在计算机上启动本地服务器。如果要进行Web开发，这是必须的，并且仅需几分钟即可完成设置，具体取决于您的操作系统。

现在，如果您真的希望使用file://协议，则可以尝试使用--allow-file-access-from-files标志启动镶边。

AudioContext（）。audioWorklet.addModule（），如何通过Blob加载？

1 个答案: