使用JavaScript實現(xiàn)獲取audio時長
更新時間:2024年04月10日 14:36:56 作者:碼農新銳
這篇文章主要為大家詳細介紹了如何使用JavaScript實現(xiàn)獲取audio時長,并且轉換為分鐘00:00:00格式,感興趣的小伙伴可以跟隨小編一起學習一下
寫js時在網上找了很多獲取音頻時長都獲取不到,然后搜索各種試最后終于可以,記錄下來方便以后使用。
// 音頻加載完成后的一系列操作
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 音頻時長方法
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時長
第一種
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實現(xiàn)獲取audio時長的文章就介紹到這了,更多相關JavaScript獲取audio時長內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
微信小程序非swiper組件實現(xiàn)的自定義偽3D輪播圖效果示例
這篇文章主要介紹了微信小程序非swiper組件實現(xiàn)的自定義偽3D輪播圖效果,涉及微信小程序事件響應及元素屬性動態(tài)操作實現(xiàn)輪播圖效果相關技巧與注意事項,需要的朋友可以參考下2018-12-12

