Loading

Christmas Sounds

Christmas Sounds JS - Java Script and Jquery. More info. //goo.gl/vHGwBP

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Christmas Sounds</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">

<link href="//goo.gl/mtctLZ" rel="stylesheet">
<link href="//goo.gl/HLXxEE" rel="stylesheet">
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <div id="contenedor">
  <div class="note center white_bold" id="0">DO</div>
  <div class="note center white_bold" id="1">RE</div>
  <div class="note center white_bold" id="2">MI</div>
  <div class="note center white_bold" id="3">FA</div>
  <div class="note center white_bold" id="4">SOL</div>
  <div class="note center white_bold" id="5">LA</div>
  <div class="note center white_bold" id="6">SI</div>
  <div class="note center white_bold" id="7">DO</div>
</div>
<div class="boton center white_bold">Christmas Sounds</div>
<audio class="sonidos" src="//goo.gl/T1rxRG"></audio>
<audio class="sonidos" src="//goo.gl/KT8FN3"></audio>
<audio class="sonidos" src="//goo.gl/1SfsNS"></audio>
<audio class="sonidos" src="//goo.gl/OsOCXe"></audio>
<audio class="sonidos" src="//goo.gl/vukZmv"></audio>
<audio class="sonidos" src="//goo.gl/Bjd9KT"></audio>
<audio class="sonidos" src="//goo.gl/MS9HTp"></audio>
<audio class="sonidos" src="//goo.gl/ANMMwn"></audio>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>

    <script  src="js/index.js"></script>

</body>
</html>
/* Downloaded from https://ahoj.co.uk/ */
body{background: #203549;}

#contenedor {
  width: 560px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  height: 300px;
  justify-content: space-between;
}

.note {
  width: 60px;
  border-radius: 20px;
  cursor: pointer;
}

.note:nth-child(1) {
    background: #02B65E;
    height: 300px;
}

.note:nth-child(2) {
    background: #F0D20E;
    height: 280px;
}

.note:nth-child(3) {
    background: #D04559;
    height: 260px;
}

.note:nth-child(4) {
    background: #E28C12;
    height: 240px;
}

.note:nth-child(5) {
    background: #8E83C8;
    height: 220px;
}

.note:nth-child(6) {
    background: #0285D4;
    height: 200px;
}

.note:nth-child(7) {
    background: #FDC1C0;
    height: 180px;
}

.note:nth-child(8) {
    background: #BE3C22;
    height: 160px;
}

.boton {
  margin: 20px auto;
  width: 560px;
  height: 50px;
  background: #333;
  cursor: pointer;
}

.white_bold {
  font-family: Helvetica, Arial, Sans-Serif;
  color: white;
  font-weight: bold;
  font-size: 20px;
  user-select: none;
}

.center {
  text-align: center;
  display: flex;
  justify-content: center;
  flex-direction: column;
}
.boton:hover{
  box-shadow: 0 10px 12px rgba(255,255,255, .2);
  
}
.boton:focus,.boton:active{
  box-shadow: 0 10px 12px rgba(255,255,255, .6);
}

/* Downloaded from https://ahoj.co.uk/ */
var notes = [9, 2, 2, 2, 2, 2, 2, 2, 4, 0, 1, 2, 3, 3, 3, 3, 2, 2, 2, 1, 1, 2, 1, 4, 2, 2, 2, 2, 2, 2, 2, 4, 0, 1, 2, 3, 3, 3, 3, 2, 2, 4, 4, 3, 1, 0,9, 2, 2, 2, 2, 2, 2, 2, 4, 0, 1, 2, 3, 3, 3, 3, 2, 2, 2, 1, 1, 2, 1, 4, 2, 2, 2, 2, 2, 2, 2, 4, 0, 1, 2, 3, 3, 3, 3, 2, 2, 4, 4, 3, 1, 0];

var tempos = [4, 1, 1, 2, 1, 1, 2, 1, 1, 1, 1, 4, 1, 1, 2, 1, 1, 2, 1, 1, 1, 1, 2, 2, 1, 1, 2, 1, 1, 2, 1, 1, 1, 1, 4, 1, 1, 2, 1, 1, 2, 1, 1, 1, 1, 4,4, 1, 1, 2, 1, 1, 2, 1, 1, 1, 1, 4, 1, 1, 2, 1, 1, 2, 1, 1, 1, 1, 2, 2, 1, 1, 2, 1, 1, 2, 1, 1, 1, 1, 4, 1, 1, 2, 1, 1, 2, 1, 1, 1, 1, 4];

var notas = $('.sonidos');

$('.note').click(function() {
  let num = parseInt(this.id);
  tocar(num);
});

function tocar(num) {
  notas[num].pause();
  notas[num].currentTime = 0;
  notas[num].play();
  $("#" + num).css("box-shadow", "0px 0px 10px #fff");
  setTimeout(function() {
    $("#" + num).css("box-shadow", "none");
  }, 300);
}







$('.boton').click(function() {
  for (var x = 0, ln = notes.length; x < ln; x++) {
    setTimeout(function(y) {
      tocar(notes[y]);
    }, ritmo(x) * 350, x);
  }
});

function ritmo(num) {
  suma = 0;
  for (c = 0; c < num ; c++) {
    suma = suma + tempos[c];
  }
  return suma;
}

This awesome code is write by WILDER TAYPE, you can se more from this user in the personal repository