input上传音频文件并获取时长

input上传音频文件并获取时长

都是来源于开发过程中的使用，有时候上传音频以后需要计算时长回显或者传参给后台

1. HTML

<el-button size="small" type="primary" plain  @click="handleClickUploadAudio">上传音频文件</el-button>
<input
    type="file"
    id="audio_element"
    accept=".tif,.mp3,.wma,.wav,.ape,.flac,.ogg,.aac"
    style="display: none"
    @change="handleAudioChange">

2. JS

handleClickUploadAudio () {
  let audioInput = document.getElementById('audio_element')
  let that = this
  // 监听 input 元素的 change 事件
  audioInput.addEventListener('change', function () {
    // 获取用户选择的文件
    const file = this.files[0];
    if (file) {
      // 创建 FileReader 对象
      const reader = new FileReader()
      // 监听 FileReader 的 load 事件
      reader.onload = function (e) {
        // 创建 Audio 对象
        const audio = new Audio()
        // 设置 Audio 对象的 src 属性为文件的 DataURL
        audio.src = e.target.result

        // 监听 Audio 对象的 loadedmetadata 事件
        audio.addEventListener('loadedmetadata', function () {
          // 获取音频的时长
          that.audioDuration = this.duration
        })
      }

      // 读取文件为 DataURL 格式
      reader.readAsDataURL(file)
    }
  })
  document.getElementById('audio_element').click()
},