🎵 📦 Music Box Editor 📦 🎵
Anthony_Tonev (96)

A simple editor for creating music box melodies with an animated music box that "plays" them for you.

Very basic:
Just click on the diamonds to generate a note and press play. There are some featured melodies included.

NEW: Create a BoxHub account and share your boxes:

The note sounds are from https://freesound.org/people/UbikPhonik/

Tech used :

Make sure you tune-up the box when first loading to cache the sounds and make sure they are loaded.

-edit notes
-play speeds
-save notes and load notes
-generate random notes
-tuning up the music box
-copy notes from sheet and auto-paste on next sheet
-add new block "+" and delete block "-" or press "++" to generate N blocks from input and "clear" to delete all.
-move notes with arrows
-toggle hold notes
-piece fast preview
-two blocks animating preview modes - show one block at a time or all blocks being visible while playing
-listen to the music only (radio icon) - remove all heavy matrix elements and generate a music output
-mixing notes - combine two or more pieces.
-build-in tunes: Ode of Joy, Twinkle Twinkle Little Star, Star Wars Theme, Jurassic Park Theme, Elf Song.

Bonus features:
--save notes to a database https://musicboxdb-2--anthony-tonev.repl.co/

My idea was to write an app that is simple enough to be beginner-friendly so anyone can learn to write simple music pieces without knowing complex note notations and also have an open-source note sharing system where users build melodies on top off or inspired by other users melodies.

Works best on a desktop with chrome in full-screen repl view.

I've added a guide that explains most of the stuff: https://docs.google.com/document/d/1VuNxjiUfA3SQPqONgDC-7V46lHGHZw3rfcvPiS7jNRI/edit?usp=sharing

Here are some gifs that try to explain the rest of the stuff:

Navigate on the block with the arrows or swap between adjacent blocks or cross between adjacent blocks (there were some bugs with these - most are fixed - there is one know bug where notes in perfect vertical line will merge when doing the cross matrix thing - but making holes on them will allow them to cross)

Mix different projects by chaining their notes together - very useful if you want to create a playlist or if you want to work in parts to reduce memory consumption.

Navigate from top to bottom when loading, previewing and editing by pressing the elevator buttons.

Radio player - Press the radio icon to generate the music and DELETE the blocks with their notes and editing panels ( they can be generated again via the load button). If all you want to do is listening to your creation then you don't need all that 15x15 matrix stuff - this mode is the player part of the editor.

The fast preview feature: Preview notes at 2x speed of the current delay value. After that, it will reset back to normal speed. Sometimes you will want to preview faster to find bad notes. In that case, you don't want to switch delay all the time - just included a button for it.

Change note delay type

Issues :

  • Lack of phone support.
  • Not working in Edge.
  • Adding and removing blocks is scrolling off.
  • Too many features - after hackathon deadline ends I will try to trim it a bit.

Huge thanks to ebest and vedprad1 for the amazing content they have created - I will not be able to compose such awesome music even if I'm using professional tools. Also greatly appreciate their and everyone else's issue reports and feedback. ay

You are viewing a single comment. View All
vedprad1 (873)

I noticed another problem:
I submitted a song into the database, and once I did, it appeared in the database.
However, it is not appearing now.

Anthony_Tonev (96)

@vedprad1 I will investigate - this is a very new one.

Anthony_Tonev (96)

@vedprad1 Ok I have tested now - added one melody and I will see if it gets erased after the server falls asleep. I'm saving them to a file but maybe there is some update msg or something that the editor promps the app. I have closed all instances of repl editor. Thank you for the bug reports.

Anthony_Tonev (96)

@vedprad1 After some testing - I've noticed data missing.. I have found an article stating that files are not being updated properly on the editor itself

https://repl.it/talk/ask/Files-dont-update-in-editor-after-writing/14540 .

I will figure out some firebase db backup I guess.


Added a firebase database - now everything is saved on the cloud where no data can be lost. I have removed the clumsy local database and I can even monitor the incoming uploads from the firebase console.
I'm so pissed that I've lost so much time on a data base integration which is not even a part from my submission because it is a separate repl, but what can you do... At least data can be stored.

Thanks again for point this out - I would have never figure out such problem existed since I've updated the app in the editor and thus "semi-manually" saved the file.

vedprad1 (873)

@Anthony_Tonev : Actually, yes problem. I still don't see all the songs in the database.

e.g. The Jurassic Park Theme is missing. So is the London Bridge Song. And Arthur's Theme.

Anthony_Tonev (96)

@vedprad1 there are 3 rules regarding posts -

1 Providing arranger name,
2 piece has to be ending with 'grand' or 'mini' - this is done automatic when played within the editor (tells player what size is the piece) but I've added it as a feature at sunday. Jurassic Park has to have ',grand' at the end,
3The third rule checks if the music has a proper notes format. I have removed the last rule now.

Just added 5 test pieces - seems to be working.