前端获取音频或者视频的时长

最新推荐文章于 2024-08-05 16:06:42 发布

我的龙呢

最新推荐文章于 2024-08-05 16:06:42 发布

阅读量3.8k

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/ssucre/article/details/118417822

版权

HTMLAudioElement 音频时长视频时长 JavaScript 文件操作

关键词由CSDN通过智能技术生成

前端专栏收录该内容

15 篇文章 1 订阅

订阅专栏

获取音频或视频时长

1 前序知识
获取属性

1 前序知识

通过文件获取这个文件在本地磁盘中的url地址

let url = URL.createObjectURL(file);

根据地址生成一个可操作的音频html元素，视频的话换成音频的url即可

 let audioElement = new Audio(url);

第二步用dom操作替换也是可以的

let htmlVideoElement = document.createElement(‘video’);
htmlVideoElement.setAttribute(‘url’,url);

操作源地址

https://developer.mozilla.org/en-US/docs/web/api/htmlaudioelement

https://developer.mozilla.org/en-US/docs/web/api/htmlmediaelement/duration

获取属性

该方法传入音频文件，返回音频的时长
duration、url、paused、volume等其它的属性也可以通过audioElement元素获取
获取元素一定是在addEventListener（）函数执行之后，才行的。

  getDuration(file) {
    let duration: any;
    let url = URL.createObjectURL(file);
    //经测试，发现audio也可获取视频的时长
    //生成一个html标签
    let audioElement = new Audio(url);
    audioElement.addEventListener('loadeddata', () => {
      duration = audioElement.duration;
    });
    return duration;
  }