vue应用全局音乐（自动播放）

news2025/1/22 12:12:16

这里写自定义目录标题

1.从同事哪里白嫖过来的，主要是jq写的，需要单独引入jq cdn
2.打开index.html 将代码放到里面
在这里插入图片描述

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>全局音乐</title>
  </head>
  <style>
   @-webkit-keyframes rotate_music{0%{transform: rotate(0deg);} 50%{transform: rotate(180deg);} 100%{transform: rotate(360deg);}}
.music{position: absolute; width: .6rem; height: .6rem; z-index: 2; right: 3%; top:6%; }
.music_rotate{-webkit-animation:rotate_music 5s linear infinite; transform-origin: 50% 50%;}
.map{ animation-play-state: paused}
.wid100{width: 100%;}
  </style>
  <body style="background-color: #fff;">
    <div class="music music_rotate">
      <img
        src="音乐图标地址"
        class="wid100"
        alt=""
      />
    </div>
    <div id="app"></div>
    <!-- built files will be auto injected -->
    <div style="display: none">
      <script
        type="text/javascript"
        src="https://v1.cnzz.com/z_stat.php?id=1280693457&web_id=1280693457"
      ></script>
    </div>
  </body>
  <!--引入jq-->
  <script
    src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/1.7.2/jquery.min.js"
    type="application/javascript"
  ></script>
  <script>
    new BGMAutoPlayMgr(
      "必须是线上音乐地址，本地好像不行"
    );

    function BGMAutoPlayMgr(url) {
      this.audioContext = new (window.AudioContext ||
        window.webkitAudioContext ||
        window.mozAudioContext)();
      this.sourceNode = null;
      this.buffer = null;
      this.isPlayingBGM = false;
      this.toggleBGM = function() {
        if (typeof this.sourceNode == "object") {
          if (this.isPlayingBGM) {
            this.sourceNode.stop();
            this.isPlayingBGM = false;
            $(".music").addClass("map");
          } else {
            $(".music").removeClass("map");
            this._playSourceNode();
          }
        }
      };
      this._playSourceNode = function() {
        const audioContext = this.audioContext;
        audioContext.resume();
        const _sourceNode = audioContext.createBufferSource();
        _sourceNode.buffer = this.buffer;
        _sourceNode.loop = true;
        _sourceNode.connect(audioContext.destination);
        _sourceNode.start(0);
        this.sourceNode = _sourceNode;
        this.isPlayingBGM = true;
      };
      let loadAndAutoPlay = audioUrl => {
        const audioContext = this.audioContext;
        const xhr = new XMLHttpRequest();
        xhr.open("GET", audioUrl, true);
        xhr.responseType = "arraybuffer";
        xhr.onreadystatechange = () => {
          if (xhr.status < 400 && xhr.status >= 200 && xhr.readyState === 4) {
            audioContext.decodeAudioData(xhr.response, buffer => {
              this.buffer = buffer;
              WeixinJSBridge.invoke("getNetworkType", {}, () =>
                this._playSourceNode()
              );
            });
          }
        };
        xhr.send();
      };
      loadAndAutoPlay(url);
      loadAndAutoPlay = null;
      let that = this;

      $(".music").on("click", function() {
        that.toggleBGM();
      });
    }
  </script>
</html>