Programar una caja de ritmos en entorno web

repajaro
#1 por repajaro el 13/11/2019
Hola amigos/as.
Tengo que presentar un proyecto de fin de grado y había pensado en crear una caja de ritmos programada en php y javascript y mostrada en entorno web en html.
La idea sería algo parecido a esto pero en un navegador web: https://www.youtube.com/watch?v=PFdBDt4iWaE.
Tengo 2 preguntas:
1) ¿Alguien ha hecho algo parecido, o sabe donde encontrar info al respecto?
2) Tengo un launchpad y una maschine. ¿se podría llegar a controlar el software desde estas máquinas?
Gracias de antemano.
Subir
djpeta
#2 por djpeta el 13/11/2019
De aquí seguro que puedes sacar muchas ideas:
https://html5drummachine.com/

Cómo por ejemplo esta (un clon de la Roland 808), que es por la que yo conozco esta página: https://html5drummachine.com/virtual-drum-machine/

Yo he trasteado con cosas así, pero hace mucho tiempo y no recuerdo muy bien, pero te cuento así de memoria un poco de lo que me acuerdo:
- Mírate las especificaciones de WebAudio y WebMidi, al fin y al cabo es lo que vas a utilizar para el proyecto, aunque te ayudes de cualquier librería para no tener que lidiar con la API directa del navegador.
- Recuerdo un par de librerías que pintaban bastante bien para estos menesteres: howler https://howlerjs.com/ y Audio5JS: https://github.com/zohararad/audio5js

Y a tu pregunta 2: sí, se puede, necesitas saber las notas midi de cada control que quieras asignar (dichos mapas midi, por norma general, los puedes encontrar en las páginas de los fabricantes, o bien en sus manuales)
Subir
repajaro
#3 por repajaro el 15/11/2019
#2
Muchisimas gracias. Iré mirando toda la info que me has dado. La verdad que me parece un proyecto interesante y estoy muy verde en este campo aún.
Subir
1
Mendigando Tips
#4 por Mendigando Tips el 15/11/2019
repajaro escribió:
caja de ritmos programada en php y javascript
No acabo de ver qué pinta un lenguaje de programación back-end como es PHP en este tipo de proyecto.

Mírate este hilo:

https://www.hispasonic.com/foros/foro-sobre-web-midi-web-audio/488362
Subir
djpeta
#5 por djpeta el 15/11/2019
#4 yo tampoco entiendo bien para que necesita backend (al menos de inicio)
Subir
GCC
#6 por GCC el 15/11/2019
Hola. Usa solo JavaScript con node.js y las librerías npm, nada de PHP, de forma que puedas transformar tu aplicación en una app para móvil o tablet sin necesidad de servidores, ni apache ni nada.

Hay unas extensiones MIDI para los navegadores Chrome ya las soporta, Firefox debería estar cerca y que es lo que usa la web de Soundmondo de Yamaha para cargar sonidos en los sintes reface (lo mismo los scripts son accesibles).

Mediante MIDI puedes usar fuentes de sonido o hardware externo.

Si tienes que comunicar la app hacia afuera puedes usar websockets o algún servicio REST. Tienes un montón de utilidades en npm y es muy posible que MIDI también.

JavaScript es duro de depurar. Si tomas esta vía práctica antes con ejemplos más sencillos.

Hace tiempo hice una aplicación web (si es que se puede llamar así) para controlar algunas órdenes de un Radar y esto es lo que saqué en claro, aunque soy programador de sistemas y no de tan alto nivel.

Un saludo.
Subir
repajaro
#7 por repajaro el 16/11/2019
Pues habrá que darle al javascript! Gracias compañeros!!
Subir
Mendigando Tips
#8 por Mendigando Tips el 16/11/2019
A javascript y sobre todo a las APIs de web audio y web MIDI, donde encontrarás disponible gran parte de la funcionalidad necesaria para un proyecto como el que planteas. Ya nos contarás... :ook:
Subir
repajaro
#9 por repajaro el 09/07/2020
Aquí os presento cómo quedó mi trabajo de fin de grado de DAW junto con mi compañero de clase. Finalmente lo realizamos con JS haciendo uso de la API de web audio, nexus y tone.js. Es una versión muy sencilla de lo que sería una drum machine junto con un sinte de 2 voces con sus envolventes y control de volumen y tono. Además le hemos añadido 3 master fx. Se pueden grabar tus propias creaciones. Espero que os guste. NOTA* FUNCIONAMIENTO OPTIMO EN FIREFOX ESCRITORIO.
http://vegadrumsynth.jacopocardone.com
Subir
wikter @ TheSickbeat
#10 por wikter @ TheSickbeat el 05/11/2020
Probada en Android con Chrome. Nada está en su sitio, suena el sintetizador, no suena la caja.
Subir
Hilos similares
Responder

Regístrate o para poder postear en este hilo