vue音乐添加，控制开关

最近做的手机微信端项目，没有声音，应客户要求，加上了声音，ios手机端需要用户触碰后才能播放声音，安卓上来直接就可以播放声音，博主在这里记录一下代码内容。

<template>
  <div id="father">
    <audio
      src="http://xxx.mp3"
      id="MusicPlay"
      class="media-audio"
      loop
      autoplay
      preload
      ref="MusicPlay"
    ></audio>
    <audio
      :src="mus2"
      id="MusicPlay2"
      class="media-audio"
      loop
      preload
      ref="MusicPlay2"
    ></audio>
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <!-- <transition name="slide-fade"> -->
    <router-view v-if="!$route.meta.keepAlive"></router-view>
    <!-- </transition> -->

    <MySwitch></MySwitch>
  </div>
</template>

<script>
import MySwitch from "./components/switch.vue";
export default {
  data() {
    return {
      mus2: require("./xxx.mp3"),
    }
  },
  components: {
    MySwitch
  },
  mounted() {
    let vm = this;
    setTimeout(() => {
    this.autoPlayMusic();
    }, 1000);
  },
  activated(){
    this.musicPlay(true);
  },
  methods: {
    autoPlayMusic() {
      // 自动播放音乐效果，解决浏览器或者APP自动播放问题
      document.body.addEventListener("touchstart", this.musicInBrowserHandler);
      // 自动播放音乐效果，解决微信自动播放问题
      document.addEventListener("DOMContentLoaded", this.musicInWeixinHandler);
    },
    musicInBrowserHandler() {
      this.musicPlay(true);
      this.musicPlay2(false);
      document.body.removeEventListener("touchstart", this.musicInBrowserHandler);
    },
    musicInWeixinHandler() {
      this.musicPlay(true);
      document.addEventListener(
        "WeixinJSBridgeReady",
        function () {
          this.musicPlay(true);
          this.musicPlay2(false);
        },
        false
      );
      document.removeEventListener("DOMContentLoaded", this.musicInWeixinHandler);
    },
    musicPlay(isPlay) {
      var audio = document.getElementById("MusicPlay");
      if (isPlay && audio.paused) {
        audio.play();
      }
      if (!isPlay && !audio.paused) {
        audio.pause();
      }
    },

    musicPlay2(isPlay) {
      var audio2 = document.getElementById("MusicPlay2");
      if (isPlay && audio2.paused) {
        audio2.play();
      }
      if (!isPlay && !audio2.paused) {
        audio2.pause();
      }
    },

    // musicPause() {
    //   this.$refs.MusicPlay.pause();
    // },

    // /**
    //  * 播放音乐并开始旋转
    //  */
    // musicPlay() {
    //   this.$refs.MusicPlay.play();
    // },
  },
};
</script>
<style lang="scss">
html,
body {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
}

#father {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;

  .slide-fade {
    position: absolute;
    left: 0;
    right: 0;
  }

  .slide-fade-enter-active {
    transition: all 1.2s ease;
  }
  .slide-fade-leave-active {
    transition: all 0.1s cubic-bezier(2, 0.6, 0.8, 1);
  }
  .slide-fade-enter,
  .slide-fade-leave-to {
    left: 0;
    right: 0;
    opacity: 0;
  }
}
</style>

开关按钮

<template>
  <!-- <div :class="cname"></div> -->
  <div :class="cname" @click="onClick()"></div>
</template>

<script>
export default {
  data() {
    return {
      flag: true,
      //   cname: "music",
      cname: "ison",
    };
  },
  methods: {
    onClick() {
      this.flag = !this.flag;
      //   this.flag ? (this.cname = "music pause") : (this.cname = "music");
      this.flag ? (this.cname = "ison") : (this.cname = "isoff");

      if (this.flag) {
        this.musicPlay(true);
      } else {
        this.musicPlay(false);
        this.musicPlay2(false);
      }
    },
    musicPlay(isPlay) {
      var audio = document.getElementById("MusicPlay");
      if (isPlay && audio.paused) {
        audio.play();
      }
      if (!isPlay && !audio.paused) {
        audio.pause();
      }
    },

    musicPlay2(isPlay) {
      var audio2 = document.getElementById("MusicPlay2");
      if (isPlay && audio2.paused) {
        audio2.play();
      }
      if (!isPlay && !audio2.paused) {
        audio2.pause();
      }
    },
  },
};
</script>

<style lang="scss">
.ison {
  width: 2.5rem;
  height: 2.5rem;
  position: absolute;
  top: 1.2rem;
  right: 0.5rem;
  transform-origin: center center;
  animation: rotate 5s linear infinite; /*开始动画后无限循环，用来控制rotate*/
  background: url("../assets/nc/main/ison.png") no-repeat;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.isoff {
  width: 2.5rem;
  height: 2.5rem;
  position: absolute;
  top: 1.2rem;
  right: 0.5rem;

  background: url("../assets/nc/main/isoff.png") no-repeat;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}
</style>

项目着急，写的粗糙，这里只做记录，望大神勿喷。