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

这里写自定义目录标题

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>
    
    <div style="display: none">
      <script
        type="text/javascript"
        src="https://v1.cnzz.com/z_stat.php?id=1280693457&web_id=1280693457"
      >script>
    div>
  body>
  
  <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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107

相关阅读:
STM32H7B0 HAL库中关于DMA的注意事项以及DCMI调试遇到的问题及解决方法
上海IB国际学校介绍
Codeforces Round #812 (Div. 2)A.B.C.D
大厂案例 - 海量分类业务设计的一些思考
51单片机LED灯渐明渐暗实验
帮看看这个笔记本咋样吧
【开发问题系列】CSV转Excel
c - ar 中的 “rcs“选项有什么作用？
Git:代码回溯，分布式版本控制，团队协同开发，远程备份
RabbitMQ概述，死信队列

原文地址：https://blog.csdn.net/oneya1/article/details/132847964