Design Template by Anonymous

Designing With Audio

Control Bar Design

When it comes to interaction with audio content on the web, the audio player's control bar is an important feature. While JavaScript and the HTMLMediaElement API allows developers to customize a lot of the types of controls available in their both functional and aesthetic design, there are several conventions that are common and users will find natural to interact with on account of past experiences across other sites.

Spotify's version of the control bar separates content selection and consumption preference controls.

Typically, control features of similar functions are grouped together in sections within the bar. Content selection features, such as playback, time and track selection controls, are grouped and displayed usually in the center or on the left. These are separated, perhaps by the progress bar or some blank space, from other controls like those of consumption preferences, which include volume adjustment, output location or player view.

Soundcloud's content selection controls.

Depending on the purpose of the platform playing the audio content, there may exist another group of controls all which relate to actions using the current track, such as adding to playlist, liking or favoriting, or viewing more from the track's artist.

Soundcloud's controls for actions with and info about the current track, separated by some whitespace.

Other common useful feature groups display information on the track, rather than actively control an action.

Spotify displays some info about the current track, separated from controls.

So far, much of our discussion around what audio is used for has been centered around content that is primarily intended to be consumed via direct listening, such as music and narration, but when it comes to designing a user experience on the web, there are many other more subtle ways audio can be involved to elevate digital interactions.