JavaScript获取HTML5 Audio时长的几种实现方式
作者:木棉时间:2026-10-31 13:03:34浏览:233
本文详细解析了如何在JavaScript中获取HTML5 Audio元素的时长。介绍了利用oncanplay事件监听音频元数据加载完成的方法,以及针对列表音频存在的误差问题和通过setTimeout轮询获取时长的备选方案,帮助开发者解决音频时长获取不到的问题。
JavaScript获取HTML5 Audio时长的几种实现方式
在开发JavaScript时,许多开发者发现直接获取音频时长存在困难。经过多方搜索与尝试,最终找到了可行的解决方案,特此记录以便后续查阅。
// 音频加载完成后的一系列操作
function duration(){
var myVid = document.getElementById("videoDiv");
console.log("duration ",myVid);
if(myVid != null){
var duration;
myVid.load();
myVid.oncanplay = function () {
console.log("myVid.duration",myVid.duration);
timeToMinute(myVid.duration)
}
}
}
// 秒转换分钟00:00:00格式
function timeToMinute(times){
var t;
if(times > -1){
var hour = Math.floor(times/3600);
var min = Math.floor(times/60) % 60;
var sec = times % 60;
if(hour < 10) {
t = '0'+ hour + ":";
} else {
t = hour + ":";
}
if(min < 10){t += "0";}
t += min + ":";
if(sec < 10){t += "0";}
t += sec.toFixed(2);
}
t=t.substring(0,t.length-3);
return t;
}补充方法说明
除了上述主要方法外,还整理了几种JavaScript获取Audio时长的实现方式,供读者参考。
JS获取HTML5 Audio音频时长的具体方法
JS获取HTML5 Audio音频时长的具体方法
var myVid = $('#' + showImgId)[0];
if (myVid != null) {
var duration;
myVid.load();
myVid.oncanplay = function () {
console.log("myVid.duration", myVid.duration);
}
}var time = _audio.duration;
//分钟
var minute = time / 60;
var minutes = parseInt(minute);
if (minutes < 10) {
minutes = "0" + minutes;
}
//秒
var second = time % 60;
var seconds = Math.round(second);
if (seconds < 10) {
seconds = "0" + seconds;
}JS获取Audio时长的实现
JS获取Audio时长的实现
第一种方案
var myVid = document.getElementById("audio_duration");
console.log("duration ",myVid);
if(myVid != null){
var duration;
myVid.load();
myVid.oncanplay = function () {
console.log("myVid.duration",myVid.duration);
}
}第二种方案:此方法可能存在一定误差,主要因为使用的Audio元素位于列表中。
function getDuration() {
setTimeout(function () {
var duration = myVid.duration;
if(isNaN(duration)){
getDuration();
}else{
var _duration = transTime(myVid.duration);
$(".audio_duration").html(_duration);
console.info("时长:"+myVid.duration+"秒")
}
}, 10);
}关于使用JavaScript实现获取Audio时长的内容介绍至此。如需了解更多相关技术,请查阅本站往期文章或继续浏览后续内容,感谢支持。
作者最新文章
JavaScript怎么准确判断数据类型:typeof、instanceof与Object.prototype.toString
2026-11-05 17:09:21
JS中将数组和对象混合组装为JSON字符串
2026-11-05 16:41:42
JS运算符优先级与结合性的区别是什么?
2026-11-05 13:22:02
JS Map怎么只遍历Key或Value
2026-11-05 13:00:36
D3.js 与 ECharts 选型对比:灵活性 vs 开发效率
2026-11-05 09:45:01
