🎵 📦 Music Box Editor 📦 🎵
Anthony_Tonev (99)

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
ebest (672)

First song: THE FIRST SONG
Optimal delay: 300

When I made this, I noticed one thing when you load it up. If the song takes more then one block, you first have to add enough blocks for the song to fit in. This one takes 11 blocks! My suggestion is so that you can put the music code in the url.

London bridges falling up


Optimal delay is 200. 7 blocks required.

A classic: Ode to joy (Symphony No. 9) just slightly simplified to fit.


Optimal delay: 300. Blocks: 14

Any more songs to use?


Anthony_Tonev (99)

@ebest wow, thanks alot I will add your song in the collection.

And yes that thing about loading them is not working well - it just loads notes. I have an object where I store notes, delay info and block count for community contributions. I will fix that to work the same way.

I will have to implement the url load for sure so I can make it like a community sharing thing but do you have any suggestions about a database maybe. I was thinking about firebase database where you just add a name and you get unique key plus that name and a version number if it's the same name - soma data about the song author etc. Or I can just make a node server and store them locally.

Anthony_Tonev (99)

@ebest Just added your songs - amazing job! Thank you for providing me with a decent content for the editor. This helps a lot.

ebest (672)

@Anthony_Tonev The first song is twinkle twinkle little star.

Also, change THE FIRST SONG's author to Jane Taylor
London Bridges falling down's author to Alice Bertha Gomme
and Ode to Joy to Ludwig van Beethoven.

Anthony_Tonev (99)

@ebest Yes I recognised them right away. I still think there should be the name of the person that added it as a box music. So I will name them like so : A. B. Gomme's "London Bridges falling down" by ebest.

BTW I have also added a button to generate n number of blocks (++ button next to load button).

ebest (672)

Improved Ode to Joy:

ebest (672)

@Anthony_Tonev So many songs can't be done because of sharps (#). And can you add higher and lower notes so there's a longer line of notes available?

Anthony_Tonev (99)

@ebest yes I will consider adding more notes - how many do you think are enough? Now they are 9.

ode of joy is updated - or you wan't it as a separate peace called improved ode of joy?

Anthony_Tonev (99)

@ebest I've added more notes - you can switch between 9 notes and 16 notes mode by pressing "more cowbells!/less cowbells" button. Old songs will still sound the same but now songs will also have a type - 'mini' for simple 9 notes one and 'grand' for 16 notes one. These are all the notes I could find - not sure if they work for all songs but at least they can cover more than before.

ebest (672)

@Anthony_Tonev You may or may not have a BIG problem. Comparing this to a piano, I now notice that you are missing d and e. Change Ode to Joy's name to Ode to Joy in e♭.

ebest (672)

@ebest Also, it's 15 notes. Not 16

Anthony_Tonev (99)

I have used a pack of sounds from freesounds.org that are named like so :

  • I saw that some are missing, so I will try to find a pack with all notes - but this is very strange since this pack should have all notes from the box recorded. I guess it was not a note rich box.
ebest (672)

@Anthony_Tonev can you make some way to make held notes?

Anthony_Tonev (99)

@ebest it turns out I can - this is the code snippet
previewNote.currentTime = 0;
previewNote.volume = (volumeVal / 100);

//held notes part
previewNote.mozPreservesPitch = false; //something that does something
previewNote.playbackRate = 0.5; //the lower this is the longer the note will be heard


ebest (672)

@Anthony_Tonev Then add some way to like hold the pedal or make longer notes

Anthony_Tonev (99)

@ebest I will try adding this - if you hold a button 1,2,3,4,5,6,7,8 or 9 and then click on the note, you will add a different color note indicating the level of delay it will get when it is played. Will have to not effect other notes - only this one.

ebest (672)

@Anthony_Tonev lol almost done with the main theme of star wars

ebest (672)

@Anthony_Tonev Finished! It uses all 16 notes.

Anthony_Tonev (99)

@ebest wow - john williams, his jurrasic park score and starwars are the most recognisable - everyone can guess them.
btw I have just added the hold note - only 1 type for now - delay 0.4 and it activates when holding 1 right before clicking on a note. Just need to fix it in the load function.

ebest (672)

@Anthony_Tonev Thanks! I noticed if your setting is "less cowbells" and you load up star wars, it won't automatically switch into "More cowbells"

Anthony_Tonev (99)

@ebest what is the optimal delay for it - just loaded it in. It's amazing!

Anthony_Tonev (99)

@ebest load function is very primitive - not keeping it up with the new features. Load notes is just loading notes - it does not care for anything else. I will try to add it. On the button for community contribution it is updating the size. However it is recommended you switch to 16 first because you will need to tune the box anyway...

ebest (672)

@Anthony_Tonev do you have a email address

Anthony_Tonev (99)

@ebest If you switch to 16 first - you should have no problem loading them.

Anthony_Tonev (99)

@ebest Granted. I haven't thought about it..

ebest (672)

@Anthony_Tonev Do you have any other music suggestions?

ebest (672)

@Anthony_Tonev Could you add a way to like stretch a note so it gets held for longer?

Anthony_Tonev (99)

@ebest hold key '1' and press the note right away it will make a note 40% longer--it will be played but it does not work with load and move arrows yet, however it keeps it in save by adding a dot after the note coordinates. I plan to add more delay type although they seem very similar but first I will have to make some audio correction on the files because they have some amount of silence which affects the stretch or if I will edit them anyway I think I can make better long notes by adding sound effects on the audio file in audacity... I think this will be a better solution than roughly stretching it.