Javascript html5 显示音频 currentTime
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4993097/
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 display audio currentTime
提问by Lenny Magico
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.
我想显示 html 5 音频元素的当前时间和该元素的持续时间。我一直在寻找互联网，但找不到一个功能脚本，它允许我显示音频文件的长度以及当前的时间，例如 1:35 / 3:20。
Any one got any ideas :)?
任何人有任何想法:)？
采纳答案by robertc
Here's an example:
下面是一个例子：
<audio id="track" src="http://upload.wikimedia.org/wikipedia/commons/a/a9/Tromboon-sample.ogg"
ontimeupdate="document.getElementById('tracktime').innerHTML = Math.floor(this.currentTime) + ' / ' + Math.floor(this.duration);">
<p>Your browser does not support the audio element</p>
</audio>
<span id="tracktime">0 / 0</span>
<button onclick="document.getElementById('track').play();">Play</button>
This should work in Firefox and Chrome, for other browsers you'll probably need to add alternative encodings.
这应该适用于 Firefox 和 Chrome，对于其他浏览器，您可能需要添加替代编码。
回答by u476945
here is simple usage. keep in mind html5 elements are still in the works so anything can change:
这是简单的用法。请记住，html5 元素仍在开发中，因此任何事情都可能发生变化：
audio = document.getElementsByTagName("audio")[0];
//functions
audio.load();
audio.play();
audio.pause();
//properties
audio.currentSrc
audio.currentTime
audio.duration
here is the reference HTML5 Audio
这是参考HTML5 音频
to get the currentTime while audio is playing you must attach the timeupdateevent and update your current time within the callback function.
要在播放音频时获取 currentTime，您必须附加timeupdate事件并在回调函数中更新您的当前时间。
回答by KStensland
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.
robertc 的版本可以正常工作，只是它不会将您从中获得的秒数math.floor()转换为正确的时间值。
Here is my function called when ontimeupdateis called:
这是我在调用时ontimeupdate调用的函数：
<audio id='audioTrack' ontimeupdate='updateTrackTime(this);'>
Audio tag not supported in this browser</audio>
<script>
function updateTrackTime(track){
var currTimeDiv = document.getElementById('currentTime');
var durationDiv = document.getElementById('duration');
var currTime = Math.floor(track.currentTime).toString();
var duration = Math.floor(track.duration).toString();
currTimeDiv.innerHTML = formatSecondsAsTime(currTime);
if (isNaN(duration)){
durationDiv.innerHTML = '00:00';
}
else{
durationDiv.innerHTML = formatSecondsAsTime(duration);
}
}
</script>
I modified formatSecondsAsTime()from something I found here:
我修改formatSecondsAsTime()了我在这里找到的东西：
function formatSecondsAsTime(secs, format) {
var hr = Math.floor(secs / 3600);
var min = Math.floor((secs - (hr * 3600))/60);
var sec = Math.floor(secs - (hr * 3600) - (min * 60));
if (min < 10){
min = "0" + min;
}
if (sec < 10){
sec = "0" + sec;
}
return min + ':' + sec;
}
回答by Anuj Sharma
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.
当您使用 audio.duration() 时。它会在几秒钟内给你结果。你只需要在几分钟和几秒钟内改变它。代码演示就在这里，希望对你有帮助。
song.addEventListener('timeupdate',function (){
var duration = song.duration; //song is object of audio. song= new Audio();
var sec= new Number();
var min= new Number();
sec = Math.floor( duration );
min = Math.floor( sec / 60 );
min = min >= 10 ? min : '0' + min;
sec = Math.floor( sec % 60 );
sec = sec >= 10 ? sec : '0' + sec;
$("#total_duration").html(min + ":"+ sec); //Id where i have to print the total duration of song.
});
This code will definitely work for total duration. To get current Time, you just have to use song.currentTime;in place of song.duration;Whole code will remain same.
此代码肯定会在整个持续时间内有效。要获得当前时间，您只需使用song.currentTime;代替song.duration;整个代码将保持不变。
回答by Israt Jahan Simu
ES6
ES6
const audio = new Audio();
audio.src = document.querySelector('#audio').src;
audio.play();
audio.addEventListener('timeupdate', (event) => {
const currentTime = Math.floor(audio.currentTime);
const duration = Math.floor(audio.duration);
}, false);
回答by yourkishore
for those who are looking to implement timeupdate in your jquery.
对于那些希望在您的 jquery 中实现 timeupdate 的人。
<audio id="myAudio">
<source src='test.mp3' type="audio/mp3" />
</audio>
$("audio#myAudio").get(0).addEventListener("timeupdate",function(){
// do your stuff here
});
回答by Smit Shilpatul
to find the length of a audio file is simple!:
查找音频文件的长度很简单！：
<html>
<head>
</head>
<body>
<audio controls="" id="audio">
<source src="audio.mp3">
</audio>
<button id="button">
<p id="p"></p>
GET LENGTH OF AUDIO
</button>
<script>
var MYAUDIO = document.getElementById(audio);
var MYBUTTON = document.getElementById(button);
var PARA = document.getElementById(p);
function getAudioLength() {
PARA.innerHTML = duration.MYAUDIO
}
MYBUTTON.addEventListener(click, getAudioLength);
</script>
</body>
</html>
回答by Ivan Lencina
On TypeScript:
在打字稿上：
formatTime(seconds: number): string {
let minutes: any = Math.floor(seconds / 60);
let secs: any = Math.floor(seconds % 60);
if (minutes < 10) {
minutes = '0' + minutes;
}
if (secs < 10) {
secs = '0' + secs;
}
return minutes + ':' + secs;
}
Remember to replace magic numbers with constants. It's an example.
请记住用常量替换幻数。这是一个例子。
