Share your repls and programming experiences

← Back to all posts
🎵 📦 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

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

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:

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

vedprad1 (914)

I now see one more problem (sorry if I am annoying you):
I tried to enter the name of the original composer for a new entry, but the letters "Wang" were replaced with 4 Hearts.

Anthony_Tonev (99)

@vedprad1 No problem - I'm happy for receiving issue reports.
Yes I saw your post in the DB monitor. The issue is that I've added a bad words checkers since I wan't to avoid disqualification if someone wants to add bad words in the DB for people to read hate speech. So I censor them with ❤️.

Yet a lot of names can mean a bad thing in eng. For instance the word "book" in my home language will appear like "k❤️❤️❤️❤️❤️".

For now I will monitor these stuff and will fix them manually. I will add the words for inspection somewhere in the db.

I've fixed the name of the author. Great piece by the way!

vedprad1 (914)

@Anthony_Tonev : Thanks!
That's actually a good idea, to make a bad words checker!

Anthony_Tonev (99)

I use this open lib

A data base can be a great power to have but like all great powers it's also a great responsibility!

vedprad1 (914)

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 (99)

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

Anthony_Tonev (99)

@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 (99)

@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 .

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 (914)

@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 (99)

@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.

vedprad1 (914)

Wow! This is pretty good!
I probably just have one problem regarding this: The software is very hard to use on an phone or tablet, although you probably designed this for computer only.
If you want, you could add the following music into the collection:

Jurrassic Park Theme
Originally by John Williams
Arranged by @vedprad1

Good job!

AAnonymity (1)

@vedprad1 : Great theme!

@Anthony_Tonev : I have seen another issue. When you try to put in the "sheet music" for previous projects into the load area, it only loads one "thing" at a time (I do not know what it is called). You have to add the correct number of boxes for it to entirely load.

Anthony_Tonev (99)

@AAnonymity Yes I don't keep boxes info - I plan to save the project into a database where I will keep the info for the number of boxes same as I do with the record collection.

For now the only way to load previous projects is with '++' button, on the left there is an input area where you can specify how many blocks you need and it will create that many boxes - then load peace.

I have yet to write documentations about these stuff...

Anthony_Tonev (99)

@vedprad1 Wow thank you - Ofc I will add it. What is the optimal delay for it?

And yes, sadly - I develop it for pc first. For phone the best way to use it for now is by clicking desktop site check in browser burger menu.

Anthony_Tonev (99)

@vedprad1 Just added it - great peace. It is set on 332 delay for now.

vedprad1 (914)

@Anthony_Tonev : 332 is perfect. Glad you liked it!

JideOlatunji (8)


Anthony_Tonev (99)

@JideOlatunji Sure thing - just send me the notes data here or post it in the database and I will feature it.

Mendelevium (42)

This is so neat. Wow

Anthony_Tonev (99)

@Mendelevium Thanks, I still enjoy creating simple melodies with it and then spend hours to come up with a name for the piece

Mendelevium (42)

@Anthony_Tonev, like you I am musical as well,
I have not had any time to play with it, but I am looking forward to it.
Where did you learn your HTML/JS skills?

Anthony_Tonev (99)

@Mendelevium I've studied 2d Computer Animation and started learning animating with expressions and scripting for After Effects to further enhance my skills. It was fun so I continued learning more programming by my self. I was hired to do an animation app and I still work on that. Working with js/html and node everyday for one year now.

Mendelevium (42)

Wow, @Anthony_Tonev! That is so cool!
I am a beginner in python, HTML, and Java Script.
Any advice for people trying to learn computer languages?

Anthony_Tonev (99)


