音乐粒子

下载代码

html

css

分享到微信朋友圈

html

css

body
  background-color: #030303
  overflow: hidden

#background
  position: absolute
  top: 0
  left: 0
  z-index: 0
  width: 100vw
  height: 100vh
  background-image: radial-gradient(rgba(105,205,215,0.5),rgba(10,20,30,0))
  background-position: 80% 100%
  background-size: 160% 200%
  opacity: 1
  transition: opacity 2s ease-in-out
  
  &.hidden
    opacity: 0
    ~ #canvas
      filter: saturate(200%)
    
  &.loading
    opacity: 0.2
    
    &+#loader
      opacity: 1
    
      #spinner
        animation: spinner-anim 2s ease-out infinite
        
        &::before
          animation: spinner-anim 2s ease-out infinite
        
        &::after
          animation: spinner-anim 1s ease-out infinite
        
.dg.ac
  z-index: 4 !important
  
#loader
  position: absolute
  z-index: 1
  display: flex
  align-items: center
  justify-content: center
  top: calc(50% - 25px)
  height: 50px
  width: 100vw
  opacity: 0
  transition: opacity 0.5s ease-in-out
  
  #loading-text
    font-size: 1.8em
    font-family: 'Josefin Sans', sans-serif
    text-align: center
    color: #efefef
    margin-left: 10px
    transition: all 0.5s ease-in-out
    
  #spinner
    height: 50px
    width: 50px
    border: 2px solid #efefef
    border-color: transparent transparent #efefef #efefef
    border-radius: 50%
    margin-right: 10px
    transform: rotate(0deg)
    
    &::before, &::after
      position: absolute
      content: ''
      display: block
      border: 2px solid #efefef
      border-color: transparent transparent #efefef #efefef
      border-radius: 50%
    
    &::before
      top: 3px
      left: 3px
      height: 40px
      width: 40px
    
    &::after
      top: 8px
      left: 8px
      height: 30px
      width: 30px
    
#canvas
  position: absolute
  z-index: 2
  top: 0
  left: 0
  overflow: hidden
  height: 100vh
  width: 100vw

#title
  position: absolute
  top: 30px
  left: 30px
  font-family: 'Josefin Sans', sans-serif
  font-size: 1.2em
  color: #efefef
  
#audio-toggle-container
  position: absolute
  bottom: 30px
  left: 30px
  height: 40px
  width: 100px

#check-audio-toggle
  display: none
  
  &.disabled + #lbl-audio-toggle
    opacity: 0.2
    pointer-events: none

&:checked + #lbl-audio-toggle:after
    content: "Pause"
    background-color: #ff3401
    color: #efefef
    border: 2px solid #ff3401
    opacity: 0.2
    transform: translateY(-3px)
    
#lbl-audio-toggle
  position: relative
  display: block
  width: 100%
  height: 100%
  cursor: pointer
  
  &::after
    position: absolute
    display: block
    height: 100%
    width: 100%
    z-index: 2
    content: 'Play'
    box-sizing: border-box
    text-align: center
    line-height: 40px
    font-family: 'Josefin Sans', sans-serif
    font-size: 1.2em
    color: #009688
    border: 2px solid #009688
    opacity: 1
    transform: translateY(0px)
    transition: all 0.25s ease-in-out
    
#codepen-link
  position: absolute
  bottom: 30px
  right: 30px
  height: 40px
  width: 40px
  z-index: 10
  border-radius: 50%
  box-sizing: border-box
  background-image: url('http://www.seanalexanderfree.com/codepen/avatar.jpg')
  background-position: center center
  background-size: cover
  opacity: 0.4
  transition: all 0.25s
  
  &:hover
    opacity: 0.8
    box-shadow: 0 0 6px #efefef
  
@keyframes spinner-anim
  to
    transform: rotate(360deg)

JavaScript

