Question

我知道可以通过Actionscript为声音对象设置动画。我真的希望用JavaScript来动画对象也是可能的，因为它们非常相似。

也许可以用jQuery或HTML5完成。我只是希望能找到一种方法在flash之外完成它。

是否有人知道这些格式是否可行？我做了很多研究，似乎找不到任何可能与否的表格或教程。

基本上，我试图实现我在Actionscript中编写的相同效果，但我希望使用其他语言编写代码，因此没有flash视图也可以看到。

以下是Flash示例： http://beaubird.com/presentation.php

以下是使用actionscript制作幅度动画的示例： http://www.developphp.com/view.php?tid=22

Answer 1

我创建了an example that changes the radius and color of an svg circle element based on audio amplitude。

这适用于WebKit浏览器，但没有别的。据我所知，Webkit浏览器是唯一接近实现W3C Web Audio API Spec的浏览器，但Mozilla Audio Data API Documentation似乎表明Mozilla已放弃该规范，并将实施Web Audio API 。我幸福地没有意识到Internet Explorer实现（或缺少）规范的状态。

不幸的是，现在的答案是，除了Flash之外，没有什么比这更好的跨浏览器解决方案了，但是如果你走这条路，就会搞砸移动设备。

这是full, working JSBin example。

这是代码：

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）和RMS值。

Answer 3

KievII库（http://kievii.net）针对音频应用程序。也许你可以在那里找到有用的东西（例如，你可以为Wavebox对象或一系列ClickBar对象设置动画）。看看那里的例子：http://kievII.net/examples.html

通过声音幅度动画对象？

3 个答案: