Music Box

Tutorials of (Music box) by Tirta

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Music Box</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <h1>Music Boxes</h1>

<div id="instrument">
	<div id="c" class="box" onclick="playsound1()"></div>
	<div id="d" class="box" onclick="playsound2()"></div>
	<div id="e" class="box" onclick="playsound3()"></div>
	<div id="f" class="box" onclick="playsound4()"></div>
	<div id="g" class="box" onclick="playsound5()"></div>
	<div id="a" class="box" onclick="playsound6()"></div>
	<div id="b" class="box" onclick="playsound7()"></div>
</div>
  
    <script  src="js/index.js"></script>

</body>
</html>
/* Downloaded from https://www.codeseek.co/ */
body {
  background-color: black;
}

#instrument {
  height: 116px;
  width: 812px;
  padding-right: 10px;
  padding-top: 50px;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.box {
  width: 100px;
  height: 100px;
  margin-left: 10px;
  margin-top: 10px;
  float: left;
}

#c {
  background-color: #3e181b;
  border: 3px solid #db1d2d;
  height: 100px;
}

#d {
  background-color: #422018;
  border: 3px solid #f0421c;
  height: 120px;
}

#e {
  background-color: #45391b;
  border: 3px solid #fec02d;
  height: 140px;
}

#f {
  background-color: #193c29;
  border: 3px solid #20d071;
  height: 160px;
}

#g {
  background-color: #18323e;
  border: 3px solid #1a9ddb;
  height: 180px;
}

#a {
  background-color: #331f35;
  border: 3px solid #a13fad;
  height: 200px;
}

#b {
  background-color: #43293d;
  border: 3px solid #f26fd4;
  height: 220px;
}

#c:hover {
  background-color: #661920;
  cursor: pointer;
}

#d:hover {
  background-color: #6e2819;
  cursor: pointer;
}

#e:hover {
  background-color: #735b20;
  cursor: pointer;
}

#f:hover {
  background-color: #1b613b;
  cursor: pointer;
}

#a:hover {
  background-color: #4e2753;
  cursor: pointer;
}

#b:hover {
  background-color: #6f3a62;
  cursor: pointer;
}

#g:hover {
  background-color:  #184d65; 
  cursor: pointer;
}

h1 {
  Color: black;
  font-family: impact;
  text-shadow: 3px 3px 3px blue;
}




/* Downloaded from https://www.codeseek.co/ */
function playsound1() {
  var soundFile = "http://freesound.org/people/ramas26/sounds/95326/download/95326__ramas26__a.wav";
  var sound = document.createElement("AUDIO");
  sound.src = soundFile;
  sound.play();
}

function playsound2() {
  var soundFile = "http://freesound.org/people/ramas26/sounds/95327/download/95327__ramas26__b.wav";
  var sound = document.createElement("AUDIO");
  sound.src = soundFile;
  sound.play();
}

function playsound3() {
  var soundFile = "http://freesound.org/people/ramas26/sounds/95328/download/95328__ramas26__c.wav";
  var sound = document.createElement("AUDIO");
  sound.src = soundFile;
  sound.play();
}

function playsound4() {
  var soundFile = "http://freesound.org/people/ramas26/sounds/95329/download/95329__ramas26__d.wav";
  var sound = document.createElement("AUDIO");
  sound.src = soundFile;
  sound.play();
}

function playsound5() {
  var soundFile = "http://freesound.org/people/ramas26/sounds/95330/download/95330__ramas26__e.wav";
  var sound = document.createElement("AUDIO");
  sound.src = soundFile;
  sound.play();
}

function playsound6() {
  var soundFile = "http://freesound.org/people/ramas26/sounds/95331/download/95331__ramas26__f.wav";
  var sound = document.createElement("AUDIO");
  sound.src = soundFile;
  sound.play();
}

function playsound7() {
  var soundFile = "http://freesound.org/people/ramas26/sounds/95332/download/95332__ramas26__g.wav";
  var sound = document.createElement("AUDIO");
  sound.src = soundFile;
  sound.play();
}

function changePic() {
   var newImage = document.createElement("img");
    newImage.src="http://hdwallpaperbackgrounds.net/wp-content/uploads/2016/07/white-background-5.jpg";
  document.getElementById("c").appendChild(newImage);
}

document.body.style.backgroundImage="url(http://hdwallpaperbackgrounds.net/wp-content/uploads/2016/07/white-background-5.jpg)";

This awesome code ( Music Box ) is write by Tirta, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © Tirta