Updates from the Repl.it team about the product

← Back to all posts
Meet The Music Hackathon Winners (Third Place)
amasad (1374)

Heyo replers 👊,

If you haven't heard -- because you're new here or have been living under a bash repl -- we held an online hackathon with a "music" theme. We kept it open-ended and replers were encouraged to work on whatever they're interested in as long as it's related to the theme (even if only tangentially).

Well, we have some winners for you to meet. But before, you should meet our judge.

Tom Lehman (on the left in the pic) is the cofounder and CEO of Genius the super dope music lyrics site. So needless to say he knows a thing or two about music and websites.

Now to the winners. This is the first installment of the series and, for maximum anticipation, we're starting with the third and making our way to the first.

Third place: Anthony Tonev

@Anthony_Tonev took the third place with Music Box Editor. In the following interview he tells about how he got the idea and the tech behind it.

@amasad: Tell us a bit about yourself

@Anthony_Tonev: My name is Anthony and I’m a 2D animator from Bulgaria (East Europe). I animate stuff like these: https://dribbble.com/Motion_Drifter
And then recreate them with code https://theme-editor--anthony-tonev.repl.co/

I create my animations in a way that they can be live rendered and interactive on the web. Pretty often I have to develop my own tools and scripts.

@amasad: _What's your reaction for winning? Did you expect that?

@Anthony_Tonev: Glad that I won something — there were many great submissions. I personally like “Musical Studio”.

@amasad: How did you get the idea for Music Box Editor?

@Anthony_Tonev: I had a music box since I was a little kid. It plays a lullaby melody which is not discovered by the world. I can’t seem to find it anywhere and there is no name for the piece or the author, nothing. It was inside of a plush elephant toy originally so the toy maker didn’t bother mentioning this information anywhere.

Here is what it plays:

1l-4,1a-8,1b-9,1j-9,1c-10,1g-10,1i-10,1d-11,1f-11,1h-11,1n-11,1o-13,2e-6,2c-9,2b-10,2g-10,2j-10,2a-11,2h-11,2i-12,2k-12,2m-12,2l-14,3b-8,3c-9,3j-9,3d-10,3f-10,3h-10,3e-11,3g-11,3i-11,3n-12,3l-13,3o-13,4c-10,4h-11,4k-11,4a-12,4i-12,4b-13,4j-13,4l-13,4n-13,4f-14,4m-15

I was visiting my hometown few days after the hackathon theme was announced. I thought “Perfect opportunity to share this melody with the world”. I’ve recorded it and had the idea of having an animated music box that plays it.

But the recording was horrible, so I had to create an editor and compose it somehow. I had to add more editing tools (copy notes, move notes, swap notes, mix notes, etc.) so a non musical acquainted person like can arrange something like that.

It’s such a shame that some people — like the toy makers of my box, miss to credit the name of the author and the piece and I thought that this should be kept this way. This is why in the musicbox DB — if you want to submit you have to include the name of the original author, the name of the arranger (you) and the name of the piece as well as the piece itself.

@amasad: Describe the tech stack behind Music Box Editor

@Anthony_Tonev:

  • I use HTML/CSS/CSS for the main app.
  • Node with express for the server of the DB app.
  • Badwords — https://www.npmjs.com/package/bad-words a lib that detects bad words. If you post a bad word it will swap them with hearths. Pretty neat ❤️❤️❤️❤️!
  • I did the animations inside After Effects.
  • I use bodymoving extention for After Effects to export animations from it as JSON.
  • Then I use lottie library to play these JSON animations on the web.
  • I use firebase for my database.
  • At first I used NEDB but Repl.it autosave conflicted its functionality, so I had to switch to a non-local solution which is firebase.
  • I regret not using a sound library but I now I’ve added Howler.js. Still - when I play the “hold” notes I fall back to html audio. Howler does not stretch them that good.
  • Everything else is vanilla JavaScript. Because I need to dynamically add Matrix Blocks with functionality only for music box melody creation, since this is such a niche UI component not found in commercial libraries.

@amasad: What are you going to do with the prize?

@Anthony_Tonev: I will spend more freely on courses. I will learn a ton of stuff for that amount.


There you have it -- the awesome Anthony Tonev! For the next post we're going to interview the winner in the second place. Stay tuned. Or make some tunes!