Groove Box

Groove Box

Groove Box est une application web permettant de créer et de jouer de la musique en temps réel. Le projet utilise Nuxt 3, Pinia pour l'architecture modulaire, UnoCSS pour le design léger, et la Web Audio API pour la génération et la manipulation sonore. L'utilisateur peut ajouter plusieurs pistes (batterie, synthétiseur...), configurer indépendamment chaque pas (notes, activation, volume), contrôler le tempo, le swing, et sauvegarder ses créations. L'ensemble a été conçu pour garantir des performances fluides et une ergonomie agréable.

Liens du projet

Points clés du projet

Architecture Modulaire basée sur Pinia

Architecture Modulaire basée sur Pinia

Chaque partie de l'application (AudioEngine, Séquenceur, Pistes) est gérée par un store Pinia dédié, assurant une séparation claire des responsabilités. Cette approche facilite l'ajout de nouvelles fonctionnalités comme des effets, des instruments ou des patterns complexes.

Web Audio API et Génération Sonore

Web Audio API et Génération Sonore

L'application exploite directement la Web Audio API pour générer des oscillateurs, des filtres et jouer des samples audio en temps réel. Les instruments "lead" utilisent des oscillateurs avec contrôle de la hauteur de note par pas, tandis que les instruments de batterie sont joués via des fichiers audio préchargés.

Contrôle du Tempo, du Swing et de la Persistance

Contrôle du Tempo, du Swing et de la Persistance

Groove Box permet d'ajuster le tempo et d'appliquer du swing pour donner du groove aux séquences. Les patterns sont sauvegardés automatiquement via Pinia PersistedState, permettant à l'utilisateur de retrouver ses compositions même après avoir fermé l'application.

Défis rencontrés

  • Adapter la Web Audio API pour un séquençage temps réel précis tout en maintenant une UX fluide, notamment pour gérer correctement le swing et la synchronisation multi-pistes.

  • Concevoir une architecture Pinia modulaire propre pour permettre l'évolution future du projet vers plus d'effets, d'instruments et de fonctionnalités avancées tout en restant maintenable.

Technologies utilisées