When approaching this hackathon, we knew we wanted to take it in a creative direction, so we spent a lot of time browsing Chrome Experiments to gauge what was possible with modern web tech. We discussed ideas such as "twitter but with sound bites" and "collaborative soundscaping", but eventually settled on more of a "mood board" approach due to our limited time and experience.

What it does

On, users can record snippets of audio and video called "bits". These bits can be moved around the page in an audio-visual collage, and they are all played synchronously in a looping/layering format. This deliberately caters to a wide variety of creative intents on behalf of the user - we imagined digital music making, performance art, brainstorming and just having fun. The workspace is readable and playful to allow for younger users, and the simplicity of the format naturally sparks user curiosity and creativity.

How we built it

In starting this project, we spent a lot of time putting pen to paper, visualizing the fundamentals and getting the core design ideas worked out. Then, we built the site, starting with the most essential features (audio playback/recording, basic formatting) and ending with tweaks and refinements (UI, minor bugfixing, user testing on different platforms). While some ideas had to be adapted to fit the time limitations (eg peer-to-peer collaboration was dropped), the main essence of the original design remained constant throughout.

Challenges we ran into

Due to our inexperience, we ran into every possible pitfall while making Initially, we'd planned to use p5.js for most of the site, but in pursuing this option we found ourselves building more and more clumsy workarounds as we tried to force a round peg through a square hole. Ultimately, we found out that p5.js doesn't support video recording/playback, and we had to rewrite our code using WebRTC technology, which we learned on the go. This was a risky transition, but it ended up solving a lot of earlier inconveniences.

A more recent challenge was spending 25 minutes writing this project story, and then accidentally hitting ctrl-W and losing it all. This was pretty tragic, especially so close to the deadline, but we're glad to say we've persevered and we're halfway through writing it again.

Accomplishments that we're proud of

We made a website! This was a big deal for us, since no one in the team had ever made a real website before. We had a blast putting together something that now lives on the world wide web for all to see. We reckon soundbit has decent creative scope, and we look forward to seeing what people make with it!

What we learned

Hackathons may be short, but it's always worthwhile considering organization. We cut a lot of corners early on in order to save time, but those same lazy practices ended up costing us time bugfixing spaghetti code and getting confused about our own methods. If we'd approached it more systematically, the site would have ended up feeling cleaner from a developer perspective.

What's next for soundbit

Next, we'd love to add peer-to-peer networking, so that users can share a workspace, exchanging bits and building up their creative ideas together. This would further increase the applicability of to a lockdown environment - when people are apart, what they often miss most is the playfulness and expressive nature of human interaction, and we think's creative approach lends itself to this.

Share this project: