私はan example that changes the radius and color of an svg circle element based on audio amplitudeを作成しました。
これはWebKitブラウザでは機能しますが、その他のものはです。 W3C Web Audio API Specの実装に至るまで、Webkitブラウザは私が知る限りでは唯一のブラウザだが、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を：振幅を評価するために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();
});
});
正確にはどういう意味ですか？あなたが投稿したビデオは、Flashでプレーヤーを作る男を示していますが、正確に何をしたいですか？ （画像は素晴らしいでしょう） – corazza
私はオブジェクトの振幅、すなわち音で開閉するくちばしをアニメーションしたいと思います。ここでは、それがどのようにフラッシュで動作するの例です：http://beaubird.com/presentation.php –
可能性があります新しいHTML5機能[これを見て]（http://www.html5rocks.com/ en/tutorials/getusermedia/intro /） –