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时长的内容介绍至此。如需了解更多相关技术,请查阅本站往期文章或继续浏览后续内容,感谢支持。

作者最新文章