Etiqueta: javascript audio

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
* { 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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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

1
2
3
4
5
6
7
8
9
10
11
12
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);
    }