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

一只开心鸭！

已于 2024-03-12 16:45:46 修改

阅读量1.4k

点赞数 1

分类专栏： vue 文章标签： vue.js javascript jquery

于 2023-09-13 11:04:42 首次发布

本文链接：https://blog.csdn.net/oneya1/article/details/132847964

版权

vue 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

这里写自定义目录标题

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;
      // $(".music").addClass("map"); //关闭音乐
      this.toggleBGM = function() {
        console.log("音乐进来了嘛");
        if (typeof this.sourceNode == "object") {
          console.log("进来", this.isPlayingBGM);
          if (this.isPlayingBGM) {
            this.sourceNode.stop();
            this.isPlayingBGM = false;
            // $(".music").addClass("map");
            $(".music").addClass("map"); //关闭音乐
          } else {
            console.log("移除音乐");
            $(".music").removeClass("map");
            this._playSourceNode(); //开启音乐
          }
        }
      };
      this._playSourceNode = function() {
        console.log("开启音乐");
        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>