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