Блог

Я пытаюсь использовать new AudioContext(). audioWorklet.addModule(URL.createObjectURL(blob)) Load, но консоль выдает сообщение об ошибке: перекрестный исходный код, если это 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>
  

file:// протокол считается перекрестным в Chrome. Это означает, что URI больших двоичных объектов также будут считаться исходными из этого протокола, и ваш worklet откажется компилироваться из сценариев с разными исходными данными.

Чтобы избежать этого, лучше всего запустить локальный сервер на вашем компьютере. Если вы собираетесь заниматься веб-разработкой, это необходимо, и настройка занимает всего несколько минут в зависимости от вашей операционной системы.

Теперь, если вы действительно хотите использовать file:// протокол, вы можете попробовать запустить свой Chrome с --allow-file-access-from-files флагом.

Я столкнулся с этой проблемой в Chrome, в то время как Firefox, похоже, не блокировал URI blob здесь. Я нашел решение или обходной путь к этой проблеме: простое использование FileReader.readAsDataURL(blob) вместо URL.createObjectURL(blob) , похоже, работает.

Я нашел это обходное решение, когда пытался audioCtx.audioWorklet.addModule("file:///path_to_js") , Chrome показал сообщение об ошибке в консоли:

Доступ к скрипту в ‘file:///path_to_js’ из источника ‘null’ заблокирован политикой CORS: запросы с разными источниками поддерживаются только для схем протоколов: http, data, chrome-extension, edge, https, chrome-ненадежный.

Я увидел data список здесь, поэтому попробовал, тогда это, казалось, сработало.

Однако я не уверен, разрешено ли это в принципе.

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