Html5 Audio Player Docs

  1. Home
  2. Docs
  3. Html5 Audio Player Docs
  4. Guides
  5. ShortCode Playlist- Configure

ShortCode Playlist- Configure

At first, switch player type to Playlist Player, then you can add or configure the playlist. You can create or select playlist for source, configure playlist and set different skin.

HTML5 Audio Player- ShortCode Playlist Type Select
HTML5 Audio Player- ShortCode Playlist Type Select

Create Playlist

By default Create Playlist option is selected, just you have to click on Add New to add a audio details. Enter all details about the audio (title, file, poster and artist). You can add more audio files for the playlist.

HTML5 Audio Player- ShortCode Playlist Create
HTML5 Audio Player- ShortCode Playlist Create

Select From Playlist

You can use pre-created playlist. To do that Click on Select from playlist, and select the audio.

HTML5 Audio Player- ShortCode Playlist Select
HTML5 Audio Player- ShortCode Playlist Select

Options

Set Initial volume, enable/disable Use forward/rewind button to change audio and show/hide Download by the options.

HTML5 Audio Player- ShortCode Playlist Options
HTML5 Audio Player- ShortCode Playlist Options

Layout

In layout you can change player width and alignment.

HTML5 Audio Player- ShortCode Playlist Layout
HTML5 Audio Player- ShortCode Playlist Layout

Player Skin

In playlist player type, there are 2 different player skin: Narrow and Extensive

Narrow

In narrow skin, you can show/hide the controls buttons. Such as Restart, Rewind, Play, Fast Forwards, Progressbar, Duration, Current Time, Mute Button, Volume Control, Setting Button,

Also you can change the player theme, such as Light, Dark and Custom.

For custom theme you can change brand color, background, item text color, item hover background, item hover text color, odd item background, even item background and border radius.

HTML5 Audio Player- ShortCode Playlist Skin Narrow
HTML5 Audio Player- ShortCode Playlist Skin Narrow
HTML5 Audio Player- ShortCode Playlist Narrow Preview
HTML5 Audio Player- ShortCode Playlist Narrow Preview
Extensive

For the extensive you have to only change the player theme, such as .

You can also change the theme(Light, Dark and Custom) in extensive skin like narrow.

For custom theme you can change brand color, item text color, item hover background, item hover text color.

HTML5 Audio Player- ShortCode Playlist Skin Extensive
HTML5 Audio Player- ShortCode Playlist Skin Extensive
HTML5 Audio Player- ShortCode Playlist Extensive Preview
HTML5 Audio Player- ShortCode Playlist Extensive Preview
Was this article helpful to you?

How can we help?