在 HTML5 中播放音频时的动画
Posted
技术标签:
【中文标题】在 HTML5 中播放音频时的动画【英文标题】:Animation while playing audio in HTML5 【发布时间】:2013-01-23 12:58:45 【问题描述】:我有一个由不同团队编写的 Flash 播放器。现在我有 1 个项目,我需要将该播放器重新编程为 html5。 Flash 播放器的所有功能看起来都是可行的。我只是不确定在播放音频时如何显示动画。例如。当节拍变高时,动画显示得更多,而安静时动画显示得更少。有人可以帮帮我吗?
为了得到一个想法,这里是所附的截图:
【问题讨论】:
【参考方案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/
【讨论】:
谢谢,但这是基于 Flash 的。我不想要任何Flash。它必须是纯 HTML5。我不认为这些方法像 whileplaying 在没有 Flash 的情况下可用。 其实可以force HTML5 player with a parameter(schillmania.com/projects/soundmanager2/doc/…),文档显示whileplaying 确实适用于HTML5。你甚至可以set the polling interval for the HTML5 player(schillmania.com/projects/soundmanager2/doc/…)以上是关于在 HTML5 中播放音频时的动画的主要内容,如果未能解决你的问题,请参考以下文章
Html5之高级-5 HTML5音频处理(在H5中播放音频编程实现音频播放器)
如何通过javascript删除html5音频播放器中的源音频文件