OctoLooper is a music composition tool designed to be fun and accessible for young children. It was inspired by research on Creativity Support Tools (CST) and their ability to lower thresholds for creative projects. It began as a semester-long project for my Educational Technology course at Georgia Tech as part of the OMSCS program, but I hope to continue to iterate and improve on this initial version.
OctoLooper can be accessed through a ✨Live Demo✨ hosted on GitHub Pages
OctoLooper can also be run locally using the following commands:
npm install
npm run dev
OctoLooper separates the creative process for creating a short musical loop into a number of simplified steps:
- Name: Users can select a randomly generated simple name or manually input a name for the song they're creating
- Drums: The tempo can be adjusted and the backing rhythm can be selected from a number of preset patterns
- Chords: Chords in the loop's chord progression can be toggled from a set of basic triad chords. Options for rhythmic patterns and arpeggios are also available.
- Sing: The melodic step of the process is currently simply an encouragement for the user to try singing along with the musical loop. A space is available to type lyrics
- Share: Optionally, the song created can be shared through a URL, which when accessed by another user will load the same musical parameters.
- This version of OctoLooper is built as a React application with Typescript, supported with Vite build tooling.
- Tone.js is used for Web Audio sound generation and the timing and synchronization of web audio events. The app is built using a combination of sampled and synthesized sounds.
- Pixi.js (specifically Pixi-React) is used to build some of the more complicated animations and interactive elements on a Canvas element.
- Sample sounds were sourced from the freely available Ultimate Boom Bap Drum Kit and Sample Pi sample packs.
- Background Image by freepik
