Skip to main content
Logo

Audio player layout options

This article acts a reference to the various layout options that are configurable in the audio web control. The options differ slightly from the video controls.

Responsive

The Contensis audio player is set to a responsive layout by default. The audio player width is set to 100% to fill its parent container, the height of the player is set to 30px which sets the player into audio playbar mode.

Aspect ratio options

We provide the various aspect ratio options when you want to use a poster image with a single audio player. 

  • Audio player & 16:9 poster image
  • Audio player & 4:3 poster image
  • Audio player & 1:1 poster image

Fixed dimensions

When you need a player to remain at a custom size to fit a particular design you can choose to pass the player fixed dimensions.

  • The minimum height a playbar can be to function correctly is 30px;
  • The player will reduce to a simpler mode when the width is set to <320px displaying only the scrubber, volume, and playback controls.

Size presets or set a custom size

We've included a few common dimensions based on a 16:9 aspect ratio but you can also set your own dimensions by selecting Custom size in the drop down.

Stretching

The stretching option is only used when a poster image is provided and so isn't as important as it is in the video player. To ensure your poster image displays correctly we've set the default to Uniform. An explanation of each of the stretching options follows.

Uniform (default)

Will fit the poster image to the audio player dimensions proportionally, maintaining the original aspect ratio of the image. Black bars may be visible in this scenario, but provides the best solution if you are not sure of the ratio of the source image.

Exact fit

Will fit the poster image to the audio player dimensions without maintaining its aspect ratio, this can caused you image to be squished, but will prevent black bars.

Fill

Will stretch and zoom the poster image to fill the player dimensions, while maintaining aspect ratio.

Be aware:
  • If the source poster image is smaller than the player dimensions the poster image may become pixelated
  • You may also find that important content is cut off from the edges of the poster image where the player zooms to match the ratio.

None

When stretching is set to none, the player will display the poster image at its actual size, black bars may be present if the image is smaller than the player dimensions.

Poster image

A poster image is displayed in the player window whilst the audio is played. You may want to use a poster image to display a company logo placeholder or display some album artwork during playback.

You can use the content selector to browse for an image in Contensis or provide a URL to an image you would like to use.

Poster image sizing

Poster images sizing and position is handled by the stretching options. If the player instance is set to responsive then your poster image will be scaled to the same aspect ratio as your player. If the player instance is set to fixed dimensions then the poster image will inherit the stretching option that has been chosen for the player.

Some things to note

  • Poster images can not be used with playlists
  • You should apply the same consideration of file size and compression to poster images as you do to other images on the web.