Pick one main language and => {

Focus on algorithms and solve programming challenges from bunch of free sites online (try solving problems you've solved with two loops but instead with one loop);

Learn both functional and object oriented concepts (both are very useful in different cases - avoid "this way vs that way" opinions;

Learn math;

//The skills above don't build apps on their own but help you to think and find better solutions.

Very important - learn how to use JSON (it is an amazing data format and can get you far ahead);

But most importantly - have personal projects to help you learn. Include ONE technology or concept that you want to try out (like, or hosting on heroku, using a library, local file system, electron, using machine learning model etc.) Once you FINISH one project - it is finished when it can be used for its purpose and has no known bugs, then start another one but this time include ONE new technology or concept.

//Since 50% of programming is setting up stuff, reading documentations and debugging code that is not written by you - the idea here is that you get used to this.


Do this for an year -> archive all finished projects -> repeat the same process for another year -> collect second year projects in a portfolio

Mendelevium (42)

@Anthony_Tonev, Thanks!
my main language is python so this helps a lot.

firefish (949)

Hello. I went to BoxHub, I created a tune, then realised I had inserted the wrong note sequence. Then I went and updated the box, then the page didn't render correctly, as in the the container boxes were all over the place. The tune is one I made up, in the generator. The name of the tune is "A step in". I also found that the note sequence had been updated, just something got messed up. Here is a screenshot:

Anthony_Tonev (99)

@johnstev111 Thanks for the report- I will see what got wrong. This thing is from yesterday - so it might have some bugs but data will never be lost.

I've noticed that you missed to include a keyword -ID I use that so you can give your box projects names and then update and access them via these keywords. They appear in Box menu when you load boxes from the database. Just a lazy way to add selecting projects for now.

See here: "/" are separators of all the box keyword IDs that I have (all of my existing projects). When I type one there and press view it will load the data for the specific one and I should be able to edit it with the update button.

I've added a keyword for your one - it is just the word 'steps'.

But if you wish I can change it.

Anthony_Tonev (99)

@johnstev111 I think I've fixed the style issue. They should look good now. I used the keywords as part of their IDs but now I've generated hashes for DOM elements IDs.
Also just checked it - Nice melody, thanks for the submission :)

Anthony_Tonev (99)

@ebest I have added your idea for the different hold notes. Kept the old one too, but it is has a star icon now.

firefish (949)

@Anthony_Tonev I find that the star icon can sometimes glitch out, like making the tune repeat over and over, and not playing at all. I find that 🔶1.0 works instead.

Anthony_Tonev (99)

@johnstev111 Yes - ⭐s are the only notes that use simple html audio and thus fail to load on a first run. This might cause it to fail and break. the editor. Not sure.
I can't erase the star notes because there are other pieces that use them- was the old way to add a hold note and now it is like a magical pitch sound effect. You can add normal notes 🔹 which are same as 🔶1.0 . From 🔔 slider you can change 🔶 delay type. Like 🔶 0.5 which will make the note extend and sound more "slow". 🔶1.5 will make it fast and etc.

But ⭐will remain broken for now since changing its behaviour will screw so many pieces. It

Anthony_Tonev (99)

Added Howler.js. I will add more note delay types next.
I have reversed the ordering of the database - newer pieces will show up first.

When I find the time I will add a search method and accounts.

AkhilGupta (16)

This is so awesome!!!

Anthony_Tonev (99)

@AkhilGupta ♪♫♬ Thank you ♪♫♬


This is definitely one of the best so far. I think you've done a great job creating it and updating!!! Thanks for posting early and allowing us to follow your development.

Anthony_Tonev (99)



As soon as I had something working I posted it. Not only to share development history (open source love) but also to gain free crowd sourcing.

That way people can point out issues and the ones that can do music can learn how to use it and add content.

It's not a generally good idea to post early - usually you would like to work on something private and keep an eye on the competition uploads. That way you know the height of the bar and you can surprise everyone with something amazing and they will never know what hit them. Also you keep your idea a secret.

However in my case - content is 50% of the whole thing. The early I post the better. And the issue feedback I get is pretty good - I would have called it done on day One if I never heard any complains.

ebest (672)

Could you delete the accidental repetitions on the db?

Anthony_Tonev (99)

Sure - I will also have to add some features for automated cleanup.

ericjlein (2)

Very cool. I think the number of rows should always be a multiple of 4, since most of the music we listen to subdivides into four.

Anthony_Tonev (99)

@ericjlein Thank you - I had no idea about this - I was thinking it will be kinda nice to represent each block like a "box" to fit the theme... - I will see if I can manage fixing that without screwing the build-in pieces.

rodrigosm29 (0)

okay you've probably won this contest
I'm a begginer, and I'm not exactly fluent in English (I've started learning English a while ago) but I dream of becoming a good programmer. I didn't know that a program so cool could be written like this. It was probably very hard to program, so I would like to say: Congratulations! Now I admire you.

Anthony_Tonev (99)

@rodrigosm29 Thank you for your support. There are still 10 more days - I've build this basically in 2 , so there is still time for someone to write 5 apps like this one. There is still some fight to be had - I will try to tweak some stuff to put a fair fight. Only time will tell (and the judge).

Also I'm coding since 2 years so - I'm as much a beginner as any aspiring coder out there. I'm an artist and mostly animator. So I guess it looks kinda nice because of my artistic touch. However - the algorithm is the core any app - and I still have what to learn and what to improve. So I share the same dream too.

ebest (672)

What if the community could ACTUALLY add musics? like if there was online storage for the music pieces?

Anthony_Tonev (99)

@ebest I'm thinking about adding a firebase data base with a version control on your peaces - only the latest peace will be played when song is called and you can call early drafts of peaces if you want. I will see if it can be done simple enough - I want to avoid registrations at this point and nothing should be erased. The last part is kinda tricky but honestly songs are just strings - I think the free plan of firebase can handle enormous amount of songs and versions and I don't expect to get flooded with data (unless someone is willing to flood me on purpose }:D ). Also, I have to check how I can hide environment variables in - so I can hide the API key of firebase.

ebest (672)

@Anthony_Tonev make a file called ".env"

the problem for me is it doesn't load in python
I don't know if you can, unless you encrypt the key

Anthony_Tonev (99)

@ebest For HTML, CSS, JS apps like this one it is recommended that the .env is hidden in the backend since any tech savvy person will be able to get it. So I will have to add a server I guess.

ebest (672)

@Anthony_Tonev You don't have the hacker plan thing so you can't get private repls. That might be annoying...

Also, why use firebase when you can make your own server?

Anthony_Tonev (99)

@ebest Well this server should be running all the time. I don't think I can keep a tab open 24/7.

katyadee (1289)

This is so cool. What gave you this idea?

Anthony_Tonev (99)

@katyadee A music box that I had since I was a lvl 3 human. It plays a unique melody-lullaby that I'm still trying to find what it's called.

When hackaton theme was announced I thought I wanted to use the opportunity and record it's music then share it with an animated music box that plays the recorded audio. I've animated the box and proceeded with the recording.

But the recording I did was homemade. And it was not sounding like it was played by the cartoony box. Was too realistic for it to mix well with the character.

So I've decided to code a digital music box editor, then learn a little bit of music composition and then compose it's unique music box melody on it. I still have to train my music hearing but I will eventually play it. It's a very nice melody worth sharing.

ebest (672)

@Anthony_Tonev I had one of those music boxes. They were interesting. What level are you right now?

ebest (672)

@Anthony_Tonev Is there any way to level up quicker? I'm stuck at lvl 12.

Anthony_Tonev (99)

@ebest In this game you get a tiny bit of XP every day and this is how you lvl up, but you can have a decent game time at any level. Some say that the real game starts when you reach lvl 22 because then you can decide to skip the tutorial stages or get access to better tutorial stages (academies, universities, courses). But honestly if you run the top tier class - the programmer class you can have fun at any level. At the current stage of the meta they can crush noobs even at level 10. So OP.

ebest (672)


"But honestly if you run the top tier class - the programmer class you can have fun at any level. At the current stage of the meta they can crush noobs even at level 10. So OP."


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 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.

SixBeeps (5235)

Soo cute! I love every little detail you added, even the smiling music box on the bottom :)

Anthony_Tonev (99)

@niorg2606 Thank you! You know what they say - the devil is in the details };)

ArineeC (4)

OMG! I would never be able to accomplish this! Good job! Keep up the good work and GOOD LUCK!!!

Anthony_Tonev (99)

@ArineeC Thank you, but don't rush with discouraging yourself - I'm not even a programmer. I'm pretty sure that If you get a CS degree and focus on fundamentals - you will craft amazing apps in no time. I wish I did that.

ed9baker (0)

Can I make a suggestion? You should be able to click on notes again to deactivate them, without resetting it all.

Anthony_Tonev (99)

@ed9baker Good idea. I've just added your suggestion. Should work now. Thanks.