Crear un piano con sonido en Javascript en menos de 10 minutos 馃幑

En este video te mostrare como crear un piano en menos de 10 minutos utilizando javascript, sin la necesidad de tener un mp3 o wav, y solo con un navegador y c贸digo.

Piano (p铆cale a las teclas)

CSS


* { box-sizing:border-box; }

body{ margin:0; background:#222; }
ul {
	height:18.875em; width:34em;
  margin:5em auto; padding:3em 0 0 3em; position:relative; 
  border:1px solid #160801; border-radius:1em; 
  background:-webkit-gradient(linear, right bottom, left top, color-stop(0%,rgba(0,0,0,0.3)), color-stop(100%,rgba(0,0,0,0))), url('https://f.cl.ly/items/2q1f3t0C3R1b0g081w3n/vwood.png');
box-shadow:0 0 50px rgba(0,0,0,0.5) inset, 0 1px rgba(212,152,125,0.2) inset,0 5px 15px rgba(0,0,0,0.5); }
li { margin:0; padding:0; list-style:none; position:relative; float:left; }

ul .white {
	height:16em; width:4em; z-index:1;
	border-left:1px solid #bbb;
	border-bottom:1px solid #bbb;
	border-radius:0 0 5px 5px;
	box-shadow:-1px 0 0 rgba(255,255,255,0.8) inset, 0 0 5px #ccc inset, 0 0 3px rgba(0,0,0,0.2);
	background: linear-gradient(top, #eee 0%,#fff 100%);
}

ul .white:active {
	border-top:1px solid #777;
	border-left:1px solid #999;
	border-bottom:1px solid #999;
	box-shadow:2px 0 3px rgba(0,0,0,0.1) inset, -5px 5px 20px rgba(0,0,0,0.2) inset,0 0 3px rgba(0,0,0,0.2);
	background: linear-gradient(top, #fff 0%,#e9e9e9 100%);
}

.black {
	height:8em; width:2em; margin:0 0 0 -1em; z-index:2;
	border:1px solid #000;
	border-radius:0 0 3px 3px;
	box-shadow:-1px -1px 2px rgba(255,255,255,0.2) inset, 0 -5px 2px 3px rgba(0,0,0,0.6) inset, 0 2px 4px rgba(0,0,0,0.5);
	background:linear-gradient(45deg, #222 0%,#555 100%);
}

.black:active {
	box-shadow:-1px -1px 2px rgba(255,255,255,0.2) inset, 0 -2px 2px 3px rgba(0,0,0,0.6) inset, 0 1px 2px rgba(0,0,0,0.5);
	background:linear-gradient(left, #444 0%,#222 100%);
}

.a,.g,.f,.d,.c { margin:0 0 0 -1em;  }

ul li:first-child { border-radius:5px 0 5px 5px; }
ul li:last-child { border-radius:0 5px 5px 5px; }

HTML

<ul class="set">
        <li onclick=" jsNota(174.614)" class="white b"></li>
        <li onclick=" jsNota(184.997)" class="black as"></li>
        <li onclick=" jsNota(195.998)" class="white a"></li>
        <li onclick=" jsNota(207.652)" class="black gs"></li>
        <li onclick=" jsNota(220.000)" class="white g"></li>
        <li onclick=" jsNota(233.082)" class="black fs"></li>
        <li onclick=" jsNota(246.942)" class="white f"></li>
        <li onclick=" jsNota(261.626)" class="white e"></li>
        <li onclick=" jsNota(277.183)" class="black ds"></li>
        <li onclick=" jsNota(293.665)" class="white d"></li>
        <li onclick=" jsNota(311.127)" class="black cs"></li>
        <li onclick=" jsNota(329.628)" class="white c"></li>
</ul>

Javascript


var context= new AudioContext();

function jsNota(frecuencia){
        var o= context.createOscillator();
        g=context.createGain();
        o.connect(g);
        o.type="sawtooth";
        o.frequency.value=frecuencia;
        g.connect(context.destination);
        o.start(0);
        g.gain.exponentialRampToValueAtTime(0.00001,context.currentTime +1.5);
    }

mm

About

Desarrollador de software, lector compulsivo.

View all posts by