Как исправить ошибку MediaElementAudioSource outputs zeroes due to CORS access restrictions for... (Web Audio API)?

Question

[raury]

let audio = new Audio();
audio.src = 'music.mp3';
audio.controls = true;
audio.loop = true;
audio.autoplay = true;

window.addEventListener("load", init, false);

function init(){
    document.getElementById('audio_box').append(audio);
    audioCtx = new (window.AudioContext || window.webkitAudioContext); 
    
    source = audioCtx.createMediaElementSource(audio);
    source.connect(audioCtx.destination);

}

Ошибка появляется из-за:
source = audioCtx.createMediaElementSource(audio);

Решение из интернета в виде:
source.connect(audioCtx.destination);
и
audio.crossOrigin = "anonymous";
не помогают.

Answer 1

[volevol]

Взято с комментариев автора под видео Web Audio API Аудио Визуализация JavaScript Урок

Проблема решена, думаю вы запустили файл не используя локальный сервер или хостинг. Установите локальный сервер для тестирования. Вот урок: Устанавливаем локальный сервер (Open Server) или разместите его на хостинге. К сожалению не будет работать, если распаковать, и просто запустить index.html, а вот, если разместить в интернете на хостинге или на локальном сервере, то да - работать будет. Ещё можно попробовать запустить в Microsoft Edge как вариант, А Google Chrome , как я понял, по умолчанию в настройках безопасности запрещает выполнение локального скрипта, без использования локального сервера, или хостинга. Можно ещё залить на гитхаб и запустить, используя его как сервер.