H5 中的 Audio

最近这个项目中在做题的时候需要播放语音，浏览器上自动播放 audio 或者 video 一直有这样或那样的限制和兼容问题。这里记录一下实现过程。

属性	描述
src	音频 URL
muted	规定音频输出时应该被静音
autoplay	音频在就绪后马上播放
controls	向用户显示控件，如播放按钮
loop	每当音频结束时重新开始播放
preload	音频在页面加载时进行加载，并预备播放。如果同时使用了 autoplay，则忽略该属性

浏览器为了提高用户体验，减少数据消耗，audio 的 autoplay 实现需要绕弯子：

1、发生了用户行为，如：click、tap、etc
2、监听最外层 div 的鼠标移入事件，<div (mouseenter)=“play()”> 待验证

否则，在 mounted 中直接调用this.Player.play()时 Chrome 会报错Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first.

¶一、封装 js 方法

先写一个公用 js 文件：AudioPlayer.js

class AudioPlayer {
  constructor (audioList = [], options = null) {
    options = Object.assign({ speed: 1.0, onEnd: null }, options)
    this.onEnd = options.onEnd
    if (audioList) {
      this.audio = document.createElement('audio')
      this.audio.src = audioList[0] || audioList[1]
      // this.audio.muted = true
      // this.audio.autoplay = 'autoplay'
      // 播放速度
      this.audio.playbackRate = options.speed
    }
  }
  // 开始播放
  play () {
    this.audio.play()
    this.onEnd && this.audio.addEventListener('ended', () => {
      this.onEnd()
    })
  }
}

export default AudioPlayer

¶二、使用

import AudioPlayer from '../utils/media/AudioPlayer'

export default {
  data () {
    return {
      Player: null
    }
  },
  methods: {
    // 点击播放按钮
    playBtn () {
      this.Player.audio.muted = false
      this.Player.play()
    }
  },
  mounted () {
    this.Player = new AudioPlayer(audioList, { speed: 1.25 })
  }
}

¶参考资料

  1、Chrome 66禁止声音自动播放之后