Minimalist Soundscape Experience
Web TechnologiesUI/UXTypeScriptReactnext.jsvideo.jsYouTube APIAre you someone who finds it difficult to work or concentrate in complete silence or in the midst of constant noise? Many of us seek a middle ground - an ambient soundscape that enhances focus and creativity. While background music may seem like an obvious solution, for me it gets monotonous after a while, much like staring at the same motivational quotes day after day. This led me to question what makes a soundscape engaging and sustainable for long periods of focused work. With a focus on simplicity and minimal user interaction, I created a web application with a curated collection of natural soundscapes categorized by time of day, providing a harmonious blend of atonality and predictability.
I believe that tonality, specifically the tonal attributes of a soundscape, plays a vital role in preventing the onset of mental fatigue and boredom. On the other hand, random music, which is by definition atonal, lacks predictability. The ideal soundscape, I hypothesize, strikes a balance between atonality and predictability. In this sense, natural sounds are at the intersection of atonality and predictability.
Various websites offer sound mixer tools, and YouTube is filled with "natural soundscape" videos. While these solutions provide options, they often overwhelm the user with too many choices or poorly executed artificial sound mixes. In addition, YouTube itself can be distracting with unrelated content and comments. Motivated by my own need for an appropriate working soundscape, I created a web application that would play appropriate natural soundscapes with minimal user interaction. The core principle was to make the app act as an „acoustic window" rather than a traditional media player.
To achieve this, I handpicked high-quality soundscapes from YouTube and categorized them based on three different times of day: night, dawn, and day. Using the current sunrise and sunset times, the app determines the currently appropriate category and selects a soundscape each time it is launched. The app has a minimalist interface with only one interaction: muting and unmuting the soundscape - in line with the "window" metaphor mentioned above. When an audio stream ends, the app picks a new one automatically. To get a different soundscape, the user reloads the page.
The soundscape web application is built using React and TypeScript. To play audio streams from YouTube, I integrated the video.js library with custom code to properly handle the load state of the media across browsers. The more elegant solution of serving YouTube audio streams directly in an HTMLAudio element turned out to be infeasible for cross-browser support, as Safari requires support for HTTP range requests for long media streams, which YouTube does not implement according to the web standard - I wonder why...
There are several possibilities for future development: For example, I could see the app automatically switching between soundscapes at the start of each new hour, creating a sense of time passing as you work or relax. For more variety, videos longer than an hour could start at random time stamps. I would also like to include a way for users to suggest new soundscapes, while maintaining the goal of keeping the interface free of buttons. An ambitious feature would be to automatically categorize soundscapes based on their acoustic properties, using techniques and features such as Fourier transform, rhythmicity, and loudness. Finally, an abstract rendition of a water surface could serve as a calm and non-distracting background, possibly with adaptive elements that respond to the soundscape and time of day.
The app is available online for you to try out.