如何在 Vue 中检索 mp3 或 wav 音频文件的持续时间

Question

当我上传音频文件以查看上传的 mp3 或 wav 的持续时间时，我试图实现，但我不知道如何在 vue 中做到这一点，有什么建议吗？ 我找到了这个脚本，但我不知道如何使用 vue 管理它。 任何帮助表示赞赏，谢谢。

Javascript：

var objectUrl;

    $("#audio").on("canplaythrough", function(e){
        var seconds = e.currentTarget.duration;
        var duration = moment.duration(seconds, "seconds");
        
        var time = "";
        var hours = duration.hours();
        if (hours > 0) { time = hours + ":" ; }
        
        time = time + duration.minutes() + ":" + duration.seconds();
        $("#duration").text(time);
        
        URL.revokeObjectURL(objectUrl);
    });
    
    $("#file").change(function(e){
        var file = e.currentTarget.files[0];
       
        $("#filename").text(file.name);
        $("#filetype").text(file.type);
        $("#filesize").text(file.size);
        
        objectUrl = URL.createObjectURL(file);
        $("#audio").prop("src", objectUrl);
    });

http://jsfiddle.net/derickbailey/s4P2v/

到目前为止我已经尝试过但在控制台中我得到：0:00：

 <input type="file" id="file" ref="file" v-on:change="handleFileUpload()"/>
  <button @click="submitAudioFile"> SUBMIT</button>

  handleFileUpload () { 
      this.file = this.$refs.file.files[0]  
    },
submitAudioFile () {
     let objectUrl = ''
          const myAudio = this.$refs.file.files[0]
          objectUrl = URL.createObjectURL(myAudio)
          const seconds = myAudio.duration
          const duration = moment.duration(seconds, 'seconds')
        
          let time = ''
          const hours = duration.hours()
          if (hours > 0) { time = `${hours  }:`  }
        
          time = `${time + duration.minutes()  }:${  duration.seconds()}`
          console.log(time)
        
          URL.revokeObjectURL(objectUrl)
}

Answer 1

我已经这样做了：

duration () {    
      const files = document.getElementById('file').files
      const file = files[0] 
      const reader = new FileReader()
      const audio = document.createElement('audio')
      reader.onload = function (e) {
        audio.src = e.target.result
        audio.addEventListener('durationchange', function () { 
          const seconds  = audio.duration
          const duration = moment.duration(seconds, 'seconds')
          let time = ''
          const hours = duration.hours()
          if (hours > 0) { time = `${hours}:` } 
          time = `${time + duration.minutes()  }:${duration.seconds()}`
          console.log(time)
        }, false) 
        audio.addEventListener('onerror', function () {
          alert('Cannot get duration of this file.')
        }, false)
      }
      reader.readAsDataURL(file)
    }

Answer 2

您必须使用 onloadmetadata 事件侦听器来访问音频的持续时间。

myAudio.onloadedmetadata = ()=> {
  console.log(myAudio.duration)
}