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);
    }

Entrada 300

No imagine llegar tan pronto a la entrada 300 de mi blog, y me parece que últimamente he estado escribiendo más, y he tomado más serio el asunto de compartir lo poco que se con todos.

Si estás leyendo este texto, te quiero agradecer porque eres un lector recurrente de mi blog el cual sobrevive ya por fin solo por medio de la publicidad de adsense, y queriendo o no, de vez en cuando sale para comprarme una cerveza, pero el pago más grande para mi es que esta información le sea de utilidad a muchas personas, ya que al final, todos nos vamos a la tumba, y lo que dejamos es lo que nos hace seguir existiendo.

Parece fácil tomarte un tiempo para escribir, lo es al inicio, pero continuar es lo difícil del asunto, y pues aquí estamos.

Nos vemos en la entrada 400 la cual no dudo llegue más pronto de lo que llego esta.

Libros de Arduino gratis, pdf, robotica, lego

En el siguiente enlace pueden descargar una gran cantidad de libros para programar en Arduino, libros para principiantes y avanzados, programar robotica, con lego, etc.

Descargar libros.

No depender de internet para obtener cadena original cfdi 3.3 facturación electrónica C# .Net #7

En este video, te enseñare como no depender de las rutas que nos da el SAT para generar la cadena original, e incluyo todos los archivos necesarios xslt abajo para que los puedas descargar.

Archivos xslt: descargar