HTML5 音频 - 进度条答案

【问题标题】：HTML5 Audio - Progress BarHTML5 音频 - 进度条
【发布时间】：2012-05-27 04:14:22
【问题描述】：

我正在尝试用 HTML5 制作 MP3 播放器。几乎所有的工作都完成了，但我需要的是我想替换 <audio> 标记中的默认控件并制作我自己的控件。播放、暂停、停止和音量等简单控件已完成，但我想制作一个进度条来跟踪音频/MP3 的持续时间，当我单击相关位置时，会转到轨道上的特定位置。就像下面的例子一样。

http://msdn.microsoft.com/en-us/library/ie/gg589528(v=vs.85).aspx

这里的问题是，在上面的示例中，文件/MP3 已经加载，我实际上正在使用 document.createElement("audio"); 创建一个音频元素

当我尝试使用不同的方法来更改上面的示例时，我大多得到一个错误“无法调用 null 的 addeventlistener 方法”。我想让这个播放器在 Chrome 上运行。

提前感谢您的支持和帮助。

【问题讨论】：

您可能想为此使用画布。每个audio 元素都有一个持续时间和当前时间属性，因此，您可以执行以下操作：fillRect(posx, posy, audio.current_time/audio.duration*width, height)。我忘记了确切的名字，但你会在谷歌搜索几分钟后得到它们。
“cannot call method addeventlistener of null”是一个通用的 Javascript 错误。使用 Firefox Firebug 之类的调试器来调试你的角色有什么问题。
你能发布你的代码或创建一个小提琴吗？
该错误意味着您正在尝试将事件侦听器添加到尚不存在的对象。在微软的例子中：确保var oAudio = document.getElementById('myaudio');在之前 oAudio.addEventListener("timeupdate", progressBar, true);被执行。
这能回答你的问题吗？ Custom progress bar for <audio> and <progress> HTML5 elements

标签： javascript html audio canvas

【解决方案1】：

我不久前写的本教程中有一个进度条示例：Working with HTML5 multimedia components – Part 3: Custom controls 。对于动态创建的audio 元素，调用等应该相同。

但是，是的，您正在做的一些代码示例会很有用。

【讨论】：