A browser-based music box that renders Public Domain MIDI files with a Web Audio synthesizer. The sound is generated in real time from oscillators, metallic partials, transient noise, wooden-box resonance, and stereo positioning. No recorded sound samples are used.
Japanese documentation: README.ja.md
- Real-time music box synthesis with the Web Audio API
- Public Domain MIDI playlist sourced from the Mutopia Project
- Automatic playback of the next song and playlist looping
- Canvas-rendered music box mechanism and keyboard
- Multi-touch, mouse, and pen keyboard input
- Song selection and tempo controls
- Responsive layout for desktop and mobile browsers
- Song metadata and license information stored in
songs.json - Reusable sound engine exported as an ES module
- Erik Satie: Gymnopédie No. 1
- Erik Satie: Gymnopédie No. 2
- Johann Sebastian Bach: Menuet in G, BWV Anh. 114
- Wolfgang Amadeus Mozart: Menuet K.2
- Pyotr Ilyich Tchaikovsky: Old French Song, Op. 39 No. 16
- Pyotr Ilyich Tchaikovsky: Morning Prayer, Op. 39 No. 1
- Pyotr Ilyich Tchaikovsky: March of the Wooden Soldiers, Op. 39 No. 5
- Friedrich Burgmüller: La Candeur, Op. 100 No. 1
- Friedrich Burgmüller: Tendre Fleur, Op. 100 No. 10
- Wolfgang Amadeus Mozart: Piano Sonata K.331, Variation III
- Franz Liszt: Consolation No. 3, S.172
- Claude Debussy: Arabesque No. 1, L.66
- Johann Sebastian Bach: Prelude in F Major, BWV 856
- Johann Sebastian Bach: Invention No. 10, BWV 781
- Franz Xaver Gruber: Silent Night
See songs.json for each MIDI file's source and license metadata.
This project uses ES modules and fetch(), so serve it over HTTP instead of opening index.html directly.
python3 -m http.server 8000Then open http://localhost:8000/.
No build process or package installation is required.
This repository is designed to be published as a static site under the code4fukui GitHub organization:
- Create or push this project to
code4fukui/musicbox. - Open the repository's Settings > Pages.
- Select Deploy from a branch.
- Select the
mainbranch and/ (root)directory. - Open https://code4fukui.github.io/musicbox/ after deployment completes.
All application paths are relative, so the site works under the /musicbox/ project path without additional configuration.
app.js: UI, Canvas rendering, playlist control, and MIDI parsingmusic-box-synth.js: Web Audio music box synthesizer ES modulesongs.json: Song catalog, sources, and licensesassets/: MIDI filesstyle.css: Layout and visual design
The included MIDI files come from the Mutopia Project. Each included score is identified as Public Domain by its Mutopia source. Source and license URLs are recorded separately for every song in songs.json.
The Public Domain status of the music data does not automatically define a license for this repository's source code. Add a separate software license file when publishing the code if redistribution terms are required.