Javascript HTML5音频API-“HTML5音频API”；音频资源不可用于音频上下文构建”；

我正在尝试使用webkitAudioContext为HTML5 audio-Chrome创建一个图形均衡器类型的可视化

当我试图改变音频源，即播放不同的歌曲时，我发现了不寻常和不可预测的行为。我在某个地方读到，在将音频连接到上下文/分析器之前，我应该等待音频上的“canplay”事件被触发：

var context, sourceNode, analyser, javascriptNode, audio;

var ctx = $("#songcanvas").get()[0].getContext("2d");    


function loadSong(url) { 
    if (audio!=undefined) { audio.pause(); }
    audio = new Audio();
    audio.src = url;
    audio.addEventListener("canplay", function(e) {
         setupAudioNodes();
    }, false);
}

function setupAudioNodes() {
        context = new webkitAudioContext();
        javascriptNode = context.createJavaScriptNode(2048, 1, 1);
        javascriptNode.connect(context.destination);

        analyser = context.createAnalyser();
        analyser.smoothingTimeConstant = 0.3;
        analyser.fftSize = 512;

        sourceNode = context.createMediaElementSource(audio);
        sourceNode.connect(analyser);
        analyser.connect(javascriptNode);

        sourceNode.connect(context.destination);

        javascriptNode.onaudioprocess = function() {
            var array =  new Uint8Array(analyser.frequencyBinCount);
            analyser.getByteFrequencyData(array);
            ctx.clearRect(0, 0, 1000, 325);
            ctx.fillStyle="rgba(32, 45, 21,1)";
            drawSpectrum(array);
        }
        audio.play();
}

function drawSpectrum(array) {
    for ( var i = 0; i < (array.length); i++ ){
        var value = array[i];
        ctx.fillRect(i*5,325-value,3,325);
    }
};

var上下文、sourceNode、Analyzer、javascriptNode、audio；
var ctx=$（“#songcanvas”）.get（）[0].getContext（“2d”）；
函数loadSong（url）{
如果（音频！=未定义）{audio.pause（）；}
音频=新音频（）；
audio.src=url；
audio.addEventListener（“canplay”，函数（e）{
setupAudioNodes（）；
}，假）；
}
函数setupAudioNodes（）{
context=新的webkitAudioContext（）；
javascriptNode=context.createJavaScriptNode（2048,1,1）；
连接（context.destination）；
Analyzer=context.createAnalyzer（）；
Analyzer.smoothingTimeConstant=0.3；
Analyzer.fftSize=512；
sourceNode=context.createMediaElementSource（音频）；
连接（分析仪）；
connect（javascriptNode）；
连接（context.destination）；
javascriptNode.onaudioprocess=function（）{
var阵列=新UINT8阵列（分析仪频率BINCOUNT）；
分析仪。GetByTefFrequencyData（阵列）；
ctx.clearRect（0,0,1000,325）；
ctx.fillStyle=“rgba（32,45,21,1）”；
频谱（阵列）；
}
音频播放（）；
}
函数谱（阵列）{
对于（变量i=0；i<（array.length）；i++）{
var值=数组[i]；
ctx.fillRect（i*5325值，3325）；
}
};

前三到四次我更改源代码时，它工作正常，但最终因“未捕获的SyntaxError:音频资源无法用于音频上下文构建”而失败

---

这里有完整的演示

如果您只是想绘制频谱，我建议不要创建

JavaScriptNode

。相反，请尝试使用

requestAnimationFrame

方法，因为它将节省CPU周期，并使您更接近恒定的60fps（如果窗口/选项卡位于后台，则此方法尤其有用，因为任何包装在

requestAnimationFrame

中的函数都将等待窗口再次聚焦后再触发）

您可能会出现此错误的原因是：A）每个窗口只能创建一个

AudioContext

，B）使用完后应该断开

MediaElementSource

，C）还应该删除实际的

Audio

元素

下面是我在上面概述的更改的演示：

window.AudioContext=window.AudioContext | | window.webkitadiocontext；
var context=new AudioContext（），
音频动画、源节点、分析器、音频、，
songs=document.getElementById（'songs'），
canvas=document.getElementById（'songcanvas'），
宽度=画布宽度，
高度=画布高度，
//从画布获取要绘制的上下文
ctx=canvas.getContext（'2d'），
渐变=ctx.createLinearGradient（0,0,0，高度），
条={宽度：2，间隙：2，比率：高度/256}；
gradient.addColorStop（1.00，#000000'）；
渐变。添加颜色停止（0.75，#ff0000'）；
渐变。添加颜色停止（0.25'#ffff00'）；
渐变。添加颜色停止（0.00，#ffff00'）；
ctx.fillStyle=渐变；
songs.addEventListener（'click'，loadSong，false）；
函数loadSong（e）{
e、 预防默认值（）；
var url=e.target.href；
如果（！url）返回false；
if（audio）audio.remove（）；
if（sourceNode）sourceNode.disconnect（）；
取消动画帧（音频动画）；
音频=新音频（）；
audio.src=url；
addEventListener（'canplay'，setupAudioNodes，false）；
}
函数setupAudioNodes（）{
Analyzer=（Analyzer | | context.createAnalyzer（））；
分析仪.平滑时间常数=0.8；
Analyzer.fftSize=512；
sourceNode=context.createMediaElementSource（音频）；
连接（分析仪）；
连接（context.destination）；
音频播放（）；
绘图谱（）；
}
函数谱（）{
var freq=新UINT8阵列（分析仪频率BINCOUNT）；
分析仪。GetByTefFrequencyData（频率）；
ctx.clearRect（0，0，宽度，高度）；
audioAnimation=requestAnimationFrame（drawSpectrum）；
对于（变量i=freq.length-1；i>=0；i--）{
var x=i*（条形宽度+条形间隙）；
变量y=高度-（频率[i]*棒比）；
ctx.fillRect（x，y，条形宽度，高度）；
}
}

body{font-family:sans-serif；背景色：#000；}
a{color:#fff；文本装饰：无；}
ul{填充：20px 0；宽度：100px；}
ul，canvas{float:left；}