Tunebox

• 

  Your studio :)

• 

  Drumtrack editor

• 

  Keys and bass

• 

  Console for tweaking yer sounds

• 

  Multitrack recording panel

• 

  Studio panorama

Inspiration

I just love music, listening to it and playing it ...so I wanted to create a simple, Music 2000-esque experience where users can noodle around and do their little daily jingles. Who knows, might even be good enough as a sketchpad for demos if you're into it.

What it does

Allows users to record 1 min long multitrack pieces and submit them for votes - create drum tracks, apply effects, record your keys and bass and voila - you got your music. Play right there in the UI or use panels (best for mobile).

How we built it

Built as a Reddit Devvit web app in TypeScript, with a Three.js 3D studio and real-time Web Audio synthesis on the client (bundled by Vite) and a Hono + Node.js API backed by Redis.

Challenges we ran into

Can't use mic :( A feature that was in originally wired in...but then again, maybe better off that way :D

Accomplishments that we're proud of

It's pretty fun to play, that was the No 1 aspiration and I'm glad it was achieved.

What we learned

As per usual, these things are a bit more tricky to pull of than it might seem initially.

What's next for Tunebox

More instruments, of course. Perhaps challenges, e.g. "finish this track", "best cover version", etc. Building a cheerful community around it. I hope you enjoy!

Built With

• css
• devvit
• hono
• html
• javascript
• node.js
• reddit
• redis
• three.js
• typescript
• vite
• web-audio-api
• webgl