我想显示 html 5 音频元素的当前时间和该元素的持续时间。我一直在浏览互联网,但找不到一个功能脚本,它允许我显示音频文件的长度以及当前的时间,例如 1:35 / 3:20。
任何人有任何想法:)?
我想显示 html 5 音频元素的当前时间和该元素的持续时间。我一直在浏览互联网,但找不到一个功能脚本,它允许我显示音频文件的长度以及当前的时间,例如 1:35 / 3:20。
任何人有任何想法:)?
下面是一个例子:
<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>
这应该适用于 Firefox 和 Chrome,对于其他浏览器,您可能需要添加替代编码。
这是简单的用法。请记住,html5 元素仍在开发中,因此任何事情都可能发生变化:
audio = document.getElementsByTagName("audio")[0];
//functions
audio.load();
audio.play();
audio.pause();
//properties
audio.currentSrc
audio.currentTime
audio.duration
这是参考HTML5 音频
要在播放音频时获取 currentTime,您必须附加timeupdate
事件并在回调函数中更新您的当前时间。
robertc 的版本可以正常工作,只是它不会将您从中获得的秒数math.floor()
转换为正确的时间值。
这是我在调用时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>
我修改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;
}
当您使用 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.
});
此代码肯定会在整个持续时间内有效。要获得当前时间,您只需使用song.currentTime;
代替song.duration;
整个代码将保持不变。
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);