一个关于vue播放音频的需求,对应的视频及其他的需求都是相通的.
我们这边第三方资源服务器不支持https,而我们本地是https的请求,导致请求资源拿不到
我决定转成二进制下载下来播放. 使用二进制资源直接播放,大概有下面三个方法

//创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();
 
//配置请求方式、请求地址以及是否同步
xhr.open('post/get', '路径', true);
 
//设置请求结果类型为blob
xhr.responseType = 'blob';
 
//请求成功回调函数
xhr.onload = function(res) {

};
xhr.send();

// 第一种 AudioContext 这个API比较冷门的方式,但是可扩展性比较高, 如果对音频播放要求比较高的话可以采用
 var audioCtx = new (window.AudioContext || window.webkitAudioContext)()
 audioCtx.decodeAudioData(res.data, function(buffer) { // 解码成功时的回调函数
     var source = audioCtx.createBufferSource()
    source.buffer = buffer
    source.connect(audioCtx.destination)
    source.start(0) // 立即播放
    console.log(audioCtx, source)
    }, function(e) { // 解码出错时的回调函数
    console.log('Error decoding file', e)
})
  // 第二种二进制转base64
   'data:audio/wav;base64,' + Buffer.from(res.data).toString('base64')
// 第三种二进制转mp3
    const blob = new Blob([res.data], {
          type: 'application/mp3'
     })

后两种方式我们可以拿到二进制资源直接放到src路径里面播放.
关于播放器的样式可以自由定义,我们通过js构造出一个audio实例去控制播放/暂停/切换的实现就可以.
因为我的需求比较简单只有这三种功能就可以了,但是理论是相通的.

image.png

// 因为播放是在表格中 , 有些数据是没有录音资源的,所以我们在请求完表格数据的时候先初始化一下数据
          res.data.responseData.data.map(item => {
            if (item.recordingLen > 0) {
              if (!this.AudioType[item.id]) {
                this.$set(this.AudioType, item.id, {})
                this.$set(this.AudioSource, item.id, {})
                this.$set(this.AudioType[item.id], 'type', 'pause')
              }
            }
          })
// 首先判断是否有资源, 因为后台分页,所以在切换分页的时候再去判断这个资源是否被初始化过了,
// 防止重复下载.两个状态,根据id,存储了资源以及对应资源的播放状态

//  此处点击播放时候触发, 点击播放的时候可以通过上面那个方法通过路径拿二进制资源
// 也可以用axios的方法.拿资源之前先判断这个资源是否下载过了,如果下载过了则直接去播放,否则去下载播放
   playAudio(index, row) {
        if (this.AudioSource[row.id].src && this.AudioInstance) { // 判断是否存在播放资源 如果存在则不请求直接播放
          this.getAudio(row.id)
          return
        }
        axios({
          method: 'get',
          responseType: 'arraybuffer',
          url: '',
          data: {},
        }).then(res => {
            const blob = new Blob([res.data], {
              type: 'application/mp3'
            })
            const objectUrl = window.URL.createObjectURL(blob)
            // 设置初始化的状态
            this.$set(this.AudioSource[row.id], 'src', objectUrl)
            this.getAudio(row.id)
          }
        })
      }
// 此处生成播放audio的实例及控制暂停切换的方法
      getAudio(id) {
        if (this.AudioCurrentID === id) { // 如果点击的是当前播放的 则播放暂停
          if (this.AudioInstance.paused) {
            this.AudioInstance.play()
            this.$set(this.AudioType[id], 'type', 'play')
            return
          }
          this.AudioInstance.pause()
          this.$set(this.AudioType[this.AudioCurrentID], 'type', 'zanting')
        } else {
          if (this.AudioCurrentID) {
            this.AudioInstance.pause()
            this.AudioInstance.currentTime = 0 // 如果点击的不是当前播放的 则播放位置调整到开始位置
            this.$set(this.AudioType[this.AudioCurrentID], 'type', 'pause')
          }
  
          this.AudioCurrentID = id // 设置当前播放id
  
          if (this.AudioInstance) { // 如果存在播放资源的实例 则直接播放 否则构造新的播放器
            this.AudioInstance.src = this.AudioSource[id].src
            this.AudioInstance.play()
            this.$set(this.AudioType[id], 'type', 'play')
            return
          }
          const audio = new Audio()
          this.AudioInstance = audio

          this.AudioInstance.addEventListener('ended', (e) => {
            this.onended()
          })
          this.$nextTick(function() {
            this.AudioInstance.src = this.AudioSource[id].src
            this.AudioInstance.play()
            this.$set(this.AudioType[id], 'type', 'play')
          })
        }
      }

// 最后监听播放完成事件,去改变播放状态
      onended() {
        this.$set(this.AudioType[this.AudioCurrentID], 'type', 'pause')
      },