nakome
10/4/2013 - 7:21 PM

A Pen by Moncho Varela.

A Pen by Moncho Varela.

style.css
content_copyfile_download
/*	Basic
=====================*/
body{
  margin:0;
  padding:0;
  width:100%;
  height:100%;
  position:relative;
  background-image:url(https://dl.dropboxusercontent.com/u/23834858/patterns/04.png);
  background-color:#3C404B;
  background-repeat:repeat;
  background-position:center center;
}
.loader{
  background:#333;
  color:white;
  padding:10px;
}
/*	Structure
====================*/
#musicbox{
  width:500px;
  height:310px;
  position:absolute;
  top:50%;
  left:50%;
  padding:10px;
  margin-top:100px;
  margin-left:-250px;
  /*border-radius*/
  -webkit-border-radius:3px;
  -moz-border-radius:3px;
  border-radius:3px;
}
.led{
  width:180px;
  height:30px;
  line-height:30px;
  text-align:center;
  padding:3px;
  margin-bottom:7px;
  /*border-radius*/
  -webkit-border-radius:3px;
  -moz-border-radius:3px;
  border-radius:3px;
}
.logo{
  position:absolute;
  right:15px;
  top:13px;
}
.box{
  padding:10px;
  width:480px;
  height:240px;
  /*border-radius*/
  -webkit-border-radius:3px;
  -moz-border-radius:3px;
  border-radius:3px;
}
.pad1,.pad2,.pad3,.pad4,
.pad5,.pad6,.pad7,.pad8,
.pad9,.pad10,.pad11,.pad12,
.pad13,.pad14,.pad15,.pad16{
  float:left;
  width:110px;
  height:50px;
  margin:5px;
  text-align:center;
  font-size:19px;
  line-height:50px;
  cursor:pointer;
  /*border-radius*/
  -webkit-border-radius:3px;
  -moz-border-radius:3px;
  border-radius:3px;
}
/*	Colors and shadows
======================*/
#musicbox{
  background:#333;
  /*box-shadow*/
  -webkit-box-shadow:
    0 5px 2px #222,				
    0 10px 2px #222,				
    0 10px 13px #000;
  -moz-box-shadow:
    0 5px 2px #222,				
    0 10px 2px #222,				
    0 10px 13px #000;
  box-shadow:
    0 5px 2px #222,				
    0 10px 2px #222,				
    0 10px 13px #000;
}
.led{
  background:#E0C7AC;
  /*box-shadow*/
  -webkit-box-shadow:inset 0 2px 3px #000;
  -moz-box-shadow:inset 0 2px 3px #000;
  box-shadow:inset 0 2px 3px #000;
  border:5px solid #000;
}
.logo{
  color:#F38711;
}
.box{
  background:#272727;
  /*box-shadow*/
  -webkit-box-shadow:inset 0 2px 3px #000;
  -moz-box-shadow:inset 0 2px 3px #000;
  box-shadow:inset 0 2px 3px #000;
}
.pad1,.pad2,.pad3,.pad4,
.pad5,.pad6,.pad7,.pad8,
.pad9,.pad10,.pad11,.pad12,
.pad13,.pad14,.pad15,.pad16{
  background:#EEE;
  color:#BDBDBD;
  text-shadow:0 1px 1px #7A7A7A;
  /*box-shadow*/
  -webkit-box-shadow:
    0 2px 2px #EEE,					
    0 4px 2px #DDD,					
    0 5px 4px #000;
  -moz-box-shadow:
    0 2px 2px #EEE,					
    0 4px 2px #DDD,					
    0 5px 4px #000;
  box-shadow:
    0 2px 2px #EEE,					
    0 4px 2px #DDD,					
    0 5px 4px #000;
}
.pad1:hover,.pad2:hover,
.pad3:hover,.pad4:hover,
.pad5:hover,.pad6:hover,
.pad7:hover,.pad8:hover,
.pad9:hover,.pad10:hover,
.pad11:hover,.pad12:hover,
.pad13:hover,.pad14:hover,
.pad15:hover,.pad16:hover{
  color:white;
  background:#d2ff52;
  /*box-shadow*/
  -webkit-box-shadow:
    0 2px 2px #BEE748, 			
    0 4px 2px #83A522, 			
    0 5px 4px #37460C;
  -moz-box-shadow:
    0 2px 2px #BEE748, 			
    0 4px 2px #83A522, 			
    0 5px 4px #37460C;
  box-shadow:
    0 2px 2px #BEE748, 			
    0 4px 2px #83A522, 			
    0 5px 4px #37460C;
}
.active{
  color:white;
  background:#d2ff52;
  /*box-shadow*/
  -webkit-box-shadow:
    0 2px 2px #BEE748, 			
    0 4px 2px #83A522, 			
    0 5px 4px #37460C;
  -moz-box-shadow:
    0 2px 2px #BEE748, 			
    0 4px 2px #83A522, 			
    0 5px 4px #37460C;
  box-shadow:
    0 2px 2px #BEE748, 			
    0 4px 2px #83A522, 			
    0 5px 4px #37460C;
}
/*	Loader
====================*/
.loader{
  /*animation*/
  -webkit-animation:load 10s infinite ease;
  -moz-animation:load 10s infinite ease;
  -ms-animation:load 10s infinite ease;
  -o-animation:load 10s infinite ease;
  animation:load 10s infinite ease;
}
@keyframes load{
  from{ 
    background:#333;
    width:200px;}
  to{
    background:brown;
    width:100%;}
}
@-webkit-keyframes load{
  from{ 
    background:#333;
    width:200px;}
  to{
    background:brown;
    width:100%;}
}
@-moz-keyframes load{
  from{ 
    background:#333;
    width:200px;}
  to{
    background:brown;
    width:100%;}
}
@-o-keyframes load{
  from{ 
    background:#333;
    width:200px;}
  to{
    background:brown;
    width:100%;}
}
@-ms-keyframes load{
  from{ 
    background:#333;
    width:200px;}
  to{
    background:brown;
    width:100%;}
}
script.js
content_copyfile_download
 /*  Only browsers mp3 support
=============================*/
(function(e){
		
		// Strings class
    var pad =[
        '.pad1','.pad2','.pad3','.pad4',
        '.pad5','.pad6','.pad7','.pad8',
        '.pad9','.pad10','.pad11','.pad12',
        '.pad13','.pad14','.pad15','.pad16'];
		
	
	
	
		// Strins sounds
    var p =[
        'p1','p2','p3','p4',
        'p5','p6','p7','p8',
        'p9','p10','p11','p12',
        'p13','p14','p15','p16'];
	
	
	
	
		// Click function 
    function clikOn(el,sd,tx){
        return e(el).on('click', function(){
            e('.led').html(tx);
            sound.play(sd);
        });
    }
	
	
	
	
	
		// loop Function clikOn
    for (var i = 0; i <  16; i++) {
        clikOn(pad[i],p[i],'Sound ' + i);
    }
    
	
	
	
	
		// On press key play sound
    e(document).on('keydown', function (event) {         
        // 1
        if (event.keyCode === 49){
            keyOn(pad[0],p[0],'Thanks');}
        // 2
        if (event.keyCode === 50){ 
            keyOn(pad[1],p[1],'For');}
        // 3
        if (event.keyCode === 51){
            keyOn(pad[2],p[2],'Play');}
        // 4
        if (event.keyCode === 52){
            keyOn(pad[3],p[3],'My');}
        // Q
        if (event.keyCode === 81){
            keyOn(pad[4],p[4],'Music');}
        // 1
        if (event.keyCode === 87){
            keyOn(pad[5],p[5],'Box');}
        // E
        if (event.keyCode === 69){
            keyOn(pad[6],p[6],'More');}
        // R
        if (event.keyCode === 82){
            keyOn(pad[7],p[7],'Coming');}
        // A
        if (event.keyCode === 65){
            keyOn(pad[8],p[8],'Soon');}
        // S
        if (event.keyCode === 83){
            keyOn(pad[9],p[9],'And');}
        // D
        if (event.keyCode === 68){
            keyOn(pad[10],p[10],'Sorry');}
        // F
        if (event.keyCode === 70){
            keyOn(pad[11],p[11],'For');}
        // Z
        if (event.keyCode === 90){
            keyOn(pad[12],p[12],'My english');}
        // X
        if (event.keyCode === 88){
            keyOn(pad[13],p[13],'What ?');}
        // C
        if (event.keyCode === 67){
            keyOn(pad[14],p[14],'I don´t now');}
        // V
        if (event.keyCode === 86){
					keyOn(pad[15],p[15],
				'<a href="http://nakome.com">Nakome</a>');}
    });  
    
	
	
	
	
		// Function class sound text
    function keyOn(cls,snd,txt){
      e('.led').html(txt);
        e(cls)
        .addClass('active')
        .siblings()
        .removeClass('active');
        sound.play(snd);
    }

	
	
	
	
	
		// Sound init 1
		var sound = new Howl({
			urls: ['https://dl.dropboxusercontent.com/u/23834858/sounds/drums.mp3'], 
			sprite: {
				p1:     [0, 1000],
				p2:     [1000, 500],
				p3:     [2000, 500],
				p4:     [3000, 500],
				p5:     [4000, 500],
				p6:     [5000, 500],
				p7:     [6000, 500], 
				p8:     [7000, 500],
				p9:     [8000, 500],
				p10:    [9000, 500], 
				p11:    [10000, 500],
				p12:    [11000, 500],
				p13:    [12000, 500],
				p14:    [13000, 500],
				p15:    [14000, 500],
				p16:    [15000, 500]
			},
			onload: function(){
				e('.loader').fadeOut();
			}
		}); 
})(jQuery);
index.html
content_copyfile_download
<div id="musicbox">
	<div class="led">Machinedrum</div>
	<div class="logo">Music Box</div>
	<div class="box">
		<div class="pad1">1</div>
		<div class="pad2">2</div>
		<div class="pad3">3</div>
		<div class="pad4">4</div>
		<div class="pad5">Q</div>
		<div class="pad6">W</div>
		<div class="pad7">E</div>
		<div class="pad8">R</div>
		<div class="pad9">A</div>
		<div class="pad10">S</div>
		<div class="pad11">D</div>
		<div class="pad12">F</div>
		<div class="pad13">Z</div>
		<div class="pad14">X</div>
		<div class="pad15">C</div>
		<div class="pad16">V</div>
	</div>
</div>
<div class="loader">Please Wait one moment.....</div>


 
<script type="text/javascript" src="https://dl.dropboxusercontent.com/u/23834858/plugins/howler.min.js"></script>
Music-box.markdown
content_copyfile_download
  • Rendered
  • Source

Music box

Music box width mp3 audio, Use keys or mouse.

A Pen by Moncho Varela on CodePen.

License.