【Vue 公众号网页设置全局背景音乐】

最新推荐文章于 2024-04-21 09:52:25 发布

零Suger

最新推荐文章于 2024-04-21 09:52:25 发布

阅读量603

点赞数

分类专栏： H5 vue 文章标签： vue.js css css3 html5 微信公众平台

本文链接：https://blog.csdn.net/qq_35057009/article/details/128111586

版权

vue 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

2 篇文章 0 订阅

订阅专栏

因为是全局的背景音乐，所以控制音乐的图标和音乐资源都应该在App.vue中

<template>
  <div id="app">
    <img 
      :class="['musicicon', isOff ? '' : 'rotateimg']" 
      src="./assets/img/musicbtn.png"
      @click="changeOn"
    />
    <router-view />
    <audio
      id="audio"
      src="./assets/media/bgm.mp3"
      preload
      controls
      loop
      hidden
    ></audio>
  </div>
</template>

这里因为是公众号页面，所以借助微信提供的sdk来实现音乐自动播放。

首先，先安装 weixin-js-sdk ；

npm i weixin-js-sdk -S

然后，在页面的JS中引入，并使用：

<script>
// 引入weixin-js-sdk
import wx from "weixin-js-sdk";
export default {
  name: "App",
  data() {
    return {
      isOff: true,
    };
  },
  mounted() {
    // 自动播放音乐效果，解决微信自动播放问题
    document.addEventListener("touchstart", this.audioAutoPlay, false);
    document.addEventListener("WeixinJSBridgeReady", this.audioAutoPlay, false);
    let oAudio = document.querySelector("#audio");
    oAudio.onended = function () {
      //播放完毕，重新循环播放
      oAudio.load();
      oAudio.play();
    };
  },
  methods: {
    // 点击图标控制音乐播放暂停
    changeOn() {
      let oAudio = document.querySelector("#audio");
      if (this.isOff) {
        oAudio.play(); //让音频文件开始播放
      } else {
        oAudio.pause(); //让音频文件暂停播放
      }
      this.isOff = !this.isOff;
    },
    // 自动播放
    audioAutoPlay() {
      let audio = document.getElementById("audio");
      this.isOff = false;
      audio.play();
      document.removeEventListener("touchstart", this.audioAutoPlay);
    },
  },
};
</script>

部分css：

.musicicon {
  position: absolute;
  top: 1.5rem;
  right: 2rem;
  width: 55px;
  height: 55px;
  z-index: 9;
}
.rotateimg {
  animation: rotateimgani 3s linear infinite;
}
@keyframes rotateimgani {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}