A Web App for Transcribing Songs
Alternatives To Transcribe
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
Demucs6,7102a day ago15December 07, 2022226mitPython
Code for the paper Hybrid Spectrogram and Waveform Source Separation
6 years agoJavaScript
Invoke is a full stack web application inspired by SoundCloud. It utilizes Ruby on Rails on the backend, a PostgreSQL database, and React.js with a Redux architectural framework on the frontend.
10 years ago1CSS
A heatmap for songs
3 years ago22C++
A sound synthetizer, tracker and replayer, similar to AHX.
2 years ago4JavaScript
SoundCloud-2 is a clone of SoundCloud built using Rails, PostgreSQL, React, Redux, HTML5, CSS3, CSS, AWS, Wavesurfer.js and Webpack.
Sound Macleod7
5 years agoJavaScript
A full-stack web app for music sharing inspired by SoundCloud
7 years agoJavaScript
2 years ago39mitTypeScript
A Web App for Transcribing Songs
a month ago11gpl-3.0TypeScript
Web lyric editor
9 years agoRuby
A Rails / Backbone.js clone of the popular music sharing site Soundcloud
Alternatives To Transcribe
Select To Compare

Alternative Project Comparisons



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

application start page

Table of contents

Quick start

Run the Transcribe Demo App in your Browser.


Coverage Status Quality Gate Status


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

└── .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).

app state overview

A redux middleware is controlling the audio player and waveform as side-effects of state transitions.

Component documentation

See Storybook for Component Documentation.


See Build description in project wiki.


app deployment


Version Info
0.1 First running version (see

Copyright and license

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

Icons made by Freepik from
Popular Songs Projects
Popular Waveform Projects
Popular Media Categories

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.