vue3播放音频

const audio = ref(new Audio())
const voicePath = ref('')
 
const playVoice = () => {
	// 外部链接
    //voicePath.value = `https://mp3在线地址`
    // 本地链接
    voicePath.value = new URL('@/assets/本地mp3文件', import.meta.url).href
    
    nextTick(() => {
        // 从头开始
        audio.value.currentTime = 0
        // 播放
    	audio.value?.play()
    })
}

<audio ref="audio" controls hidden="true" :src="voicePath"/>

报错：Error: Uncaught (in promise) DOMException: play() failed

使用 autoplay 标签和主动调用 play 方法`document.querySelector('video').play()`都会提示此错误

在vue3中实测只需点击页面内 程序才能自动调用播放

问题在于 Chrome 的避免自动播放视屏政策：传送门 - Autoplay policy in Chrome 

根据 Chrome 的规则，要想使用autoplay自动播放只能加上 muted 静音属性就允许自动播放了 

<video src="sample.mp4" autoplay muted>video>

js监听初次点击后播放:

<video src="sample.mp4" controls autoplay>video>
 
<script>
  const video = document.querySelector('video');
 
  // auto play when script loaded
  video
    .play()
    .then(() => {
      console.log(`autoplay well`);
    })
    .catch((e) => {
      console.log(`autoplay fail, wait for first click`);
      if (e instanceof DOMException) {
        // play before user intersact
        const autoPlayAfterAnyClick = () => {
          video.play();
          document.removeEventListener('click', autoPlayAfterAnyClick);
        };
 
        document.addEventListener('click', autoPlayAfterAnyClick);
        throw e;
      } else {
        // or rethrow
        throw e;
      }
    });
script>