1

我有一个按钮。每点击一次，就会播放一段音乐。第二次点击时，音乐继续播放。我也想把音乐形象化。

所以我从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 中不起作用，因为我不知道如何正确编写 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();

它没有显示任何内容。

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

4

2 回答 2

2

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

例如：

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

希望有帮助！

——克里斯·威尔逊

于 2012-10-31T18:09:13.743 回答
0

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

请注意，API 似乎没有指定这一点，所以我不是 100% 确定，但这很直观。

于 2012-10-31T09:35:06.093 回答