audio的自動播放報錯解決

使用audio標簽時，當前頁面沒有進行交互時，比如用戶刷新了頁面后，play()調用就會報錯，如下圖

查找資料后，發現是2018年4月以后，chrome瀏覽器對這塊進行了優化，為了節約流量，禁止了自動播放，必須由用戶交互后才能觸發

當用戶點擊網頁后,點擊任何位置都行,andio就能自動播報了,然后我就想了個方案,設置個按鈕,讓按鈕自動點擊,然后觸發audio,然而發現這種作弊方案,仍舊不行 后來各種找方法,標簽加muted屬性仍於事無補,到最后也只有沒有辦法的辦法

由於play()方法是一個promise,監聽它的成功和失敗狀態,如果失敗,那就提醒用戶進行交互,設置一個激活按鈕,點擊后就能觸發了

<template>
    <el-button class="autoPlay" type="text" v-if="isShow" @click="autoPlay">激活</el-button>
    <!-- audio寬度設0,讓其隱藏 -->
    <audio muted controls ref="audio" :src="audioSrc" style="width: 0px;"></audio>
</template>
import newOrder from '@/assets/audio/new_order.mp3'

export default {
  data () {
    return {
      audioSrc: newOrder,
      isShow: false
    }
  },
  created() {
    this.open()
  },
  methods: {
    open() {
      const myAudio =  document.getElementsByTagName('audio')[0]
      if (myAudio.canPlayType) {
        this.autoPlay()
      } else {
        this.$message({
          type: 'error',
          message: '您的瀏覽器不支持語音播報'
        })
      }
    },
    // 自動播放
    autoPlay() {
      this.$refs.audio.play().then(() => {
        this.isShow = false
      }).catch(() => {
        this.$message({
          type: 'error',
          message: '語音播報失效,點擊右上角"激活"按鈕'
        })
        this.isShow = true
      })
    }
  }
}