vue3 点击播放audio

vue中播放音频

当需要给audio设置动态的src时，如果调用play()会出现DOMException: The element has no supported sources.

设置了source标签并不能解决问题，甚至play方法都失效了

此时如果设置了control属性，可以看到音频文件时加载完成的，但是没有播放，因此只需要等audio加载完再执行play即可

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

const audio = ref(null)
const voicePath = ref('')

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

注意： 由于浏览器安全策略的影响并不能在onMounted中调用playVoice，只能在点击按钮之类的操作中调用。