Download
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.
NOTE - In advance option tab . Do more styling to the Audio Widget. To know more about advance option tab. CLICK HERE

    Was this page helpful?
    pagelayer-logo-256
    Request A Demo
    By entering your email, you agree to our Terms of Service and Privacy Policy
    love-subscribe

    Download Pagelayer Plugin

    Subscribe to our Newsletter for WordPress related news and tutorials and get a 25% discount !

    Newsletter Subscription
    Subscribing you to the mailing list