练习题-按钮开关背景音乐

接着上节课背景音乐讲解，本节课是一个练习题，也不涉及threejs，就是创建一个按钮控制音频的播放与暂停，算是vue普通前端知识，如果你对vue3非常熟悉，可以参考1.16小节代码，自己动手写下，我下面就简单演示下流程。

创建一个vue3按钮组件

创建一个按钮组件BackgroundAudio.vue，然后引入到HelloWorld.vue文件中

按钮用到的图片素材放在了assets文件夹下。

<script setup>

</script>

<template>
    <div id="audio">
        <img src="../assets/关闭声音.png">
    </div>
</template>

<style scoped>
#audio {
    position: absolute;
    left: 10px;
    top: 50%;
    padding: 10px 10px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 22px;
    cursor: pointer;
}

#audio img {
    width: 24px;
    vertical-align: middle;
}
</style>

<script setup>
import BackgroundAudio from './BackgroundAudio.vue'
</script>
<template>
<BackgroundAudio />
</template>

开关音频

<script setup>
import { ref } from 'vue';

const audio = document.createElement('audio')
audio.loop = true;//循环播放
audio.src = './背景音乐.wav';//音频文件路径


const playBool = ref(false);//播放状态
//开关音频
function play() {
    if (playBool.value == true) {
        audio.pause();
        playBool.value = false;
    } else {
        audio.play();
        playBool.value = true;
    }
}
</script>

<template>
    <div id="audio" @click="play()">
        <img v-show="playBool" src="../assets/打开声音.png">
        <img v-show="!playBool" src="../assets/关闭声音.png">
    </div>
</template>

鼠标事件+按钮：控制音频

鼠标事件、按钮可以同时控制音频的播放暂停，只是需要注意两者的交互逻辑不要冲突即可。

如果UI按钮参与了一次控制音频播放或暂停，后面鼠标点击canvas画布区域，不在触发音频播放。

import { ref } from 'vue';

const buttonBool = ref(false);//按钮是否控制过音频播放或暂停
const playBool = ref(false);

const audio = document.createElement('audio')
audio.loop = true;
audio.src = './背景音乐.wav';

function play() {
    buttonBool.value = true;//标记UI按钮参与了音频控制
    if (playBool.value == true) {
        audio.pause();
        playBool.value = false;
    } else {
        audio.play();
        playBool.value = true;
    }
}

import twin from './twin';
// 监听canvas画布
twin.renderer.domElement.addEventListener('mousedown', () => {
    //如果按钮参与控制播放或暂停，鼠标事件不触发播放
    if (buttonBool.value == false) {
        audio.play();
        playBool.value = true;
    }
})