iPhone 6-7-8 – 1@2x.jpg

Web + Front-End Development + Interface Design
Self-Initiated Project

 


OverAir is a digital product that uses Spotify’s research
on how weather affects mood and hence acoustic attributes
of your music preferences to play songs and videos.

The interface will display your city name, the
temperature, and weather description around you first.
The video and song will then play depending on this code.
You can skip and play the next song as well.

 
Screen Shot 2019-01-31 at 11.25.18 AM.png
 
 

While learning a certified course for HTML, CSS, JavaScript, SQL, PHP during summer breaks, I decided to create a website out of personal interest.


Ideally there would be a much bigger database of songs/playlist as well as videos carefully inserted from the research. I also envision the use of live satellite and environmental videos from the user’s location. Because I do want people to acknowledge the weather.

 



MOOD———————————gENRE———————————wEATHER

Energetic and rhythmic  |  dance/electronica, rap/hip-hop, and soul/funk   |  Spring  | Summer | Clear

Intense and rebellious | alternative, rock, and heavy metal |  Monsoon | Rain | Drizzle Rain | Thunderstorm

Upbeat and conventional  | country, religious, pop, and soundtracks/theme songs  | Fall

Reflexive and complex |  classical, blues, folk, and jazz |  Winter | Clouds | Mist | Fog | Snow

Link - BASED ON SPOTIFY RESEARCH





CODE IMPLEMENTATION

Geo-coordinates code and OpenWeatherMap API is
implemented to detect the weather of the user first and then the
weather codes received from the API to play songs
from the database. The audio database was created based
on the research by Spotify.

api call from open weather maps Link

Screen Shot 2018-12-21 at 1.20.47 PM.png
Screen Shot 2018-12-21 at 2.48.37 AM.png
MYSQL.png
 

The ID of all the possible weather codes were inserted in
database, MYSQL and linked it to the playlist and the video.

The entire project has been implemented
using HTML, CSS, PHP, MYSQL and Jquery.

Screen Shot 2018-12-21 at 2.55.08 AM.png
 

The interface will display your city name, the temperature,
weather description around you first.

The video and song will then play depending on this data.
You can skip and play the next song as well.

 
Screen Shot 2018-12-21 at 1.48.19 PM.png
 
Screen Shot 2018-12-21 at 1.30.42 PM.png
 

OverAir will be live by Feb 2019 and one will be able to experience it.

The different weather conditions, songs and videos from
the product is shown below in the videos.

Below videos should give you the exact experience of OverAir product

 

 


 

CHALLENGES AND LEARNINGS

What looks very simple as interaction can actually have a ton of Javascript running behind it. This was an important takeaway for my future. How to use API, using existing codes and implementing to the project, reading about z-index and responsive design in CSS were some of the learnings from this project.

During the process, understanding and making decisions as I switched roles between a designer and a coder was a new experience.

Another main challenge faced during the process was how to create/collect content and work around limited resources for personal projects.