JS指定音訊audio在某個時間點進行播放
阿新 • • 發佈：2020-12-01
前言：
今天接到一個需求，需要獲取某個.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(); //方法重新載入音訊/視訊元素
// https://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="http://mp3.9ku.com/hot/2005/05-19/65937.mp3" type="audio/ogg">
</audio>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
//js獲取某個mp3音訊檔案的播放時長
getAudioDuration('http://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 ",timeToMinute(myVid.duration))
}
}
}
function getAudioDuration(src) {
let audio = document.createElement('audio') //生成一個audio元素
audio.src = src //音樂的路徑
audio.addEventListener("canplay",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>
參考文章：
https://www.zhangxinxu.com/wordpress/2019/07/html-audio-api-guide/
https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/Using_HTML5_audio_and_video
https://blog.csdn.net/qq_31984879/article/details/84071245
https://www.w3school.com.cn/tags/av_prop_currenttime.asp
到此這篇關於JS指定音訊audio在某個時間點進行播放的文章就介紹到這了,更多相關JS音訊audio長度內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！