Vue.js Hardware Looper

CodeDay Labs 2020
Mentor: Tyler Greenfield, Sr. Software Engineer at Insider, Inc.

Team members: Golbon (Rose) Marandiz, Chad Drennan, Caroline Hoang

A Vue.js (any framework is possible but I have the most familiarity with Vue) project that would mimic the functionality of a hardware looper or audio sampler. The app would have the ability to interface with MIDI devices (using web MIDI api) and could be controlled by any MIDI signals.

Main scope:
- main functions of an audio sampler and/or looper adapted into the browser
- ability to load WAV files into the sampler
- controllable by MIDI signals (or keyboard/mouse input)
- export capabilities (export to WAV files or other formats)

Advanced features if time/scope allows:
- ability to input audio through microphone (record)
- peer to peer connections using webRTC to allow multiple people to interface with the same
- save functionality (save settings into local storage or database)

The goal of the project is not only to create a working software replica of a hardware audio device, but to use good practices in organizing the codebase and become familiar with some very powerful browser APIs such as web Audio, web MIDI and web RTC. For any engineer with an inclination toward music this will be a fun project!

How much experience do you have? Does the project use anything you didn't create?

CodeDay Labs advanced-track team


Showcase Permalink



Caroline Hoang