0

I am trying to use new AudioContext(). audioWorklet.addModule(URL.createObjectURL(blob))Load, but the console prompts error: cross source, if it is file:// protocol, how to use audioWorklet?

I tried to use new Blob([Source Code], {type: 'application/javascript'});, but still prompted an error

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>
Milk
  • 1
  • 2

2 Answers2

0

file:// protocol is considered cross-origin in Chrome. This means that blob URIs will also be considered cross-origin from this protocol, and your worklet will refuse to compile from cross-origin scripts.

To avoid that, the best is to start a local server on your machine. If you are going to do web-development, that's a must, and takes only a few minutes to set up depending on your OS.

Now if you really wish to use the file:// protocol, then you can try to start your chrome with the --allow-file-access-from-files flag.

Kaiido
  • 123,334
  • 13
  • 219
  • 285
  • However, the `file://`protocol" `new Worker(URL.createObjectURL(blob))` method can be used in Chrome. – Milk Mar 29 '19 at 10:33
0

I encountered this problem in Chrome, while Firefox didn't seem to block blob URI here. I've found a solution or workaround to this problem: simply using FileReader.readAsDataURL(blob) instead of URL.createObjectURL(blob) seems to work.

I found this workaround when I was trying audioCtx.audioWorklet.addModule("file:///path_to_js"), Chrome showed an error message in console:

Access to script at 'file:///path_to_js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, edge, https, chrome-untrusted.

I saw data listed here so I tried it, then it seemed to work.

However, I'm not sure whether this is allowed in principle.

    let blob = new Blob([bypass], {type: 'application/javascript'});

    let reader = new FileReader();
    reader.readAsDataURL(blob);
    let dataURI = await new Promise((res) => {
        reader.onloadend = function () {
            res(reader.result);
        }
    });
    await audioContext.audioWorklet.addModule(dataURI);
user16896037
  • 11
  • 2