VUE3页面背景音乐

最新推荐文章于 2024-09-06 14:31:29 发布

风兮梧桐

最新推荐文章于 2024-09-06 14:31:29 发布

阅读量915

点赞数 2

分类专栏： VUE3 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/weixin_51263829/article/details/128702621

版权

VUE3 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

    <!-- 音乐播放器 -->
    <div class="music">
      <!--音乐开始controls-->
      <audio id="audio" :src="require('../music/击鼓传花.wav')"></audio>
      <!--音乐结束-->
      <span @click="stopMusic()" v-if="stopBackgroundMusic">
        <img src="@/assets/静音02.png"
      /></span>
      <span @click="playMusic()" v-if="!stopBackgroundMusic"
        ><img src="@/assets/静音01.png"
      /></span>
    </div>

HTML

    // 播放音乐
    const audioAutoPlay = () => {
      let audio = document.getElementById("audio");
      audio.play();
      document.removeEventListener("touchstart", audioAutoPlay);
    };
    const musicNow = () => {
      // 播放音乐
      let oAudio = document.querySelector("#audio");
      oAudio.onended = function () {
        //播放完毕，重新循环播放
        oAudio.load();
        oAudio.play();
      };
      audioAutoPlay();
    };
    // 停止播放音乐
    const stopMusic = () => {
      let oAudio = document.querySelector("#audio");
      oAudio.pause();
      state.stopBackgroundMusic = false;
      console.log("停止播放");
    };
    // 继续播放音乐
    const playMusic = () => {
      musicNow();
      console.log("继续播放");
      state.stopBackgroundMusic = true;
    };

= =网上找到不知道为什么总有莫名其妙的报错，这是改出来好用的