通过声音振幅动画对象？(Animate object by sound amplitude?)

我知道这是可能通过ActionScript进行动画具有声音的对象。我真的希望它也有可能，因为它们是非常相似的动画用JavaScript对象。

也许这可能与jQuery或HTML5来实现。我只是希望能找到一个方法来做到这一点闪光之外。

有谁知道这是否可能在任何格式？ 我已经做了很多的研究，似乎无法找到说它是可以或不可以任何形式或教程。

基本上，我想实现我在Actionscript中编码此相同的效果，但我想用另一种语言，所以没有闪光灯的观点也可以看到它的代码。

这里是flash例如： http://beaubird.com/presentation.php

这里是用ActionScript动画振幅的一个示例： http://www.developphp.com/view.php?tid=22

Answer 1:

我创建改变基于音频幅度的SVG元素圆的半径和颜色的例子。

这将在WebKit浏览器的工作，但没有别的 。 WebKit浏览器是来甚至接近实现的唯一浏览器W3C的Web音频API规格，据我所知，但Mozilla的音频数据API文档似乎表明，Mozilla已经放弃了这一规范，也将被实现Web音频API 。我一无所知Internet Explorer的执行状态（或缺乏）的规范的。

遗憾的是，答案现在是，有比闪存此之外没有伟大的跨浏览器的解决方案，但如果你走这条路，你就完蛋了在移动设备上。

下面是完整的，工作JSBin例子。

而这里的代码：

HTML：

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8 />
        <title>Drums</title>
    </head>
    <body>
        <svg width="200" height="200">
            <circle id="circle" r="10" cx="100" cy="100" />
        </svg>
    </body>
</html>

使用Javascript：

var context = new webkitAudioContext();

// Here's where most of the work happens
function processAudio(e) {
  var buffer = e.inputBuffer.getChannelData(0);
  var out = e.outputBuffer.getChannelData(0);
  var amp = 0;

  // Iterate through buffer to get the max amplitude for this frame
  for (var i = 0; i < buffer.length; i++) {
    var loud = Math.abs(buffer[i]);
    if(loud > amp) {
      amp = loud;
    }
    // write input samples to output unchanged
    out[i] = buffer[i];
  }

  // set the svg circle's radius according to the audio's amplitude
  circle.setAttribute('r',20 + (amp * 15));

  // set the circle's color according to the audio's amplitude
  var color = Math.round(amp * 255);
  color = 'rgb(' + color + ',' + 0 + ',' + color + ')';
  circle.setAttribute('fill',color);
}

window.addEventListener('load',function() {
  var circle = document.getElementById('circle');

  // Add an audio element
  var audio = new Audio();
  audio.src = 'http://www.mhat.com/phatdrumloops/audio/acm/mole_on_the_dole.wav';
  audio.controls = true;
  audio.preload = true;
  document.body.appendChild(audio);


  audio.addEventListener('canplaythrough',function() {
    var node = context.createMediaElementSource(audio);

    // create a node that will handle the animation, but won't alter the audio
    // in any way        
    var processor = context.createJavaScriptNode(2048,1,1);
    processor.onaudioprocess = processAudio;

    // connect the audio element to the node responsible for the animation
    node.connect(processor);

    // connect the "animation" node to the output
    processor.connect(context.destination);

    // play the sound
    audio.play();
  });
});

Answer 2:

使用JavaScript节点来评估幅度将工作，但不太理想的性能的原因。我建议使用一个requestAnimationFrame定时器RealtimeAnalyser。您可以从代码开始http://updates.html5rocks.com/2012/02/HTML5-audio-and-the-Web-Audio-API-are-BFFs ，只需使用一个较小的fftSize（128）和有效值值。