(编辑:jimmy 日期: 2024/12/23 浏览:2)
今天接到一个需求,需要获取某个.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))); }); }
指定默认从第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="/UploadFiles/2021-04-02/65937.mp3">参考文章:
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