DUOLABS
Work

Music streaming web player

We built a dedicated web player that a music service offered separately for listeners of one genre. Listeners play tracks straight from the web browser, and if the controls and current state are not visible at a glance, they end up hunting through the screen mid-song. We developed the whole player screen: basic controls for play, stop, seek, and status, the playlist screen with play-order management, and how buttons and states are shown.

Launch
2009
Client
A Korean music service company
Type
Media & Community
01 / 04

A genre-specific player that plays straight from the web browser

The genre-specific web player was a separate service a music provider set up for listeners who enjoy one particular genre. We implemented a player screen that plays inside the browser, so listeners could hear tracks straight from the web browser. The aim was a player that sits inside a web page yet behaves like an installed music application.

A genre-specific player that plays straight from the web browser
02 / 04

Basic controls with play, stop, seek, and a status display

The basic controls of the web player are play, stop, seek, and a display that shows the current state. We developed each of these media-player control flows so that the moment a listener presses a button, the screen tells them what the player is doing. When the playback state shows on screen at once, listeners do not press the same button again while waiting for sound.

Basic controls with play, stop, seek, and a status display
03 / 04

A playlist for seeing the tracks and setting their order

The playlist is the screen where listeners check the tracks they will hear and manage the play order. We implemented the track list screen together with the controls for managing play order. The list has to set the current track apart from the next one, or listeners cannot follow the order.

A playlist for seeing the tracks and setting their order
04 / 04

State shown so the pressed button and chosen track are clear at once

A music player has to make it obvious on screen whether something is playing and which track is selected. We designed the player screen and its responses so control buttons, playback state, and selection state read intuitively. We refined how the screen moves so the player responds like an installed desktop program even inside the web.

State shown so the pressed button and chosen track are clear at once

Highlights

01

A genre-specific web player that plays straight in the browser

02

Play, stop, and seek controls with a playback status display

03

A playlist for viewing tracks and managing play order

Insights

Read the blog