ho creato an example that changes the radius and color of an svg circle element based on audio amplitude.
Questo funzionerà nei browser WebKit, ma nient'altro. I browser Webkit sono gli unici browser che arrivano persino a implementare lo W3C Web Audio API Spec, per quanto ne so, ma lo Mozilla Audio Data API Documentation sembra indicare che Mozilla ha abbandonato quella specifica e implementerà anche l'API Web Audio. Sono beatamente inconsapevole dello stato di implementazione di Internet Explorer (o della sua mancanza) delle specifiche.
Purtroppo, la risposta in questo momento è che non c'è grande soluzione cross-browser per questo diverso da Flash, ma se si va questa strada, sei fregato su dispositivi mobili.
Ecco il full, working JSBin example.
Ed ecco il codice:
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();
});
});
fonte
2012-11-20 05:44:22
Che cosa intendi esattamente? Il video che hai pubblicato mostra un ragazzo che realizza un player in Flash, ma che cosa vuoi ottenere esattamente? (Un'immagine sarebbe grandiosa.) – corazza
Mi piacerebbe animare un oggetto con l'ampiezza, ovvero un becco che si apre e si chiude con il suono. Ecco un esempio di come funziona in flash: http://beaubird.com/presentation.php –
Potrebbe essere possibile con nuove funzionalità HTML5, [dare un'occhiata a questo] (http://www.html5rocks.com/ it/tutorial/getusermedia/intro /) –