我在页面中有一个 HTML5 的 <audio>
标签,但如何知道它的播放时长?
<audio controls="">
<source src="p4.2.mp3">
</audio>
2020年的解决方案:
当音频元数据尚未加载时,你会得到 undefined
或 NaN
(不是一个数字)。因此,有些人建议使用 onloadedmetadata
确保首先获取音频文件的元数据。此外,大多数人没有提到的是,你必须使用类似于 [0]
这样的方式来定位音频 DOM 元素的第一个索引:
-- 原生 JavaScript:
var audio = document.getElementById('audio-1');
audio.onloadedmetadata = function() {
alert(audio.duration);
};
如果这个方法行不通,可以尝试这个方法,但它不是很可靠,而且还要依赖用户的连接。setTimeout(function () {
var audio = document.getElementById('audio-1');
console.log("audio", audio.duration);
}, 100);
-- JQuery:
$(document).ready(function() {
var audio = $("#audio-1")[0];
$("#audio-1").on("loadedmetadata", function() {
alert(audio.duration);
});
});
var au = document.createElement('audio');
au.addEventListener('loadedmetadata',function(){
au.setAttribute('data-time',au.duration);
},false);
audio.onloadedmetadata = function() {
alert(audio.duration);
};
我曾苦恼于在React组件中加载持续时间,因此遵循@AlexioVay的解决方案,如果您正在使用React,则以下是答案:
假设您正在使用ref
用于音频组件类,您需要针对audio
元素进行播放/暂停处理程序。
<audio />
元素:
<audio ref={audio => { this.audio = audio }} src={this.props.src} preload="auto" />
componentDidMount()
中:componentDidMount() {
const audio = this.audio
audio.onloadedmetadata = () => {
console.log(audio.duration)
this.setState({
duration: this.formatTime(audio.duration.toFixed(0))
})
}
}
最后是 formatTime()
函数:
formatTime(seconds) {
const h = Math.floor(seconds / 3600)
const m = Math.floor((seconds % 3600) / 60)
const s = seconds % 60
return [h, m > 9 ? m : h ? '0' + m : m || '0', s > 9 ? s : '0' + s]
.filter(a => a)
.join(':')
}
当音频 src 数据加载完成后,时间长度将以 h:mm:ss
的格式显示。非常棒。
$('#' + _currentPlayerID).on("canplaythrough", function (e) {
var seconds = e.currentTarget.duration;
var trackmills = seconds * 1000;
var subTimeout = trackmills - 2000; //2 seconds before end
//console.log('seconds ' + seconds);
//console.log('trackmills ' + trackmills);
//console.log('subTimeout ' + subTimeout);
//Stop playing before the end of thet track
//clear this event in the Pause Event
_player2TimeoutEvent = setTimeout(function () { pausePlayer2(); }, subTimeout);
});
只需使用audioElement.duration
var audio = $('#audio')[0]; console.log('audio', audio.duration);
但是结果是 NaN
。 - hh54188setTimeout(function () { ... }, 10);
而不是立即执行时,它可以正常工作。 - AlexioVay最好像这样使用事件...
ObjectAudio.onprogress =function(){
if(this.buffered.length){
var itimeend = (this.buffered.length>1)? this.buffered.end(this.buffered.length-1):this.buffered.end(0);
....
Your code here.......
}
}