Question

我有一个按钮。每次单击时，都会播放音乐。当它第二次点击时，音乐恢复。我也希望将音乐可视化。

所以我从 html5音频开始（http://jsfiddle.net/karenpeng/PAW7r/中的完整代码）：

  $("#1").click(function(){
    audio1.src = '1.mp3';
    audio1.controls = true;
    audio1.autoplay = true;
    audio1.loop = true;

    source = context.createMediaElementSource(audio1);

    source.connect(analyser);
    analyser.connect(context.destination);
    });

但是当它点击不止一次时，就会出现console.log错误：

    Uncaught Error: INVALID_STATE_ERR: DOM Exception 11

然后我更改为使用网络音频API ，并将来源更改为：

    source = context.createBufferSource();

错误消失了。

然后，我需要想象它。但具有讽刺意味的是， html5音频 只能！

（http://jsfiddle.net/karenpeng/FvgQF/中的完整代码，它在jsfiddle cuz中不起作用我不知道如何正确编写processing.js脚本，但它确实在我的电脑上运行）

     var audio = new Audio();
     audio.src = '2.mp3';
     audio.controls = true;
     audio.autoplay = true;
     audio.loop=true;
     var context = new webkitAudioContext();
     var analyser = context.createAnalyser();

     var source = context.createMediaElementSource(audio);
     source.connect(analyser);
     analyser.connect(context.destination);

     var freqData = new Uint8Array(analyser.frequencyBinCount);
     analyser.getByteFrequencyData(freqData);

         //visualization using freqData

当我将源更改为：

    source = context.createBufferSource();

它没有显示任何内容。

那么有没有办法可视化它并且没有错误并使其能够一次又一次地恢复？

Answer 1

实际上，我认为问题在于您正在尝试为同一媒体元素创建一个SECOND网络音频节点。（您的代码在单击时会重新设置SRC，控件等，但它不会创建新的Audio（）。）您应该挂起您创建的MediaElementAudioSourceNode，或者创建新的Audio元素。

E.g：

var context = new webkitAudioContext();
var analyser = context.createAnalyser();
var source = null;    
var audio0 = new Audio();

$("#0").click(function(){
    audio0.src = 'http://www.bornemark.se/bb/mp3_demos/PoA_Sorlin_-_Stay_Up.mp3';
    audio0.controls = true;
    audio0.autoplay = true;
    audio0.loop = true;

    if (source==null) {
        source = context.createMediaElementSource(audio0);
        source.connect(analyser);
        analyser.connect(context.destination);
    }
});

希望有所帮助！

-Chris Wilson

Answer 2

据我所知，这可能是因为MediaElementSourceNode可能只能接收尚未播放的Audio。 Audio对象在click处理程序之外声明，因此您尝试分析第二次单击时播放的音频。

请注意，API似乎没有指定这个，所以我不是百分百肯定，但这很直观。

音频API：无法恢复音乐并可视化。 html5-audio中有错误吗？

2 个答案: