Programar una caja de ritmos en entorno web

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.

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)

#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.

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

#4 yo tampoco entiendo bien para que necesita backend (al menos de inicio)

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.

Pues habrá que darle al javascript! Gracias compañeros!!

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...

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

Probada en Android con Chrome. Nada está en su sitio, suena el sintetizador, no suena la caja.

#10 tienes razón. Es un proyecto de estudiantes. Corre mejor sobre escritorio.