Javascript &引用；MediaElementAudioSource由于CORS访问限制而输出零”；加载本地mp3文件时

我知道有很多类似的线程询问相同的问题，但我的线程正在我的计算机上加载本地存储的mp3文件。网站不是托管的，我完全是离线设置的

我将按照下面发布的教程创建音频分析器：

我已经更改了不推荐使用的webkit函数。crossOrigin=“anonymous”不起作用，我认为这与我的文件托管在本地无关将crossOrigin设置为“anonymouse”可以消除错误，但播放按钮变灰。没有脚本错误，只有标题中概述的CORS访问问题。以下是完整的javascript：

var audio=新音频（）；
audio.src='track1.mp3'；
audio.controls=true；
audio.loop=true；
audio.autoplay=true；
//确定分析仪将使用的所有变量
var画布、ctx、源、上下文、分析器、fbc_数组、条形、条形、条形、条形宽度、条形高度；
//在页面将其所有HTML加载到窗口后初始化MP3播放器
addEventListener（“加载”，initmp3plyer，false）；
函数initMp3Player（）{
document.getElementById（'audio_-box'）.appendChild（audio）；
context=新的webkitAudioContext（）；//AudioContext对象实例
Analyzer=context.createAnalyzer（）；//AnalyzerNode方法
canvas=document.getElementById（'analyzer_render'）；
ctx=canvas.getContext（'2d'）；
//将音频播放重新路由到AudioContext的处理图中
source=context.createMediaElementSource（音频）；
源。连接（分析仪）；
分析器.连接（上下文.目的地）；
frameLooper（）；
}
//frameLooper（）为您希望播放音频的任何图形样式设置动画
//以浏览器提供的默认帧速率循环（约60 FPS）
函数frameLooper（）{
webkitRequestAnimationFrame（frameLooper）；
fbc_阵列=新UINT8阵列（分析仪频率b计数）；
分析仪。GetByTefFrequencyData（fbc_阵列）；
ctx.clearRect（0，0，canvas.width，canvas.height）；//清除画布
ctx.fillStyle='#00CCFF'；//条的颜色
钢筋=100；
对于（变量i=0；i

网站不是托管的，我完全是离线设置的

大多数浏览器将所有

文件：

URI视为具有不同的来源。你对此无能为力

我计划最终托管该网站，这样我就不会一直离线工作

---

现在就做。这就是你解决问题的方法。安装一个本地web服务器并将其用于开发。

你能显示你的标记吗？@vvtx当然，这是JSFIDLE，但我还没有加载曲目，因为该文件在我的硬盘上：

var audio = new Audio();
audio.src = 'track1.mp3';
audio.controls = true;
audio.loop = true;
audio.autoplay = true;
// Establish all variables that your Analyser will use
var canvas, ctx, source, context, analyser, fbc_array, bars, bar_x, bar_width, bar_height;
// Initialize the MP3 player after the page loads all of its HTML into the window
window.addEventListener("load", initMp3Player, false);
function initMp3Player(){
    document.getElementById('audio_box').appendChild(audio);
    context = new webkitAudioContext(); // AudioContext object instance
    analyser = context.createAnalyser(); // AnalyserNode method
    canvas = document.getElementById('analyser_render');
    ctx = canvas.getContext('2d');
    // Re-route audio playback into the processing graph of the AudioContext
    source = context.createMediaElementSource(audio); 
    source.connect(analyser);
    analyser.connect(context.destination);
    frameLooper();
}
// frameLooper() animates any style of graphics you wish to the audio frequency
// Looping at the default frame rate that the browser provides(approx. 60 FPS)
function frameLooper(){
    window.webkitRequestAnimationFrame(frameLooper);
    fbc_array = new Uint8Array(analyser.frequencyBinCount);
    analyser.getByteFrequencyData(fbc_array);
    ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas
    ctx.fillStyle = '#00CCFF'; // Color of the bars
    bars = 100;
    for (var i = 0; i < bars; i++) {
        bar_x = i * 3;
        bar_width = 2;
        bar_height = -(fbc_array[i] / 2);
        //  fillRect( x, y, width, height ) // Explanation of the parameters below
        ctx.fillRect(bar_x, canvas.height, bar_width, bar_height);
    }
}