Music Box

In this example below you will see how to do a Music Box with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by TirtA, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright TirtA ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<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/TirtA/music-box-aBbeMB */
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/TirtA/music-box-aBbeMB */
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)";

Comments