Soundtrack Mobile App

Soundtrack is an iOS-targeted web-app designed to create a real-time movie-like score for your life. A webapp is an html5/css3/js site that acts as a native mobile app, either on Android or iOS. It runs in the browser, which makes it platform agnostic. Because of the javascript hooks for the mobile device’s sensors (gyroscope, accelerometer, orientation), it’s also able to access much of the same data as a native app, while at the same time much easier to write.


Soundtrack is a music-player app, similar to iTunes or Spotify, but with a twist. It based the song selection on:

  • time of day (querying the internal clock)
  • weather (through a Weather Underground API)
  • motion (based on basic accelerometer data)
  • user affect (manually input from user)

Depending on those factors, especially how fast or slow the user was moving (for instance, sitting vs walking vs running), the song would change. This would happen, even mid-stream if the user changed from standing to walking or vice versa. The motion data was queried and then averaged over the course of several seconds to avoid switching too frequently due to intermittent or inconsistent motion.

app experience flowchart

Flowchart describing the data querying and behind the scenes of the app

The interface is built entirely in CSS3, including the drop shadows, gradients, rounded corners, override switch, and overlay. The user has complete control over the factors and can override them at any time.


For this prototype, I selected a fixed library of locally-served royalty free music that was hard-coded into a .json file that corresponded to the matrix of factors.

This unique music experience is somewhat similar to the “power song” feature in the Nike+ workout apps and genre-selection in the now-defunct Songza app. However, I like to think it’s still a pretty cool idea that hasn’t really been replicated.