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()
    })
}

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

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

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

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

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


js监听初次点击后播放:




你可能感兴趣的:(Vue,音视频,vue.js,前端)