Audio Player

How it works

Audio Player admits any audio source and creates an accessible player to reproduce it in real time. The widget is divided into several parts you can style in the widget’s Content tab:
Wrapper: the element’s container. Additional styles from the Style tab will be applied to this Wrapper.
Top Wrapper: contains the thumbnail and the texts (Audio title and Artist name).
Thumbnail: the player’s poster from the left.
Texts: the Audio title and the Artist name.
Play/Pause Button: when the audio is paused, the play button will show up and when the audio is playing, the pause button will show up instead.
Duration and Progress Container: contains the Timer, Duration and the Progress.
Progress: the Audio progress. It matches the audio’s duration automatically when playing the audio.
Timer and Duration: timer are the numbers from the left, which will display the audio’s progress in real time. Duration is the total audio’s duration from the right. Both are read from the audio source and set automatically by the element.

Audio controls

Source: your audio source.

Progress Animation controls

Duration
GSAP easing: you can choose from a wide variety of easings. Learn more about GSAP easings here.