Html5 Audio Player Docs

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

ShortCode

Standard- Configure

When you create an audio from Html5 Audio Player > Add Audio Player, you will see the standard player type is selected by default.

From here, you can change various options for the audio such as sources, options, layout(width, alignment), player skin and many more. Lets talk one by one

Sources

By these settings you can upload/change the audio file and audio posters, also you can set the audio title.

HTML5 Audio Player- ShortCode Standard Sources
HTML5 Audio Player- ShortCode Standard Sources

Options

There are lots of options for the audio

  1. Muted: Turn on if you want the video output should be muted.
  2. Auto Play: Turn on if you want video will start playing as soon as it is ready. autoplay policy
  3. Repeat: Two options are available. Once or Loop. You can choose according to your needs.
  4. Disable Pause: Enable this option if you want user can’t pause the audio.
  5. Seek Time: The time, in seconds, to seek when a user hits fast forward or rewind. The default value is 10 sec.
  6. Preload: Specify how the video file should be loaded when the page loads.
HTML5 Audio Player- ShortCode Standard Options
HTML5 Audio Player- ShortCode Standard Options

Layout

For the layout, you can change the width, alignment, and border radius from here.

  1. Player Width: Set the player width. Height will be calculated base on the value. Left 100% for Responsive player.
  2. Alignment: To set the player in left, center or right.
  3. Border radius: Defines the radius of the Player’s corners.
HTML5 Audio Player- ShortCode Standard Layout
HTML5 Audio Player- ShortCode Standard Layout

Player Skin

In standard player type, there are 4 different player skin: Default, Fusion, Stamp and Wave

Default

In default 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, Download Button

HTML5 Audio Player- ShortCode Standard Skin Default
HTML5 Audio Player- ShortCode Standard Skin Default

Here’s a preview,

HTML5 Audio Player- ShortCode Standard Default Preview
HTML5 Audio Player- ShortCode Standard Default Preview

Fusion

In this skin, you can show/hide the download button.

HTML5 Audio Player- ShortCode Standard Skin Default
HTML5 Audio Player- ShortCode Standard Skin Fusion

Here’s a preview,

HTML5 Audio Player- ShortCode Standard Fusion Preview
HTML5 Audio Player- ShortCode Standard Fusion Preview

Stamp

For the stamp skin, you can set the text and control color.

HTML5 Audio Player- ShortCode Standard Skin Stamp
HTML5 Audio Player- ShortCode Standard Skin Stamp

Here’s a preview,

HTML5 Audio Player- ShortCode Standard Stamp Preview
HTML5 Audio Player- ShortCode Standard Stamp Preview

Wave

In wave skin, you can set the author name, text and control, and background color.

HTML5 Audio Player- ShortCode Standard Skin Wave
HTML5 Audio Player- ShortCode Standard Skin Wave

Here’s a preview,

HTML5 Audio Player- ShortCode Standard Wave Preview
HTML5 Audio Player- ShortCode Standard Wave Preview

ShortCode Playlist- Configure

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

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

Create Playlist

By default the Create Playlist option is selected, just you have to click on Add New to add audio details. Enter all details about the audio (title, file, poster ,and artist). You can add more audio files to 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 control 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 a custom themes 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

Here’s a preview

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 a 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

Here’s a preview,

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

ShortCode Sticky- Configure

At first, switch the player type to Sticky Player. You can change various options for the audio such as sources, options, alignment,and player skin. Let’s talk one by one

Sources

By these settings you can upload/change the audio file and audio posters, also you can set the audio title.

HTML5 Audio Player- ShortCode Sticky Sources
HTML5 Audio Player- ShortCode Sticky Sources

Options

Enable/disable repeat, set Initial volume and show/hide Download Button by the options.

HTML5 Audio Player- ShortCode Sticky Options
HTML5 Audio Player- ShortCode Sticky Options

Alignment

From here you can change the alignment of the player.

HTML5 Audio Player- ShortCode Sticky Alignment
HTML5 Audio Player- ShortCode Sticky Alignment

Player Skin

In playlist player type, there are 2 different player skin: Simple and Fusion

Simple

In simple skin, you can change the background.

HTML5 Audio Player- ShortCode Sticky Skin Simple
HTML5 Audio Player- ShortCode Sticky Skin Simple

Here’s a preview,

HTML5 Audio Player- ShortCode Sticky Simple Preview
HTML5 Audio Player- ShortCode Sticky Simple Preview

Fusion

HTML5 Audio Player- ShortCode Sticky Skin Fusion
HTML5 Audio Player- ShortCode Sticky Skin Fusion

Here’s a preview,

HTML5 Audio Player- ShortCode Sticky Fusion Preview
HTML5 Audio Player- ShortCode Sticky Fusion Preview
Tags:
Was this article helpful to you?

How can we help?