vue3 오디오를 재생하려면 클릭하세요.

Vue에서 오디오 재생

audio동적 설정이 필요한 경우 전화를 걸면 나타납니다 src.play()DOMException: The element has no supported sources.

라벨을 설정해도 source문제가 해결되지 않으며 play방법도 실패합니다.

이때 속성을 설정하면 오디오 파일이 로드는 되지만 재생은 되지 않는 것을 볼 수 있으므로, 로드될 때까지 control기다렸다가 실행하면 됩니다 .audioplay

<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, 버튼 클릭 등의 작업에서만 호출할 수 있습니다.