SOURCE

var box = $('.container')[0],
  progressNode = $('.progress')[0],
  music = 'http://wetwet.cc/qiangu1.mp3',
  itemR = 20,
  max = 300,
  num = 0,
  w = box.offsetWidth,
  h = box.offsetHeight,
  ball = [],
  requestAnimationFrame = window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame;
function $(s) {
  return document.querySelectorAll(s);
}

var ac = new (window.AudioContext || window.webkitAudioContext)();
var analyser = ac.createAnalyser();
analyser.connect(ac.destination);
analyser.fftSize = 128;
load();

// 获取音频、分析音频
function load () {
  var xhr = new XMLHttpRequest();
  xhr.responseType = 'arraybuffer';
  xhr.open('GET', music);
  xhr.send()
  xhr.onreadystatechange = function () {
    console.log(xhr.readyState, xhr.status);
    if(xhr.readyState === 4 && xhr.status === 200 || xhr.status === 304) {
      // 解码音频
      ac.decodeAudioData(xhr.response, function (buffer) {
        var source = ac.createBufferSource();
        source.buffer = buffer;
        source.connect(analyser);
        source.start(0);
      }, function (err) {
        console.log(err);
      })
    }else if(xhr.readyState === 4){
      alert('音乐下载出错，请重试或者换一首歌曲链接')
    }
  }
  xhr.onprogress = function(e) {
    console.log(e)
    progressNode.innerHTML = parseInt(e.loaded / e.total * 100) + '%';
  }
}

function analysis() {
  var arr = new Uint8Array(analyser.frequencyBinCount);
  drow(arr);
  function v() {
    analyser.getByteFrequencyData(arr);
    changeBall(arr);
    requestAnimationFrame(v);
  }
  v();
}

function drow(arr) {
  arr.forEach(function (item, i) {
    ball.push(new Ball(box, w, h, item));
  })
}
function changeBall(arr) {
  arr.forEach(function (item, i) {
    ball[i].run(item);
  })
}


//球的实现
function Ball(container, maxW, maxH, r) {
  this.container = container;
  this.w = maxW;
  this.h = maxH;
  this.r = r || 5;
  this.t = this.random(h);
  this.l = this.random(w);
  this.speed = this.random(10, 1) || 1;
  this.init();
}
Ball.prototype.init = function () {
  var d = document.createElement('div'),
    itemBar = document.createElement('div'),
    bg = this.getColor(),
    itemBarCss = `width:${this.r}px;height:${this.r}px;position:absolute;top:${this.t}px;left:${this.l}px;`;
  itemCss = `width:${this.r}px;height:${this.r}px;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);-webkit-transform:translate(-50%, -50%); background:${bg};box-shadow:0 0 ${this.random(10, 1)}px 5px ${bg};`;
  d.setAttribute('class', 'item');
  d.style.cssText = itemCss;
  itemBar.style.cssText = itemBarCss;
  itemBar.appendChild(d);
  this.dom = itemBar;
  this.itemer = d;

  this.container.appendChild(this.dom);
  // this.run();
}

Ball.prototype.getColor = function () {
  var rgb = `${this.random(255, true)}, ${this.random(255, true)}, ${this.random(255, true)}`
  return `radial-gradient(closest-side, rgba(${rgb},1) 0, rgba(${rgb},0) 100%);`
}
Ball.prototype.random = function (max, int) {
  var r = Math.random() * max;
  return int ? parseInt(r) : r;
}
Ball.prototype.run = function (r) {
  if(r <= this.r) return;
  this.itemer.style.width = r + 'px';
  this.itemer.style.height = r + 'px';
  // var timer = setInterval(function () {
  //   self.l += self.speed;
  //   self.dom.style.left = self.l + 'px';
  //   if (self.l >= self.w) {
  //     clearInterval(timer);
  //     timer = null;
  //     self.dom.parentNode.removeChild(self.dom);
  //     num--
  //   }
  // }, 50)
}

analysis();

<div class="container">
  <p class="progress"></p>
  
</div>

.container{
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: #080155;
  overflow:hidden;
}
/* .item{
  animation:run 2s infinite alternate;
  transform:scle(1);
} */
.progress{
  position: absolute;
  top: 0;
  left: 0;
  z-index:1;
  color:#fff;
}
@keyframes run {
  0% { transform: scale(1);opacity:1;}
  100% { transform:scale(2); opacity:0.2;}
}
.btn{
  position: absolute;
  left: 50px;
  top: 10px;
}