A Web App for Transcribing Songs
Load mp3, transcribe song, get the score.
Run the Transcribe Demo App in your Browser.
Firstly, create a new transcription project and select an audio file of the song you want to transcribe.
Then you can set basic song properties (like the BPM and time signature).
Next step is then splitting the song in song sections.
The app is a standalone React app using Webaudio APIs locally without any backend system.
transcribe/
└── .github/ (Github Action config)
└── .storybook/ (Storybook config)
└── .vscode/ (Visual Studio Code config)
└── doc/
├── diagrams/ (PlantUml diagrams and generation scripts)
└── public/ (Static app content)
└── src/
├── api/ (External interfaces)
├── components/ (React components)
├── model/ (Application business model)
├── pages/ (Application pages)
├── states/ (Application state definition and middleware based on Redux)
├── styles/ (CSS and theme definitions)
├── tests/ (Testing utilities)
├── util/ (Application utilities)
├── views/ (Application views)
├── index.tsx (Main Application Entry Point)
└── package.json (Build and script config)
└── tsconfig.json (Typescript compiler config)
The state management is based on Redux. It integrates Tone.js (for audio playback and sequencer) and Peaks.js (for waveform rendering and audio navigation).
A redux middleware is controlling the audio player and waveform as side-effects of state transitions.
See Storybook for Component Documentation.
See Build description in project wiki.
| Version | Info |
|---|---|
| 0.1 | First running version (see https://github.com/tscz/transcribe/projects/1) |
This project is licensed under the MIT License - see the LICENSE file for details