vue2 中使用音频

十一吖i2024-03-23 15:41

vue2 中使用音频

在 template 页面写入 audio 标签

javascript 复制代码

<template>
	<div>
        <audio ref="moreAudio" :src="moreAudioSrc"></audio>
        <audio ref="noAudio" :src="noAudioSrc"></audio>
    </div>
</template>

在 script 内写入音频路径

javascript 复制代码

<script>
export default {
    data() {
        return {
            moreAudioSrc:'./audio/more.wav',
            noAudioSrc:'./audio/no.wav'
        }
    }
}
</script>

通常将音频文件放在 public 文件下

在方法里面使用

javascript 复制代码

playFn(){
	if(!data) {
		this.$refs.noAudio.play()
	} else {
		this.$refs.moreAudio.play()
	}
}