Throughout the pandemic and even now, as we're recovering, it's easy for people to get overwhelmed with feelings of doom and gloom about what's going on in the world. Ambience and calming soundtracks have become a popular way for people to calm down quickly, and be comforted by the sounds of a familiar environment. However, with popular platforms for listening to ambience like YouTube, the ads and the massive number of video choices can be overwhelming. Our website is meant to be a simple alternative, with minimal visuals, a few simple choices determined by a short quiz, and no ads to take you out of the immersion.

What it does

In general, serenbience collects the users’ preference for ambiences based on their answers to a series of questions and provides them with a platform to enjoy the meditative sound.

At first, users will be asked to answer a series of questions that help us identify their preferences; at the end of the little test, users will be directed to a page on which they can enjoy the meditative sound of an ambience that suits their mood best. They can freely play or pause the music as they want. In case they get bored with the current music provided, they can click on “find another sound” and redo the test to find a more suitable ambience.

How we built it

We mainly used HTML, CSS, and Javascript to create the files of our project on Glitch. Specifically, we structured our main pages (including the index and quiz page template) with HTML, and created the interactive questionnaire with javascript to avoid unnecessary repetitive creation of pages for different questions. Eventually, we styled the website with CSS to make it appear calming and peaceful.

Challenges we ran into

  1. It was challenging for us to figure out how to custom the domain name;
  2. The fade-in elements only worked for the first page but not the consecutive pages of questions

Accomplishments that we're proud of

  • A complete and beautiful project within two days in our very first hackathon!!
  • Interactive questionnaire
  • Simplified code with javascript
  • Newly gained front-end skills

What we learned

  • Collaborative coding ability
  • New website development skills

What's next for The Ambience Wanderer

We will be adding more dynamic features and animations to the website so that users will be more engaged and have more fun doing the small test; We are also planning to expand our questionnaire and “ambience library” to allow more accurate matches and provide a greater variety of meditative options in the future.

Built With

Share this project: