使用AudioContext实现的生日快乐弹奏动画

Happy birthday App，音乐自动弹奏动画，带随机大小的三角形、正方形漂浮动画背景。

h5, audio, music

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 3561
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

const audioCtx = new (window.AudioContext || window.webkitAudioContext)();

//DOM
notes.map((n) => createSpan(n));

function createSpan(n){
  n.sp = document.createElement("span");
  n.sp.innerHTML = n.t;
  n.p.appendChild(n.sp);
}

// SOUND
let speed = inputSpeed.value;
let flag = false;
let sounds = [];

class Sound{
  constructor(freq,dur,i){
    this.stop = true;
    this.frequency = freq;// la frecuencia
    this.waveform = "triangle";// la forma de onda
    this.dur = dur;// la duración en segundos
    this.speed = this.dur*speed;
    this.initialGain = .15;
    this.index = i;
    this.sp = notes[i].sp
  }
  
  cease(){
    this.stop = true;
    this.sp.classList.remove("jump");
    //this.sp.style.animationDuration = `${this.speed}s`;
    if(this.index < sounds.length-1){sounds[this.index+1].play();}
    if(this.index == sounds.length-1){flag = false;}
  }
  
  play(){
   // crea un nuevo oscillator
   this.oscillator = audioCtx.createOscillator();
   // crea un nuevo nodo de ganancia 
   this.gain = audioCtx.createGain();
   // establece el valor inicial del volumen del sonido 
   this.gain.gain.value = this.initialGain;
   // establece el tipo de oscillator  
   this.oscillator.type = this.waveform;
   // y el valor de la frecuencia 
   this.oscillator.frequency.value = this.frequency;
   // el volumen del sonido baja exponencialmente     
   this.gain.gain.exponentialRampToValueAtTime(0.01, audioCtx.currentTime + this.speed);
   // conecta el oscillator con el nodo de ganancia 
   this.oscillator.connect(this.gain);
   // y la ganancia con el dispositivo de destino
   this.gain.connect(audioCtx.destination);
   // inicia el oscillator 
   this.oscillator.start(audioCtx.currentTime);
   this.sp.setAttribute("class", "jump");
   this.stop = false;
   // para el oscillator después de un tiempo (this.speed) 
   this.oscillator.stop(audioCtx.currentTime + this.speed); 
   this.oscillator.onended = ()=> {this.cease();}
  }  
}

for(let i=0; i < notes.length; i++){
  let sound = new Sound(notes[i].f, notes[i].d,i);
  sounds.push(sound);
}

// EVENTS
wishes.addEventListener("click",function(e){
  if(e.target.id != "inputSpeed" && !flag){
  sounds[0].play();
  flag = true;}
  },false);
                        
                        
inputSpeed.addEventListener("input",function(e){
  speed = this.value;
  sounds.map((s) => {
    s.speed = s.dur*speed
  });
},false);

// CANVAS
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
let cw = canvas.width = window.innerWidth,
  cx = cw / 2;
let ch = canvas.height = window.innerHeight,
  cy = ch / 2;

let requestId = null;

const colors = ["#93DFB8","#FFC8BA","#E3AAD6","#B5D8EB","#FFBDD8"];

class Particle{
  constructor(){
    this.x = Math.random() * cw;
    this.y = Math.random() * ch;
    this.r = 15 + ~~(Math.random() * 20);//radius of the circumcircle
    this.l = 3 + ~~(Math.random() * 2);//polygon sides
    this.a = 2*Math.PI/this.l;// angle between polygon vertices
    this.rot = Math.random()*Math.PI;// polygon rotation
    this.speed = .05 + Math.random()/2;
    this.rotSpeed = 0.005 + Math.random()*.005;
    this.color = colors[~~(Math.random() * colors.length)];
  }
  update(){
    if(this.y < -this.r){
      this.y = ch + this.r;
      this.x = Math.random() * cw;
    }
    this.y -= this.speed;
  }
  draw(){
    ctx.save();
    ctx.translate(this.x,this.y);
    ctx.rotate(this.rot);
    ctx.beginPath();
    for( let i = 0; i < this.l; i++ ){
		let x = this.r * Math.cos( this.a*i );
		let y = this.r * Math.sin( this.a*i );
		ctx.lineTo(x, y);
    }
    ctx.closePath();
    ctx.lineWidth = 4;
    ctx.strokeStyle = this.color;
    ctx.stroke();
    
    ctx.restore();
  }
  
}

