Canaries with Audio

Memasang kode Canaries with Audio
Code ini menggunakan CSS dan HTML serta Js. Untuk menerapkan kode tersebut Langkah awal Login ke akun blog klik tombol blog baru, buat satubuah link baru  kemudian beri nama sesuai fungsi, klik Edit HTML pada link baru tersebut, hapus semua kode template  
ganti dengan kode blank template, yang tersedia pada sumber  berikut ini Get Blank Template edit background warna sesuai keinginan dan klik simpan selesai

Kemudian klik entri halaman baru HTML pada link tersebut
copy kode dibawah ini, pastekan kedalam halaman baru tersebut dan klik simpan selesai

<style class="Mys2010-styles">
body {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS5lsw6GLRBaAKDhmryrxPrGZpB1a2nz5LwYxDRvYyTC91mj8xFzzwTy2b23BxI0DmnjQ9oLJ9cB611UL2pFtau8C5ibn6pPr8qJXr9BwGqCPwWGLUJFjSIFmvPKtfToP0oH7DS7JcRYJ9/s1600-r/utan-mys2010.jpg);color:red;height:100%;overflow:hidden;}

header {
  -o-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  padding:  0px 0;
  position: fixed;
  top: 0;
  width: 100%;
  background: #777 ;
  border-bottom: 3px solid #dad;
}
/* GRADIEND */
.ap {
position: fixed;
right: 0;
bottom: 0;
left: 0;
height: 60px;
margin: auto;
font-family: Arial, sans-serif;
font-size: 14px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
color: #333;
background: #  ;
border-top: 2px solid #f0f;
z-index: 9999;}

