js获取音频时长-Toy模板网

这篇具有很好参考价值的文章主要介绍了js获取音频时长。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

上传音频文件时，需要将音频时长一起上传，纯 JavaScript 获取音频时长：使用 HTML5 的 Audio 对象和 duration 属性

方法1

// 使用`new Audio()`构造函数创建一个`Audio`对象，将音频文件的URL作为参数传入
// const audio = new Audio(this.audioSrc) // 【可能出现的问题】this.audioSrc（文件上传接口返回的地址）作为音频链接可能出现下图获取不了音频时长的问题，可以将File转为链接 const audio = new Audio(URL.createObjectURL(file.raw))
const audio = new Audio(URL.createObjectURL(file.raw))
// 由于音频需要加载完成才能获取到正确的时长信息，因此需要监听`canplaythrough`事件，该事件表示音频已加载完毕并可以播放。在事件回调函数中进行后续操作。
audio.addEventListener('canplaythrough', () => {
  console.log('audio----', audio)
  console.log('audio.duration----', audio.duration)
  const duration = audio.duration // 在音频加载完成后，通过`audio.duration`获取音频的时长
  // 由于音频需要加载完成才能获取到正确的时长信息，因此在监听事件之前可能无法获取到时长。
  console.log('duration----', duration)
})

js获取audio时长,项目问题,JavaScript,javascript,音视频,开发语言

来源

方法2


// 选择文件（音视频）的标签，uploadFile是回调函数
<input type="file" @change="uploadFile">
 
// js
uploadFile(event) {
  var urlFile = event.target.files[0] // 获取链接
  console.log('urlFile----', urlFile)
  var url = URL.createObjectURL(urlFile) // 动态创建一个链接
  var videoTime = ''
  // 判断音频还是视频，创建不同的音视频标签
  // var videoElem =
  //   video.type.indexOf('audio') == -1
  //     ? document.createElement('video')
  //     : document.createElement('audio')
  var videoElem = document.createElement('audio')
  videoElem.src = url // 向标签注入链接
  videoElem.oncanplaythrough = function () {
    // 获取时长，并向下取整
    videoTime = Math.floor(videoElem.duration)
    console.log('videoTime----', videoTime)
  }
},