StudyScapes

StudyScapes Home
New York City
RIT Library
San Diego
Seattle
Yellowstone National Park

Inspiration

I was inspired by websites that aim to provide the ambient noises of certain spots that were closed during the pandemic. Even though things are reopening up again, I thought that it would be fun to create a website that tied these virtual locations to physical locations across the country. I was also inspired by my friend, who told me that sometimes, they aren't in the right mindset to leave their room, but they feel like they have to so that they can be productive. I attempted to bring outside to them via this project!

What it does

StudyScapes contains five locations, each with a different theme. Each area has 3-4 sound-tracks, which can be overlaid so that you can create the atmosphere of actually being at that location. Each sound's volume can also be adjusted, and they loop infinitely so that the user is not disturbed to restart the tracks while they're studying.

How I built it

I built this in HTML and CSS, with some JavaScript!

Challenges I ran into

I ran into some issues with centering my elements, until I discovered the flexbox, which honestly is a lifesaver. I also had to re-learn some HTML and CSS, because while I did take a class on these languages, it was very basic, and definitely not enough to build a website like this. I also have never used JavaScript before, so when I realized I could not change my audio controls without it, I had to learn JavaScript from scratch.

Accomplishments that I'm proud of

I'm proud that I managed to get all five locations completed and with appropriate sounds! I'm also proud that I even managed to find some of these tracks, as they were surprisingly challenging to find. Additionally, I'm also proud that I managed to get so much done, even when I was travelling home for Spring Break. Finally, I'm proud of how the website is responsive, so that it can be still used on mobile as well.

What I learned

I learned a lot more HTML and CSS, and I also learned JavaScript. I also learned about audio sound libraries, and how, for some reason, sound can be incredibly expensive.