html5显示音频当前时间
我想显示 html 5 音频元素的当前时间以及该元素的持续时间。我一直在互联网上查找,但找不到一个功能脚本可以让我显示音频文件的长度以及当前时间,例如 1:35 / 3:20。
有人有什么想法吗:)?
I would like to display the current time of of an html 5 audio element and the duration of that element. I've been looking over the internet but can't find a functional script which allows me to display how long the audio files is and what the time currently is e.g. 1:35 / 3:20.
Any one got any ideas :)?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(11)
不是一个新答案,而是多个答案的混合。你可以试试这个。
Not a new answer but a mix of multiple answers. You may try this.
或者您可以使用控件
Or you can use the controls
查找音频文件的长度很简单!:
to find the length of a audio file is simple!:
这是一个示例:
这应该适用于 Firefox 和 Chrome,对于其他浏览器,您可能需要添加替代编码。
Here's an example:
This should work in Firefox and Chrome, for other browsers you'll probably need to add alternative encodings.
这是简单的用法。请记住,html5 元素仍在开发中,因此任何内容都可能发生变化:
这里是参考 HTML5 Audio
要在音频播放时获取 currentTime,您必须附加
timeupdate
事件并在回调函数中更新当前时间。简单教程音频/ dev.opera 上的视频 html5
here is simple usage. keep in mind html5 elements are still in the works so anything can change:
here is the reference HTML5 Audio
to get the currentTime while audio is playing you must attach the
timeupdate
event and update your current time within the callback function.simple tutorial audio/video html5 on dev.opera
robertc 的版本可以正常工作,只是它不会将从
math.floor()
获得的秒数转换为正确的时间值。这是调用
ontimeupdate
时调用的函数:我根据我发现的 此处:
robertc's version will work fine except for the fact that it does not turn the number of seconds you get from
math.floor()
into proper time values.Here is my function called when
ontimeupdate
is called:I modified
formatSecondsAsTime()
from something I found here:当您使用audio.duration()时。它会在几秒钟内给你结果。您只需在几分钟和几秒钟内更改此设置即可。代码演示就到这里,希望对你有帮助。
该代码肯定会在整个持续时间内有效。要获取当前时间,您只需使用
song.currentTime;
代替song.duration;
整个代码将保持不变。
When you use audio.duration(). It will give you result in seconds. You just have to change this in minutes and seconds. Demo of Code is here, hope it will help you.
This code will definitely work for total duration. To get current Time, you just have to use
song.currentTime;
in place ofsong.duration;
Whole code will remain same.
ES6
ES6
对于那些希望在 jquery 中实现 timeupdate 的人。
for those who are looking to implement timeupdate in your jquery.
在 TypeScript 上:
记住用常量替换幻数。这是一个例子。
On TypeScript:
Remember to replace magic numbers with constants. It's an example.