Share
Robert Moog creó uno de los primeros sintetizadores modulares comerciales. Sus inventos consistían en bancos de cables y perillas, lo que permitía a los músicos crear sonidos nunca antes escuchados. Estos instrumentos tampoco eran baratos, y costaban miles de dólares incluso para el modelo más básico..
Ahora, gracias a la API de audio web, podemos crear nuestro propio sintetizador de sonido similar que podemos configurar de forma sencilla para el total de $ 0. No solo eso, podemos distribuir nuestro sintetizador instantáneamente a cualquier persona del mundo gracias a la web.
Si no ha leído los tutoriales anteriores de esta serie de Web Audio, sugeriría retroceder y leerlos antes de comenzar con este, ya que cubren los conceptos básicos del uso de la API de Web Audio y crear un sonido desde cero..
Empecemos creando una página HTML básica..
Añade sonido a tu aplicación web Sintetizador!
Y un poco de estilo básico en nuestro. estilos / main.css expediente.
body font-family: sans-serif; .container margen: auto; ancho: 800px;
Quizás lo más importante que necesita tu sintetizador es un teclado. Afortunadamente, he creado un pequeño fragmento de JavaScript que agregará un teclado virtual a tu página. Descargue una copia de Qwerty Hancock y consúltela en la parte inferior de su página..
A continuación, agregue un div vacío a su página con un id de "teclado".
Este es el lugar en la página donde se insertará el teclado.
También desearemos configurar un archivo JavaScript dedicado para nuestro sintetizador, así que creamos eso y consultémoslo después de incluir Qwerty Hancock.
En synth.js inicializaremos nuestro teclado haciendo lo siguiente.
var keyboard = new QwertyHancock (id: 'keyboard', ancho: 600, altura: 150, octavas: 2);
Esto le indica a nuestra página que inserte una instancia de nuestro teclado en el elemento con el ID de "teclado", cambie su tamaño a 600 x 150 px y haga que el número de teclas del teclado cubra dos octavas. Guarde y actualice su navegador para ver un hermoso teclado en pantalla. Use las teclas, las teclas táctiles o el mouse para ver cómo se iluminan las notas cuando las presiona.
Qwerty Hancock nos proporciona dos oyentes de eventos, tecla Arriba y tecla abajo. Estos nos permiten conectarnos al teclado y escribir el código que se activa cuando se presiona el teclado. También nos dice qué nota se presionó y su frecuencia correspondiente en hercios.
Accentsconagua
keyboard.keyDown = función (nota, frecuencia) console.log ('Nota', nota, 'ha sido presionada'); console.log ('Su frecuencia es', frecuencia); ; keyboard.keyUp = función (nota, frecuencia) console.log ('Nota', nota, 'ha sido liberado'); console.log ('Su frecuencia fue', frecuencia); ;Comencemos un oscilador cuando se presiona una tecla. Lo detendremos después de un segundo para que no dure para siempre..
var context = nuevo AudioContext (); keyboard.keyDown = function (nota, frecuencia) var osc = context.createOscillator (); osc.connect (context.destination); osc.start (context.currentTime); osc.stop (context.currentTime + 1); ;
¿Por qué estamos creando el oscilador dentro de la tecla abajo ¿función? ¿No es eso ineficiente? Los osciladores están diseñados para ser livianos y para ser desechados después de su uso. Solo puedes usarlos una vez. Piense en ellos como una especie de fuego artificial de audio extraño.
Ahora cuando presionamos una tecla, escuchamos un sonido. Es un poco ruidoso, así que vamos a crear una nodo de ganancia para actuar como control de volumen maestro.
var context = new AudioContext (), masterVolume = context.createGain (); masterVolume.gain.value = 0.3; masterVolume.connect (context.destination); keyboard.keyDown = function (nota, frecuencia) var osc = context.createOscillator (); osc.connect (masterVolume); masterVolume.connect (context.destination); osc.start (context.currentTime); osc.stop (context.currentTime + 1); ;
Un teclado que toca una sola nota una y otra vez no es muy divertido, así que conectemos la frecuencia al oscilador antes de comenzar a tocar.
osc.frequency.value = frecuencia;
Encantador. Ahora debemos detener la ejecución del oscilador después de que levantemos una tecla en lugar de hacerlo después de un segundo. Porque estamos creando el oscilador dentro del tecla abajo Para esta función, debemos mantener un registro de qué oscilador está tocando qué frecuencia para detenerlo cuando se suelta la tecla. Una forma sencilla de hacer esto es crear un objeto vacío y agregar las frecuencias como teclas, junto con el oscilador que reproduce esa frecuencia como su valor..
osciladores var = ; keyboard.keyDown = función (nota, frecuencia) // Código anterior aquí osciladores [frecuencia] = osc; osc.start (context.currentTime); ;
Esto significa que podemos usar fácilmente la frecuencia que obtenemos de nuestros nota arriba función para detener ese oscilador específico.
keyboard.keyUp = función (nota, frecuencia) osciladores [frecuencia] .stop (context.currentTime); ;
¡Ahora tenemos un sintetizador completamente funcional (muy básico) en el navegador! Ok, no suena muy bien en este momento, pero veamos si podemos cambiar eso.
Lo primero que hay que hacer es cambiar el tipo de onda que genera el oscilador. Hay cuatro tipos básicos para elegir: seno, cuadrado, triángulo y diente de sierra. Cada forma diferente de onda suena diferente. Juega con ellos y elige tu favorito. Para este ejemplo, elegiré "diente de sierra".
osc.type = 'diente de sierra';
Ahí suena mejor.
Es muy raro encontrar un sintetizador que use un solo oscilador. La mayoría de los sintetizadores refuerzan su sonido combinando diferentes osciladores de diferentes tipos. Veamos cómo suena si añadimos otro. Recuerde, debemos duplicar todas nuestras conexiones, y tendremos que agregar osciladores de la misma frecuencia a una matriz. Esto significa que podemos iterar sobre ellos para detener todos los osciladores que están tocando la misma nota..
keyboard.keyDown = función (nota, frecuencia) var osc = context.createOscillator (), osc2 = context.createOscillator (); osc.frequency.value = frecuencia; osc.type = 'diente de sierra'; osc2.frequency.value = frecuencia; osc2.type = 'triángulo'; osc.connect (masterVolume); osc2.connect (masterVolume); masterVolume.connect (context.destination); osciladores [frecuencia] = [osc, osc2]; osc.start (context.currentTime); osc2.start (context.currentTime); ; keyboard.keyUp = función (nota, frecuencia) osciladores [frecuencia] .forEach (función (oscilador) oscillator.stop (context.currentTime);); ;
Para terminar, usemos un truco que aprendimos en el tutorial anterior. Podemos agregar un poco de coro para agregar más brillo a nuestro sonido, desafinando ligeramente los osciladores.
osc.detune.value = -10; osc2.detune.value = 10;
¡Hermoso, un sintetizador del que Kraftwerk estaría orgulloso! Juega junto con el artículo terminado, o bifurca el repositorio en GitHub para ajustar el sintetizador al contenido de tu corazón.
