Crear sonido con el navegador con javascript, #HTML5, sin mp3, ni wav

Una forma para crear sonido sin utilizar una pista de sonido es utilizando la interface OscillatorNode la cual sirve para reproducir frecuencias en específico, esta interface nos ofrece algunos tipos de sonido y solo basta con crear el objeto y poner los atributos deseados, en el siguiente ejemplo tengo un arreglo el cual tiene las frecuencias de las notas musicales (hay unas redondeadas espero que no me crucifiquen los músicos) y dependiendo el botón presionado se ejecuta el sonido:

Demo:

Código HTML



<div>
    <button onclick="Sonido(0)">DO</button>
    <button onclick="Sonido(1)">DO#</button>
    <button onclick="Sonido(2)">RE</button>
    <button onclick="Sonido(3)">RE#</button>
    <button onclick="Sonido(4)">MI</button>
    <button onclick="Sonido(5)">FA</button>
    <button onclick="Sonido(6)">FA#</button>
    <button onclick="Sonido(7)">SOL</button>
    <button onclick="Sonido(8)">SOL#</button>
    <button onclick="Sonido(9)">LA</button>
    <button onclick="Sonido(10)">LA#</button>
    <button onclick="Sonido(11)">SI</button>
</div>

Código JS


    //contiene la vibración por segundo de la nota
    //posición en el arreglo: do=0,do#=1,re=2........
    var Sonidos= [261,277,293,311,329,349,369,392,415,440,466,493];

    //creamos contexto
    var context = new (window.AudioContext || window.webkitAudioContext)();
   
    function Sonido(nota){
         //creamos oscilador
        var osc = context.createOscillator();

        // admite: sine, square, sawtooth, triangle
        osc.type = 'sawtooth'; 

        osc.frequency.value=Sonidos[nota];

        //asignamos el destino para el sonido
        osc.connect(context.destination); 
        //iniciamos la nota
        osc.start();
        //detenemos la nota medio segundo despues
        osc.stop(context.currentTime + .5);

    }

About

Desarrollador de software, lector compulsivo.

View all posts by