这几天遇到一个需求，就是上传录音文件的时候需要校验一下录音的时长，超过一定限制前端做出限制，看了很多解决方案，大部分都是隐藏一个音频标签，播放获取。觉得有点麻烦，结合网上的方案，写了一个获取上传的音视频文件时长的方法，具体代码如下
因手头资源有限 视频只测试了MP4 ，音频MP3，wav可以获取。
感兴趣的朋友可以测试别的资源
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="file" id='upload'>
<button onclick='getTimes()'>获取时长</button>
</body>
<script>
function getTimes() {
var obj_file = document.getElementById("upload");
var content = obj_file.files[0]
console.log(content)
//获取录音时长
var url = URL.createObjectURL(content);
//经测试，发现audio也可获取视频的时长
var audioElement = new Audio(url);
var duration;
audioElement.addEventListener("loadedmetadata", function (_event) {
duration = audioElement.duration;
console.log(duration/60);
});
}
</script>
</html>
对以上代码进行简单说明：
1.**URL.createObjectURL() **静态方法会创建一个 DOMString，其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象。（个人感觉可以把对象转换成url使用，十分灵活方便，特别是对于文件对象）。
2.loadedmetadata 当指定的音频/视频的元数据已加载时，会发生 loadedmetadata 事件。音频/视频的元数据包括：时长、尺寸（仅视频）以及文本轨道。
网友评论