/*bird*/
canvas {
  display: block;
  margin: 0 auto;
  margin: calc(0vh - 60px) auto;
   
  border-radius: 320px;
  box-shadow: 0px 0px 120px 3px #ccc;
}
/*audio*/
.buttons{
  width:500px;
  margin:0 auto;
  text-align:center;
  font-family: 'Bernard MT Condensed', sans-serif;
  font-size:18px;
  color: #EE82EE
}
.buttons a:hover {
  background-color:#0033CC;}
.buttons a:active, a:focus {
background-color:  #FF6347;
 box-shadow:0 0px 0 rgba(0,0,0,0.4) inset;  
  transition:all 0.1s}
audio{
  display:none
}
 </style>

<canvas id = "c"></canvas>
<header> 
<div class="Top Title Header">
<div class="buttons">
<a href="#" data-fx="epic.swf_1"> <font size="3" color="orange"face="arial"><b>♫ PLAY ♫</b></a>
</div>
</header>

<!-- GRADIEND -->
<div class="ap" id="ap">
<div align="center">
<p>
<a href="Link" target="_blank" title="SEO l"> 
<font size="2" color="orange"face="arial">Cibeber Cimahi</p>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9mZwE1hxxBIz-tWksu-19Ci_bDAev9Twjk2s3_RJ3Y3DqPeaPkqWJ3nwDgTJ40UNr7AfkjNcUrMrZyk7sjM5SW9zZawfYM2izL8G7E0tKNBQtsGXomZXySgY_AFT2HEx818p1SNdjUrLt/s1600-r/Loading-Mys2010.gif" name="e902" border="0" width="28" height="29" /></a> 

<script src='//assets.codepen.io/assets/common/stopExecutionOnTimeout.js?t=1'></script>
<script>var canvas = document.getElementById("c");
var ctx = canvas.getContext("2d");
var cw = canvas.width = 700,
  cx = cw / 2;
var ch = canvas.height = 500,
  cy = 3*ch / 4;
var rad = Math.PI / 180;
var frames = 0;
var spring = .005;//elasticidad
var leafColors = ["#5a9435","#76ae3e"];
var heartsRy = [];
ctx.font="35pt Tangerine";
ctx.strokeStyle="hsl(19,98%,45%)";
ctx.textAlign="center";

// BRANCH
var bez = {
 x:0,
 y:cy,
 cx:cx,
 cy:cy,
 _x:cw-50,
 _y:cy,
 dest_y:cy + 20,
 speed: 0
}
var bez1 = {
 _x:0,
 _y:cy+20,
 cx:cx,
 cy:cy+15,
 x:cw-50,
 y:cy+10,
 dest_y:cy + 30,
 speed: 0
}

function Animacion() {
  elId = window.requestAnimationFrame(Animacion);
  frames++
  ctx.clearRect(0, 0, cw, ch);
  
  ctx.fillStyle ="red";
  ctx.fillText("Mys2010",cx,30);
  ctx.fillText("-",cx,50);
  
  
   heartsAnimation();
 
  /////////////////////////////
  var dist = (bez.dest_y - bez._y);
  var acc = dist * spring;  
  bez.speed += acc;
  bez._y += bez.speed;
  
  var dist1 = (bez1.dest_y - bez1.y);
  var acc1 = dist1 * spring;  
  bez1.speed += acc1;
  bez1.y += bez1.speed;
  ////////////////////////////
  
ctx.fillStyle = "hsl(31,40%,25%)";  


drawBranch(bez,bez1);
drawTwig(pointOnQuadraticBezier(bez1,.3),30,20,30,60); 
drawTwig(pointOnQuadraticBezier(bez1,.3),15,10,20,80); 
drawTwig(pointOnQuadraticBezier(bez1,.6),20,10,20,30);
drawTwig(pointOnQuadraticBezier(bez,.9),10,-20,20,-30);
drawTwig(pointOnQuadraticBezier(bez,.9),5,-10,20,-70);  

DrawBird(50,.26,180,50);
DrawBird(60,.52,0,50);
DrawBird(55,.8,42,95); 
}

elId = window.requestAnimationFrame(Animacion);

function Bird(R,poz,color){  
  this.R = R;
  this.x=poz.x;
  this.y=poz.y -this.R;
  this.color=color;
}
  
function DrawBird(R,t,hue,light){
 var color =  "hsl("+hue+","+light+"%,70%)";
 var tuftColors = ["hsl("+hue+","+light+"%,60%)","hsl("+hue+","+light+"%,50%)"];
 ctx.strokeStyle ="hsl(31,40%,25%)"
 var poz =  pointOnQuadraticBezier(bez,t)
 var bird = new Bird(R,poz,color);
    // TAIL
  ctx.fillStyle = "hsl("+hue+","+light+"%,50%)";
 ctx.beginPath();
 ctx.moveTo(bird.x,bird.y+.5*bird.R);
 ctx.lineTo(bird.x-1.1*bird.R,bird.y+.3*bird.R);
 ctx.lineTo(bird.x-1.2*bird.R,bird.y+.7*bird.R); 
 ctx.closePath(); 
 ctx.fill();
  // BODY
 ctx.fillStyle = bird.color; 
 ctx.beginPath();
 ctx.arc(bird.x, bird.y, bird.R,0,2*Math.PI);
 ctx.fill();
  //EYES
 var x1 = bird.x + 21*Math.cos(-165*rad);
 var x2 = bird.x + 21*Math.cos(-15*rad);
 var y1 = bird.y + 21*Math.sin(-165*rad);
 var y2 = bird.y + 21*Math.sin(-15*rad); 
 ctx.fillStyle = "white";
 ctx.beginPath();
 ctx.arc(x1,y1,20,0,2*Math.PI);
 ctx.fill();
 ctx.stroke(); 
 ctx.beginPath();
 ctx.arc(x2,y2,20,0,2*Math.PI);
 ctx.fill();
 ctx.stroke();
 ctx.fillStyle = "black";
 ctx.beginPath();
 ctx.arc(x1+5,y1+5,10,0,2*Math.PI);
 ctx.fill();
 ctx.stroke(); 
 ctx.beginPath();
 ctx.arc(x2-5,y2+5,10,0,2*Math.PI);
 ctx.fill();
 ctx.stroke();
  // BEAK
 ctx.fillStyle = "darkorange";
 ctx.beginPath();
 ctx.moveTo(bird.x, bird.y);
 ctx.lineTo(bird.x+7, bird.y+10);
 ctx.lineTo(bird.x, bird.y+20);
 ctx.lineTo(bird.x-7, bird.y+10);
 ctx.closePath();
 ctx.fill(); 
 // LEGS
 var leg1 = pointOnQuadraticBezier(bez,t+.02)
 ctx.beginPath();
 ctx.arc(leg1.x,leg1.y,6,0,2*Math.PI); 
 ctx.fill();
 var leg2 = pointOnQuadraticBezier(bez,t-.02)
 ctx.beginPath();
 ctx.arc(leg2.x,leg2.y,6,0,2*Math.PI); 
 ctx.fill();
 //TUFT 
 var tuft = new Leaf(bird.x,bird.y-bird.R,15,-20*rad);
 drawLeaf(tuft,tuftColors);
 var tuft1 = new Leaf(bird.x,bird.y-bird.R,10,-80*rad);
 drawLeaf(tuft1,tuftColors); 

}

function pointOnQuadraticBezier(bez,t){
var o = {}
o.x = (1 - t) * (1 - t) * bez.x + 2 * (1 - t) * t * bez.cx + t * t * bez._x;
o.y = (1 - t) * (1 - t) * bez.y + 2 * (1 - t) * t * bez.cy + t * t * bez._y;
return o;
}

function Leaf(x,y,r,a){
  this.r = r;
  this.a = a;
  this.x = x + this.r*Math.cos(this.a);
  this.y = y + this.r*Math.sin(this.a);
  this.R = Math.sqrt(2*this.r*this.r);
  this.a1 = this.a + Math.PI/2;
  this.a2 = this.a1 +Math.PI;
  this.from_a = this.a - 45*rad;
  this.to_a = -90*rad +this.from_a;
  this.x1 = this.x + this.r*Math.cos(this.a1);
  this.y1 = this.y + this.r*Math.sin(this.a1);
  this.x2 = this.x + this.r*Math.cos(this.a2);
  this.y2 = this.y + this.r*Math.sin(this.a2);  
}


function drawLeaf(l,leafColors){  
ctx.save();
ctx.fillStyle =leafColors[0];
ctx.beginPath();
ctx.arc(l.x1,l.y1,l.R,l.from_a,l.to_a,true);
ctx.fill();
ctx.fillStyle =leafColors[1];
ctx.beginPath();
ctx.arc(l.x2,l.y2,l.R,Math.PI+l.from_a,Math.PI+l.to_a,true);
ctx.fill();
ctx.restore();
}

function drawBranch(bez,bez1){
ctx.beginPath();
ctx.moveTo(bez.x,bez.y);// aquí empieza la curva
ctx.quadraticCurveTo(bez.cx,bez.cy,bez._x,bez._y);
ctx.lineTo(bez1.x,bez1.y);// aquí empieza la curva
ctx.quadraticCurveTo(bez1.cx,bez1.cy,bez1._x,bez1._y);
ctx.fill();  
}



function drawTwig(l,dx,dy,size,angle){console.clear();
  var x = l.x;
  var y = l.y;
  var _x = x + dx;
  var _y = y + dy;
  ctx.beginPath();
  ctx.moveTo(x,y);
  ctx.lineTo(_x,_y);
  ctx.stroke();
  var lx = l.x+dx;
  var ly=l.y+dy;
  var leaf = new Leaf(lx,ly,size,angle*rad);
  drawLeaf(leaf,leafColors);
} 
function Heart(){
  this.x = cw/2;
  this.y = 3*ch/4;
  this.r = 5;
  this.a = -90;
  this.lightness= 50;
  this.pn = Math.random() > .5 ? 1 : -1;
  this.fall = Math.round(Math.random() * 7) + 1;
  this.drift = this.pn * Math.round(Math.random() * 4) + 1;
  
}

Heart.prototype.draw = function() {
  var x = this.x,y=this.y,r= this.r,a=this.a;
  ctx.fillStyle = "hsl(0,95%,"+this.lightness+"%)"
  ctx.beginPath();
  var x1 = x + r * Math.cos(a * rad);
  var y1 = y + r * Math.sin(a * rad);
  var cx1 = x + r * Math.cos((a + 22.5) * rad);
  var cy1 = y + r * Math.sin((a + 22.5) * rad);

  var cx2 = x + r * Math.cos((a - 22.5) * rad);
  var cy2 = y + r * Math.sin((a - 22.5) * rad);
  var chord = 2 * r * Math.sin(22.5 * rad / 2);

  ctx.beginPath();
  ctx.moveTo(x1, y1);
  ctx.arc(cx1, cy1, chord, (270 + a) * rad, (270 + a + 225) * rad);
  ctx.lineTo(x, y);
  ctx.moveTo(x1, y1);
  ctx.arc(cx2, cy2, chord, (90 + a) * rad, (90 + a + 135) * rad, true);
  ctx.lineTo(x, y);
  ctx.fill();
}

function heartsAnimation(){
  if(heartsRy.length < 20 && frames%5==0){
  var heart = new Heart();
  heartsRy.push(heart);
  }
  for(var i = 0; i < heartsRy.length; i++){
    if(heartsRy[i].lightness >=100){
      heartsRy[i].y = 3*ch/4;
      heartsRy[i].x = cw/2;
      heartsRy[i].fall = Math.round(Math.random() * 7) + 1;
      heartsRy[i].drift = heartsRy[i].pn * Math.round(Math.random() * 4) + 1;
      heartsRy[i].lightness = 50;
      heartsRy[i].r = 5;
    }
    heartsRy[i].y -= heartsRy[i].fall;
    heartsRy[i].fall-=.1;
    heartsRy[i].x += heartsRy[i].drift;
    heartsRy[i].lightness ++
    heartsRy[i].r +=.2;
    heartsRy[i].draw();
  }
}
</script>

<script src='//assets.codepen.io/assets/common/stopExecutionOnTimeout.js?t=1'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script>$('.buttons a').on('click', function (e) {
    e.preventDefault();
    $('audio').remove();
    var fx = $(this).attr('data-fx');
    $('<audio controls="controls" autobuffer="autobuffer" autoplay="autoplay"> <source src="https://sites.google.com/site/gg1cover/music/kenari-mys2010.mp3"  type="audio/mpeg"> </audio>').appendTo('.buttons');
}); 
</script>

Bird Code by. Gabi on Codepen
Sound Code by. Nodws on Codepen
Code Edited by. Mys2010 on Codepen

DEMOSHOW

If you want to directly copy and paste you canDownload Here Canaries with Audio

Category: Canaries with Audio