chrome 禁止自动播放解决

chrome 禁止自动播放解决

使用 Howl.js进行解决

目前是我了解到的最佳解决方案

注意本文使用的是 vite+ts，使用vue3

import { Howl } from 'howler'
import defaultMp3 from './Alarm01.mp3'

//ws
const wsUrl = process.env.NODE_ENV !== 'development'
  ? `ws://${location.hostname}:${location.port}/websocket/customWs/REAL_TIME_ALARM/${curUserName.username}?token=${hasToken}`
  : `ws://192.168.2.230:9203/customWs/REAL_TIME_ALARM/${curUserName.username}?token=${hasToken}`
const router = useRouter()

const { data } = useWebSocket(wsUrl, { autoReconnect: false })
watch(data, async (val: string) => {
  if (val) {
    const payload = JSON.parse(val) as AlarmMsg
    if (payload.type === 'popup') {
      await ElNotification.closeAll()
      ElNotification({
        title: '告警提示',
        message: h(
          'a',
          {
            style: { cursor: 'pointer' },
            onClick: () => {
              router.push({ name: 'alarmRecord', params: { alarmRecordId: payload.alarmRecordId, strategyType: payload.strategyType } })
              menuStore.setLeftMenuActive('/alarmManagement')
              menuStore.setRightMenuActive('/alarmRecord')
            },
          },
          payload.msg,
        ),
        duration: 3000 * 10,
        position: 'bottom-right',
        type: 'warning',
      })
    }
    else {
      const sound = new Howl({
        src: payload.msg ? getPreviewUrl() + payload.msg : defaultMp3,
      })
      // 播放声音
      sound.play(undefined, false)
    }
  }
})