HTML5 Audio — analyzing output?

问题:

Is there a way to directly analyze the output of the content of an audio tag, and use the output? To be more clear, what I want to do is use the sound levels of the audio content to make a ball bounce higher or lower (using html5 canvas) depending on the level of the sound.

For example, it would be really handy if there was something like audioElement.getVolumeLevel(), although I don't know if such a thing exists.

Also, this question is specifically about using the audio element. I am aware of other methods, but I thought that this would probably work best with what I'm doing right now -- and if a simple solution exists, then I'd rather not have to bring extra libraries into my stuff.

回答1:

In Firefox, it's possible but it's not yet standardized as far as I know ( Chrome probably supports it as well ):

https://wiki.mozilla.org/Audio_Data_API

Webkit API proposal: https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html

And a handful of related articles / demos:

http://ajaxian.com/by/topic/sound

http://ajaxian.com/archives/amazing-audio-api-javascript-demos

回答2:

There are currently three different Audio APIs being worked on, all different and working in various browsers. Nothing is standardised as yet sadly, but it will get there eventually.

回答3:

You can change volume levels under both Firefox and Chrome like this:

var aud = document.getElementsByTagName('audio')[0]
aud.play()
aud.volume *= 0.5

Setting the volume returns the reset level, so for instance if you try it in the JS console:

> aud.volume *= 0.5
0.015625
> aud.volume *= 0.5
0.0078125
> aud.volume *= 0.5
0.00390625

That lowers the volume... HTH.