let particles = [];
for(let i = 0; i < 20; i++){
let p = new Particle();
particles.push(p)
}

function Draw() {
requestId = window.requestAnimationFrame(Draw);
//ctx.globalAlpha=0.65;
ctx.clearRect(0,0,cw,ch);
particles.map((p) => {
  p.rot += p.rotSpeed;
  p.update();
  p.draw();
})

}

function Init() {
	if (requestId) {
		window.cancelAnimationFrame(requestId);
		requestId = null;
}

cw = canvas.width = window.innerWidth,cx = cw / 2;
ch = canvas.height = window.innerHeight,cy = ch / 2;

//particles.map((p) => p.update());
Draw();
};

setTimeout(function() {
		Init();
		window.addEventListener('resize', Init, false);
}, 15);

编译

CSS

@import url(https://fonts.googleapis.com/css?family=Raleway:400,500,300,600,700,800);
body {
    height: 100vh;
    background-image: radial-gradient(#374566, #010203);
    color: #ccc;
    font-family: Raleway;
    letter-spacing: 0.15em;
    font-size: 20px;
}
canvas {
    position: absolute;
    z-index: -1;
    top: 0;
}
#wishes {
    width: 20em;
    margin: calc(50vh - 6.7em) auto;
    border: 1px dotted;
    text-align: center;
    background: hsla(210, 50%, 15%, 0.75);
}
span {
    display: inline-block;
}
span.jump {
    animation: jump 0.25s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0s 2 alternate;
}
@keyframes jump {
    to {
        transform: translateY(-0.7em);
    }
}
#pleaseClick {
    position: absolute;
    background: hsla(210, 50%, 15%, 0.75);
    font-size: 80%;
    width: 10em;
    text-align: center;
    left: calc(50vw - 5em);
    top: calc(50vh - 12.5em);
    animation: jump 1s ease-in-out infinite alternate;
}
#pleaseClick span {
    font-size: 200%;
}
.control {
    text-align: center;
}
input[type="range"],
input[type="range"]::-webkit-slider-runnable-track,
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18em;
}
input[type="range"]::-webkit-slider-thumb {
    background-color: #777;
    width: 20px;
    height: 20px;
    border: 3px solid #374566;
    border-radius: 50%;
    margin-top: -9px;
}
input[type="range"]::-moz-range-thumb {
    background-color: #777;
    width: 15px;
    height: 15px;
    border: 3px solid #333;
    border-radius: 50%;
}
input[type="range"]::-ms-thumb {
    background-color: #777;
    width: 20px;
    height: 20px;
    border: 3px solid #333;
    border-radius: 50%;
}
input[type="range"]::-webkit-slider-runnable-track {
    background-color: #777;
    height: 3px;
}
input[type="range"]:focus::-webkit-slider-runnable-track {
    outline: none;
}
input[type="range"]::-moz-range-track {
    background-color: #777;
    height: 3px;
}
input[type="range"]::-ms-track {
    background-color: #777;
    height: 3px;
}
input[type="range"]::-ms-fill-lower {
    background-color: HotPink;
}
input[type="range"]::-ms-fill-upper {
    background-color: black;
}

HTML

Happy birthday App，音乐自动弹奏动画，带随机大小的三角形、正方形漂浮动画背景。

h5, audio, music

编辑器支持Emmet

快捷键

Happy birthday App，音乐自动弹奏动画，带随机大小的三角形、正方形漂浮动画背景。

h5, audio, music

使用SoundCity和Three.JS结合实现的音乐城市可视化动画

使用HTML5 Audio API（AudioContext）实现的DJ划拨碟片音效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：