我知道可以通过 Actionscript 为对象设置声音动画。我真的希望也可以使用 JavaScript 为对象设置动画，因为它们非常相似。
或许可以使用 jQuery 或 HTML5 来完成。我只是希望找到一种在 Flash 之外实现它的方法。
有人知道这些格式中的任何一种是否可行吗？我做了很多研究，但似乎找不到任何形式或教程表明它可能或不可行。 p>
基本上，我正在尝试实现与我在 Actionscript 中编码相同的效果，但我希望使用另一种语言对其进行编码，这样也无法看到 Flash View 。
这是 Flash 示例: http://beaubird.com/presentation.php
这是一个使用 ActionScript 动画振幅的例子: http://www.developphp.com/view.php?tid=22
最佳答案
我创建了 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();
});
});
关于javascript - 通过声音振幅动画对象？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13462206/