JS指定音頻audio在某個時間點進行播放，獲取當前音頻audio的長度，音頻時長格式轉化
- 2020 年 11 月 28 日
- 筆記
- 【H5】, 【JavaScript】, 【jQuery】
前言：
今天接到一個需求，需要獲取某個.mp3音頻文件的時間長度和指定音頻audio在某個時間點進行播放（比如說這個視頻有4分鐘，我要讓它默認從第2秒的時候開始播放），這裡當然想到了H5中的audio元素，當然我們平時看這個標籤上顯示的音頻時間格式是時:分:秒的格式的因此需要涉及到秒和時間格式的轉化。因為剛開始對這塊十分的陌生，最後通過查閱了網上的一些資料，最終完美的把這些功能點做好了。在這裡分享一下，希望能夠幫助有需要的小夥伴。
獲取音頻時長：
function getAudioDuration(src) { let audio = document.createElement('audio') //生成一個audio元素 audio.src = src //音樂的路徑 audio.addEventListener("canplay", function () { console.log("音頻長度=>>>：", parseInt(audio.duration) + '秒', '音頻時分秒格式：', timeToMinute(parseInt(audio .duration))); }); }
指定音頻audio在某個時間點進行播放：
指定默認從第20s開始播放效果圖：
// 音頻加載完成後的一系列操作 function duration() { var myVid = document.getElementById("videoDiv"); console.log("duration ", myVid); if (myVid != null) { var duration; myVid.load(); //方法重新加載音頻/視頻元素 // //www.w3school.com.cn/tags/av_prop_currenttime.asp // currentTime 屬性設置或返迴音頻/視頻播放的當前位置（以秒計）。 // 當設置該屬性時，播放會跳躍到指定的位置。 myVid.currentTime = 20; //默認指定音頻默認從20s的時候開始播放（默認時間為s） myVid.oncanplay = function () { //duration 屬性返回當前音頻的長度，以秒計。 console.log("音頻時間", myVid.duration); console.log("時分秒格式轉化：", 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; }
00:00:00時分秒格式轉化為秒：
function timeEvent(e) { let time = e; var len = time.split(':'); if (len.length == 3) { var hour = time.split(':')[0]; var min = time.split(':')[1]; var sec = time.split(':')[2]; return Number(hour * 3600) + Number(min * 60) + Number(sec); } if (len.length == 2) { var min = time.split(':')[0]; var sec = time.split(':')[1]; return Number(min * 60) + Number(sec); } if (len.length == 1) { var sec = time.split(':')[0]; return Number(sec); } }
完整代碼：
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<audio controls autoplay start="01:00" id='videoDiv'>
<source src="//mp3.9ku.com/hot/2005/05-19/65937.mp3" type="audio/ogg">
</audio>
<script src="//libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
//js獲取某個mp3音頻文件的播放時長
getAudioDuration('//mp3.9ku.com/hot/2005/05-19/65937.mp3');
duration();
console.log("轉化為多少秒=》》", timeEvent("00:14:36"));
})
// 音頻加載完成後的一系列操作
function duration() {
var myVid = document.getElementById("videoDiv");
console.log("duration ", myVid);
if (myVid != null) {
var duration;
myVid.load(); //方法重新加載音頻/視頻元素
// //www.w3school.com.cn/tags/av_prop_currenttime.asp
// currentTime 屬性設置或返迴音頻/視頻播放的當前位置（以秒計）。
// 當設置該屬性時，播放會跳躍到指定的位置。
myVid.currentTime = 20; //默認指定音頻默認從20s的時候開始播放（默認時間為s）
myVid.oncanplay = function () {
//duration 屬性返回當前音頻的長度，以秒計。
console.log("音頻時間", myVid.duration);
console.log("時分秒格式轉化：", timeToMinute(myVid.duration))
}
}
}
function getAudioDuration(src) {
let audio = document.createElement('audio') //生成一個audio元素
audio.src = src //音樂的路徑
audio.addEventListener("canplay", function () {
console.log("音頻長度=>>>：", parseInt(audio.duration) + '秒', '音頻時分秒格式：', timeToMinute(parseInt(audio
.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;
}
// 00:00:00時分秒格式轉化為秒
function timeEvent(e) {
let time = e;
var len = time.split(':');
if (len.length == 3) {
var hour = time.split(':')[0];
var min = time.split(':')[1];
var sec = time.split(':')[2];
return Number(hour * 3600) + Number(min * 60) + Number(sec);
}
if (len.length == 2) {
var min = time.split(':')[0];
var sec = time.split(':')[1];
return Number(min * 60) + Number(sec);
}
if (len.length == 1) {
var sec = time.split(':')[0];
return Number(sec);
}
}
</script>
</body>
</html>
參考文章：
//www.zhangxinxu.com/wordpress/2019/07/html-audio-api-guide/
//developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/Using_HTML5_audio_and_video
