在HTML5中播放音频时的动画

时间:2013-01-23 12:58:45

标签: javascript jquery html5 css3 audio

我有一个由不同团队编程的flash播放器。现在我有一个项目,我需要将该播放器重新编程为HTML5。 Flash播放器的所有功能看起来都可行。我只是不确定如何在播放音频时显示动画。例如。当节拍变高时,动画显示更多,当动画显示较少时会有一点沉默。有人可以帮帮我吗?

要了解一下,请参阅附件截图:

enter image description here

1 个答案:

答案 0 :(得分:1)

使用SoundManager2,您可以轻松访问波形数据并使用它进行图形显示:

someSoundObject.whileplaying = function() {
  // Move 256 absolutely-positioned 1x1-pixel DIVs, for example (ugly, but works)
  var gPixels = document.getElementById('graphPixels').getElementsByTagName('div');
  var gScale = 32; // draw -32 to +32px from "zero" (i.e., center Y-axis point)
  for (var i=0; i<256; i++) {
    graphPixels[i].style.top = (gScale+Math.ceil(this.waveformData.left[i]*-gScale))+'px';
  }
}

http://www.schillmania.com/projects/soundmanager2/doc/