javascript HTML5 音频 - 进度条
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10672089/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML5 Audio - Progress Bar
提问by Ammar Navid
I am trying to make an MP3 player in HTML5. Almost all of the work is done but what I need is that I want to replace the default controls from the <audio>tag and make my very own controls. Simple controls like play, pause, stop and volume are done but I want to make a progress bar that tracks the duration of the audio/MP3 , where when I click at the relevant position goes to the specific position on the track. Like the one in the following example.
我正在尝试用 HTML5 制作 MP3 播放器。几乎所有的工作都完成了，但我需要的是我想替换<audio>标签中的默认控件并制作我自己的控件。播放、暂停、停止和音量等简单控件已完成，但我想制作一个进度条来跟踪音频/MP3 的持续时间，当我点击相关位置时会转到轨道上的特定位置。就像下面例子中的那个。
http://msdn.microsoft.com/en-us/library/ie/gg589528(v=vs.85).aspx
http://msdn.microsoft.com/en-us/library/ie/gg589528(v=vs.85).aspx
The thing here is that in the above example the file/MP3 is already load and I am actually creating an audio element by using document.createElement("audio");
这里的事情是，在上面的例子中，文件/MP3 已经加载，我实际上是通过使用创建一个音频元素 document.createElement("audio");
When I tried using different ways to change the above example I mostly get an error “cannot call method addeventlistener of null”. I want this player to run on Chrome.
当我尝试使用不同的方法来改变上面的例子时，我主要是收到一个错误“无法调用 null 的 addeventlistener 方法”。我想让这个播放器在 Chrome 上运行。
Thanks in advance for your support and help.
在此先感谢您的支持和帮助。
回答by Ian Devlin
There's a progress bar example in this tutorial I wrote a while back: Working with HTML5 multimedia components – Part 3: Custom controls . The calls etc. should be the same for a dynamically created audioelement.
在我之前写过的本教程中有一个进度条示例：使用 HTML5 多媒体组件 – 第 3 部分：自定义控件。对于动态创建的audio元素，调用等应该是相同的。
But yes, some code examples of what you're doing would be useful.
但是，是的，您正在做的一些代码示例会很有用。