;(function(main) {

main(this, document, Vector2, undefined);
  
})(function(window, document, vec2) {

var Particle = (function() {
    function Particle(index, parent) {
      this.parent = parent;
      this.index = index;
      this.minSize = 5;
      this.init();
    }
    return Particle;
  })();

Particle.prototype.init = function() {
    this.freqVal = this.parent.freqData[this.index] * 0.01;
    this.size = (this.freqVal * 20) + this.minSize;
    this.position = new Vector2(Math.random() * this.parent.dimensions.x, this.parent.dimensions.y + this.size);
    this.velocity = new Vector2(2 - Math.random() * 4, 0);
  };

Particle.prototype.update = function() {
    this.freqVal = this.parent.freqData[this.index] * 0.01;

this.size = (this.freqVal * 20) + this.minSize;
    this.offset = this.size / 2;

this.hue = ((this.index / this.parent.bufferLen) * 360) + 120 + this.parent.tick / 6;
    this.saturation = this.freqVal * 35;
    this.alpha = this.freqVal * 0.3;

this.fill = 'hsla(' + this.hue + ',' + this.saturation + '%,50%,' + this.alpha + ')';

this.lift = Math.pow(this.freqVal, 3);

this.position.subY(this.lift);
    this.position.add(this.velocity);

this.checkBounds();
  };

Particle.prototype.checkBounds = function() {
    if (this.position.y < -this.size || this.position.x < -this.parent.dimensions.x*0.25 || this.position.x > this.parent.dimensions.x*1.25) {
      this.init();
    }
  };

var App = (function() {
    function App() {
      this.tick = 0;
      this.currentSong = 1;
      this.dark = false;
      this.wave = true;
      this.globalMovement = new vec2();
      this.initCanvas();
      this.initUI();
      this.initAudio();
      this.loadAudio();
      this.populate();
      this.render();
    }
    return App;
  })();

App.prototype.initCanvas = function() {
    this.canvas = document.getElementById('canvas');
    this.ctx = this.canvas.getContext('2d');
    this.dimensions = {};
    this.resize();
  };

App.prototype.resize = function() {
    this.canvas.width = this.dimensions.x = window.innerWidth;
    this.canvas.height = this.dimensions.y = window.innerHeight;
  };

App.prototype.initUI = function() {
    var self = this;
    this.background = document.getElementById('background');
    this.title = document.getElementById('title');
    this.btnPlay = document.getElementById('check-audio-toggle');
    this.gui = new dat.GUI();
    this.switchSong = this.gui.add(this, 'currentSong').min(1).max(5).step(1).listen();
    this.switchSong.onFinishChange(function(value) {
      self.loadAudio();
    });
    this.toggleBackground = this.gui.add(this, 'dark');
    this.toggleBackground.onFinishChange(function(value) {
      if (value) self.background.classList.add('hidden');
      else if (!value) self.background.classList.remove('hidden');
    });
    this.gui.add(this,'wave');
  };

App.prototype.initAudio = function() {
    var self = this;
    this.baseURL = 'http://www.seanalexanderfree.com/codepen/audio/';
    this.fileNames = ['dmwaltz.mp3', 'nocturne92.mp3', 'mozart25.mp3', 'trista.mp3', 'waltzflowers.mp3'];
    this.songTitles = ['Dmitri Shostakovich - Waltz No. 2', 'Frederic Chopin - Nocturne op. 9 no. 2', 'Mozart - Symphony no. 25', 'Heitor Villa-Lobos - Tristorosa', 'Pyotr Tchaikovsky - Waltz of the Flowers'];

this.audio = document.getElementById('audio');
    this.audio.addEventListener('ended', function() {
      self.audio.currentTime = 0;
      self.audio.pause();
      self.btnPlay.checked = false;
      self.currentSong = self.currentSong < self.fileNames.length ? self.currentSong + 1 : 1;
      self.loadAudio();
    });
    this.audioCtx = new AudioContext();

this.analyser = this.audioCtx.createAnalyser();
    this.source = this.audioCtx.createMediaElementSource(this.audio);

this.source.connect(this.analyser);
    this.analyser.connect(this.audioCtx.destination);

this.bufferLen = this.analyser.frequencyBinCount;
    this.freqData = new Uint8Array(this.bufferLen);
  };

App.prototype.loadAudio = function() {
    var self = this;

this.btnPlay.classList.add('disabled');
    this.background.classList.add('loading');

var request = new XMLHttpRequest();

request.open('GET', this.baseURL + this.fileNames[this.currentSong - 1], true);
    request.responseType = 'blob';

request.onload = function() {
      self.title.innerHTML = self.songTitles[self.currentSong - 1];
      self.btnPlay.classList.remove('disabled');
      self.background.classList.remove('loading');

self.audio.src = window.URL.createObjectURL(request.response);
      self.audio.play();

self.btnPlay.checked = true;
      self.btnPlay.onchange = function(e) {
        if (this.checked) {
          self.audio.play();
        } else {
          self.audio.pause();
        }
      };
    }

request.send();
  }

App.prototype.populate = function() {
    this.particles = [];
    for (var i = 0; i < this.bufferLen; i++) {
      this.particles.push(new Particle(i, this));
    }
    console.log('populated');
  };

App.prototype.draw = function() {
    this.ctx.clearRect(0, 0, this.dimensions.x, this.dimensions.y);
    this.ctx.save();
    for (var i = 0, len = this.particles.length; i < len; i++) {
      var particle = this.particles[i];
      particle.update();
      if (particle.freqVal > 0) {
        if(this.wave) particle.position.add(this.globalMovement);
        this.ctx.beginPath();
        this.ctx.fillStyle = particle.fill;
        this.ctx.beginPath();
        this.ctx.arc(particle.position.x, particle.position.y, particle.size, 0, Math.PI * 180);
        this.ctx.fill();
        this.ctx.closePath();
      }
    }
    this.ctx.restore();
  };

App.prototype.render = function() {
    var self = this;
    this.tick++;
    if(this.wave) this.globalMovement.x = Math.sin(this.tick * 0.01) * 2;
    this.analyser.getByteFrequencyData(this.freqData);
    this.draw();
    window.requestAnimationFrame(self.render.bind(self));
  };

window.onload = function() {
    var app = new App;
    window.onresize = function() {
      app.resize();
    }
  };

window.requestAnimationFrame = (function() {
    return window.requestAnimationFrame ||
      window.webkitRequestAnimationFrame ||
      window.mozRequestAnimationFrame ||
      window.oRequestAnimationFrame ||
      window.msRequestAnimationFrame ||
      function(callback) {
        window.setTimeout(callback, 1000 / 60);
      };
  })();

});

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg