Transcribe

Transcribe

A Web App for Transcribing Songs
Load mp3, transcribe song, get the score.

Table of contents

• Quick start
• Status
• Usage
• Developer Documentation
• Build
• Deployment
• Versioning
• Copyright and license

Quick start

Run the Transcribe Demo App in your Browser.

Status

Usage

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.

Developer Documentation

The app is a standalone React app using Webaudio APIs locally without any backend system.

Project Structure

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)

Application State

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.

Component documentation

See Storybook for Component Documentation.

Build

See Build description in project wiki.

Deployment

Versioning

Copyright and license

This project is licensed under the MIT License - see the LICENSE file for details