Hum to your heart's content.
All project documents are contained in the docs folder: time logs, milestones, and updates. Code specific documentation is contained in the README.md files in each package (folder that contains a package.json).
-
Open dothum website in another tab
-
To begin either:
- "Choose File" to upload an existing audio file (red)
- "record" to record some audio (blue)
-
Name the audio file (red), select it the audio is a "tune" or a "beat" (blue), and push "save" (orange)
-
Tune:
- To listen back to your audio file, click "process" then the play button
- To create the midi piano version of your audio file, click "original", select "piano", then click "process"
- The output should be a list of notes detected in your audio file, and a piano audio
- To listen back to your audio file, click "process" then the play button
-
Beat:
- Once you "record" and "save" a tapping beat, you can push "load beat" and your audio tapping turns into an editable percussion tool.
- You can also add an editable drum by clicking "add drum"
- You can add as many drums and beats as you want
- To play the beat you created click "play"
We divided up our project into multiple node packages using the very popular monorepo system. The configuration can be seen in pnpm-workspace.yaml. This was very useful for a group project so we could each implement our own features without interfering with each other too much. All packages are in the packages folder. The packages are imported by the app in the app folder for the final product. We used pnpm as our package manager instead of npm because it manages node_modules more efficiently and has a lot more features for working with monorepos. We used vite as our primary build tool for building both packages and the app. Vite is great because it is incredibly beginner friendly and extremely efficient, while still having a robust set of features. We used prettier the code formatter and eslint and stylelint the linters for better code quality. We used TypeScript cause it's awesome. It provides tons of quality of life advantages to the developer and makes working with bigger code bases not a headache as your project grows. Finally we used react for the frontend to build a reactive and responsive user interface for a better "app like" experience.
check version:
node -v
I recommend using a package manager to install node:
- chocolatey for window
- homebrew for mac
globally install corepack:
npm -g i corepack
enable pnpm:
corepack enable pnpm
install rustup:
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
install rust stable:
rustup toolchain add stable
add the wasm target:
rustup target add wasm32-unknown-unknown
install wasm-pack:
curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh
build the wasm package:
pnpm build:wasm
install project dependencies:
pnpm i
build packages:
pnpm build:packages
link packages:
pnpm i
all of the following commands are run in the app directory: cd app
start the app in development mode:
pnpm dev
build the app:
pnpm build