Sleepjet.co ✈️ - Plane noise to help you relax!

•

I designed and coded Sleepjet.co as my first very first Javascript project.

Research

On the internet, you can find many websites / YouTube Videos of so-called "ambient sounds", to work or relax.

As a consumer of this kind of content myself, as well as a fan of noise inside aircraft, I decided to develop my own ambient soundtrack.

Ambient noise is classified by "colour", from white noise - more acute - to brown noise (raucous). By using them
superimposing you can approach a certain similarity with what the sounds inside of an aircraft.

Objectives

The interface must be immersive, relaxing, therefore simple (or even minimal) and practical. Sleepjet must be usable at home (relaxation) or in the office (ambient noise for concentration), so spaces where internet access is easily available.

The sound shall be customisable according to the preferences of the user.

Execution

Overall look:

I very quickly opted for a single-page application with a minimal interface, little text, for total immersion.

Soundtrack:

I decided to split the soundtrack in two: air noise, and noise human beings inside the plane.

In Ableton, I superimposed color sounds to make me as close as possible to the noise of the aircraft in flight.

Finally I have added about ten royalty-free samples (conversations, beeps, pilot announcement etc).

Animation:

The animation was made 100% in CSS and Javascript (without library) which reduces considerably loading times, because loading the .mp3 tracks of the sounds is already enough.

The window uses a gradient generator that I had built in Javascript.

Update: in April 2018, Chrome (70% of my users) decides to block - by default - the media activated by auto play, forcing me to change the user experience.

Now the sound launch is hidden behind an interaction with the main button.

A mobile is under development at the moment. I added a timer feature, as well as a luminosity slider, while trying to keep the app as minimal as possible.