Ambience

The Ultimate Relaxation Tool

Comment

Inspiration

Back when I first signed up for Superposition V, my first hackathon, I was thinking, "Hmm... what would I want my first project to be?" It was around the time of a calculus test that I was studying for and I was listening to some white noise and YouTube and I was like, "That's it!" I wanted to create a tool that allowed users to create a customizable studying/relaxing sound experience. I wanted to include all of the most common and most relaxing sounds that people use when doing those things, but I also wanted to leave it open to the user to design their page to what they would want to see when studying, whether they want to keep it on screen while studying, or projected onto their wall when sleeping. I later came across a website called IMissMyCafe which was very similar to the vision I had but with a cafe setting. Using all of this, I created Ambience.

What it does

Ambience allows you to create your perfect atmosphere for relaxing and/or studying by providing you with a customizable space with the most relaxing sounds and a recommended studying playlist.

How I built it

I built it using Qoom, a web development tool I discovered during the Intro to Web Development workshops hosted the week before.

Challenges I ran into

I have limited knowledge on HTML and CSS, only some from playing around with it before. I also have zero experience with JavaScript. I'm mostly familiar with Java. So, trying to switch languages and try creating an entire website from scratch did feel a little difficult, especially with the time crunch and having to learn so much in so little time, but by properly utilizing my resources and just adjusting the small details as I went, I was able to create the Ambience we know today.

Accomplishments that I'm proud of

I'm especially proud of the JavaScript portion of the site where you can change the background. Not only does it allow the users to become more creative, but as someone who had no prior JavaScript experience, it was a big feat I overcame.

What I learned

I learned many new things about web development through this experience. I learned about how to add audio, flexbox, JavaScript, and many new CSS properties in general.

What's next for Ambience

I want to be able to make Ambience far more efficient. It doesn't require a seeker for the audio file, so I would remove that and create custom audio players with purely sliders. I want to add some animations as well for the most dominating audio sound. For example, if wind was the loudest sound playing, there would be wind blowing across the screens. I would also have a bigger selection of backgrounds on the website itself. I would also add light and dark modes, and many other features to take Ambience to the next level.

Built With

Share this project:

Updates