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

1 前序知识

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

let url = URL.createObjectURL(file);

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

 let audioElement = new Audio(url);

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

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

4. 操作源地址

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

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

获取属性

1. 该方法传入音频文件，返回音频的时长
2. duration、url、paused、volume等其它的属性也可以通过audioElement元素获取
3. 获取元素一定是在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;
  }