Audio

Overview

The Audio Widget allows you to makes it possible to easily integrate audio directly into your web page and also design it according to your needs.

Screenshot

The following is a GIF video to show you how to use the audio widget and the various options available :

ezgif.com-optimize (1)

Audio Widget

Default

Customized

Audio

  • Audio Source : Add the link of audio file.
  • Autoplay : Toggle the automatic play of audio.
  • Repeat : Toggle the replay of audio.
  • Width : Set width of the Progress-Bar.
  • Padding : Set the padding of the audio widget.

Play Pause Style

  • Size : Set the size of play pause icon.
  • Color : Choose color of play-pause icon.
  • Space Around : Set the padding in play-pause button.
  • Background Color : Choose color of the play-pause button background.
  • Border Radius : Set the radius of button border.

Duration Time Style

  • Show : Toggle the displaying of overall time.
  • Color : Choose color of overall time.

Progress Bar Style

  • Show : Toggle the displaying of Progress-Bar.
  • Height : Set Height of Progress-Bar.
  • Border Radius : Set radius of Progress-Bar border.
  • Background Color : Choose background color of Progress-Bar.
  • Loaded Color : Choose color of bar which is for loaded part of the Progress-Bar.
  • Current Color : Choose color of bar which is for playing part of the Progress-Bar.
  • Hover Color : Choose color of bar which is for Hovering part of the Progress-Bar.
  • Handle Color : Choose color of playing handle.

Current Style

  • Show : Toggle the displaying of playing time.
  • Color : Choose color of playing time.

Volume Style

  • Show : Toggle the displaying of Volume button & bar.
  • Size : Set the size of volume icon.
  • Color : Choose color of volume icon.
  • Space Around : Set the padding in volume button.
  • Background Color : Choose color of the volume button background.
  • Border Radius : Set the radius of button border.

Volume Slider

  • Height : Set Height of volume-bar.
  • Width : Set width of volume-bar.
  • Border Radius : Set radius of volume-Bar border.
  • Background Color : Choose background color of volume-Bar.
  • Current Color : Choose color of bar which shows current volume.
Was this helpful to you?