ComposerLab

______

An online platform for finding

and analyzing music you like.

Landing Page

1.

Simple Search

The search bar at the top of the page can be used to search for songs, artists, or albums.

When searching for an artist, the songs and albums by this artist are displayed.

By selecting an album, only the songs of the album are shown in the list below.

2.

Song Page

The Song Profile contains important metadata and info about the song.

The Song Visualizer, which displays the notes of the song in a visual way.

The Similar Songs Section, which contains songs that are considered similar to this song.

3.

Song Visualizer

The notes of the different instru- ments are shown as layers that can be turned on & off.

The Chord Section on the top displays the underlying chord structure of the composition.

The “Switch View”-button on the bottom left flips the composition, so it is easier to play along for pianists.

4.

Color Modes

The Instrument Mode highlights the different instruments.

In Chords Mode the colors show different chord degrees in relation to the key of the song.

In Chord Tones Mode the colors show the different intervals in relation to the root of the chord.

5.

Map View

In addition to the List View, users also have the option to display search results in a different way: The Map View offers a 2D map, in which the songs are positioned along two axes.

The two axes can be set individually. This way users can search for songs with very specific properties and visually compare them.

By clicking on a song the user can either open it or search for similar songs, which reloads the map, showing similar songs.

6.

Advanced Search

Here users have the option to search for songs using a combination of parameters. These can be combined with one another to narrow down the search.

Some of the parameters can be chained together to search for specific combinations. Example: Songs that contain Wurlitzer AND Bass, instead of Wurlitzer OR Bass.

In combination with the Map View, users can get incredibly specific with their search, especially if they also make use of the “Similar Songs”-feature.

7.

Credits

This project was created as part of my Interaction Design studies during my 6th semester.

Project Team:

Jannis Wäder

Jona Maletic

Paul Schänzlin