Caja de ritmos digital o "drum machine", una interfaz interactiva que permite a los usuarios crear ritmos y patrones musicales a través de clips de audio de percusión.
Esta caja de ritmos tiene nueve pads de batería distintos, cada uno asociado a una tecla específica en el teclado del usuario (Q, W, E, A, S, D, Z, X, C). Cada pad de batería puede ser activado tanto clicando en él como presionando su tecla asociada en el teclado.
Cada pad de batería está asociado a un clip de audio único. Al activar un pad, se reproduce su clip de audio correspondiente, permitiendo a los usuarios experimentar con diferentes combinaciones y secuencias de sonidos.
Para facilitar la identificación de los sonidos, la aplicación incluye una función de display. Cuando se activa un pad de batería, el nombre del sonido correspondiente se muestra en este display. Esto permite a los usuarios conocer exactamente qué sonido se está reproduciendo en cada momento, ayudándoles a comprender y memorizar las asociaciones entre los pads y sus sonidos.
Historias de usuario:
- Ver un contenedor externo identificado por el atributo "id" como "drum-machine" que contiene todos los demás elementos.
- Dentro del elemento #drum-machine, ver un elemento identificado por el atributo "id" como "display".
- Dentro del elemento #drum-machine, ver 9 elementos de almohadilla de batería en los que se pueda hacer clic, cada uno con un nombre de clase de "drum-pad", una identificación única que describe el clip de audio que se configurará para activar el pad de batería, y un texto interno correspondiente a una de las siguientes teclas del teclado: Q, W, E, A, S, D, Z, X, C. Los pads de batería deben estar en este orden.
- Dentro de cada elemento con clase ".drum-pad", debería haber un elemento "audio" de HTML5 que tenga un atributo "src" que apunte a un clip de audio, un nombre de clase de "clip", y una identificación correspondiente al texto interno de su elemento padre ".drum-pad" (por ejemplo, id="Q", id="W", id="E", etc.).
- Al hacer clic en un elemento ".drum-pad", el clip de audio contenido en su hijo "audio" debe activarse.
- Al presionar la tecla de activación asociada con cada elemento ".drum-pad", el clip de audio contenido en su hijo "audio" debe ser disparado (por ejemplo, presionar la tecla Q debe activar el pad de batería que contiene la letra Q, presionar la tecla W debe activar el pad de batería que contiene la letra W, etc.).
- Cuando se activa un elemento ".drum-pad", se debe mostrar una cadena que describe el clip de audio asociado como texto interno del elemento #display (cada cadena debe ser única).