html中毫秒转换时间,HTML5：如何以毫秒为单位获取音频标签的当前时间和持续时间(HTML5: How to get currentTime and duration of Audio Tag i...

HTML5：如何以毫秒为单位获取音频标签的当前时间和持续时间(HTML5: How to get currentTime and duration of Audio Tag in milliseconds)

我正在使用HTML5音频标签播放我的模板中的声音文件。 出于某种目的，我需要跟踪显示高达毫秒的当前时间和持续时间。 现在我能够以秒为单位获取这些值。 有没有可能的方法？ 以下是我的代码：

HTML

οntimeupdate="TrackAudio(this)">

Your browser does not support the audio element

JAVASCRIPT

function TrackAudio(element){

var curTime = Math.floor(element.currentTime);

console.log(curTime) //Value in seconds.

}

I am using HTML5 audio tag for playing sound files in my template. For some purpose I need to track the currentTime and duration which shows upto milliseconds. Now I am able to get the values in seconds only. Is there any possible methods? Below is my code:

HTML

οntimeupdate="TrackAudio(this)">

Your browser does not support the audio element

JAVASCRIPT

function TrackAudio(element){

var curTime = Math.floor(element.currentTime);

console.log(curTime) //Value in seconds.

}

原文：https://stackoverflow.com/questions/23039635

更新时间：2019-11-03 11:54

最满意答案

您可以使用：

var audio = document.getElementById('track');

audio.addEventListener('timeupdate',function(){

var currentTimeMs = audio.currentTime*1000;

console.log(currentTimeMs);

},false);

您可以在这里阅读关于timeupdate 事件精度的更多信息。 这取决于浏览器的实现，所以请记住，您将从浏览器/设备获得不同的结果。

您应该使用addEventListener方法而不是ontimeupdate属性 - 它更易于维护。

另外，如果您需要浏览器覆盖范围，则最好同时使用ogg和mp3音频文件作为来源。

You can use:

var audio = document.getElementById('track');

audio.addEventListener('timeupdate',function(){

var currentTimeMs = audio.currentTime*1000;

console.log(currentTimeMs);

},false);

You can read here for more information on the precision of the timeupdate event. It is dependent on the browser implementation so keep in mind you will get different results from a browser/device to another.

You should use addEventListener method rather than the ontimeupdate property - it is more maintainable.

Also if you need browser coverage it is good to use both ogg and mp3 audio files as sources.

相关问答

您可以使用：

var audio = document.getElementById('track');

audio.addEventListener('timeupdate',funct

...

这一切归结到特定的MP3文件。 估计一个MP3文件的长度听起来像是一个简单的任务，但没有一个正确的方法来做到这一点。 游戏中有不同的标签标准，有时这些标签会存储一个长度，这可能会也可能不准确。 另一种方法是确定MP3文件是否是一个常量与可变比特率文件，然后确定一些数字以确定长度。 我的猜测是Safari做前者(估计带有标签)来查找126秒的真实长度，而Chrome则通过后者(按比特率和文件大小猜测)猜测长度为227秒。 进一步解释： 我下载了用于分析的MP3(clown-car_2.mp3)。 它

...

以下是你如何做的一个例子 window.addEventListener('load', function() {

var cur = document.querySelector('#cur'),

dur = document.querySelector('#dur')

vid = document.querySelector('#aud')

})

aud.addEventListener('timeupdate', function(e) {

...

这是Chrome中带有wave文件的错误。 我向Chrome团队报告了它，现在它按预期工作了。 它不是一个真正的答案，但这就是发生的事情。 This was a bug in Chrome with wave files. I reported it to Chrome team and now its working as expected. Its not a real answer, but this is what happened.

使用ngModel进行双向绑定 ：

type="range"

min="0"

max="{{max}}"

[(ngModel)]="currentTime"/>

这是一个可用的Stackblitz： https ：//stackblitz.com/edit/two-way-range-input Use ngModel for two-way binding:

type="range"

min="0"

max="{{max}}"

...

有关于此的更多信息。 原来你在进行play()调用之前不能设置currentTime。 至少不在Windows手机上。 所以我必须先调用播放，然后(在x毫秒之后)我可以设置当前时间。 我现在的想法是在我的声音文件中保持一些沉默，并持续保持沉默。 当我想播放声音时，我可以设置当前时间。 当声音部分完成后，我再次启动沉默循环。 使用多轨道会容易得多，但我不幸的是没有这个选项。 因此，可以在Windows Phone 8上使用currentTime。但是我遇到了另一个问题。 由于我现在一直在播放声音，所

...

好的，第一件事是第一件事。 获取JavaScript代码并将其从

元素中取出。 这打破了一些事情 var mediaClip = document.getElementbyId("mediaClip");

因为它试图在浏览器进入该行代码并创建该DOM元素之前查找元素“mediaClip”。 在HTML代码后面添加JavaScript将允许浏览器创建DOM元素，然后您的代码将运行。 其次，你的JavaScript中有一些拼写错误。 你尝试使用方法getElementbyId两次(注意小写

...

我认为你误解了stop()的第一个参数是什么。 它表示相对于音频上下文时间的时间量，这意味着在调用stop() ，您需要将该时间添加到它： source.stop(context.currentTime + 0.25);

由于函数接受double，因此不应将其舍入到最接近的秒。 根据Web Audio API规范 ： when参数描述声音应停止播放的时间(以秒为单位)。 它与AudioContext的currentTime属性在同一时间坐标系。 如果为此值传入0或者该值小于currentTime

...

我改用SoundManager 2。 该文档有点棘手，但现在一切正常。 I used SoundManager 2 instead. The doc is a bit tricky but Everything works fine now.

尝试 var audio = $('audio');

audio.bind('canplay', function() {

this.currentTime = 20;

});

audio.get(0).play();

Try var audio = $('audio');

audio.bind('canplay', function() {

this.currentTime = 20;

});

audio.get(0).play();