The structure of WavePlayer audio player

The player

The player is conceived around two main elements: the thumbnail and the waveform area. The thumbnail also accommodates the main transport buttons. The waveform area displays the peak file of the audio track.

The interface comes in four different sizes: largemediumsmall and extra small. They corresponds to a height of 200px, 160px, 120px and 80px respectively. This allows you to resize WavePlayer at your best convenience, in case you wanted to include it in a full width page or in a smaller widget.

As you can see from the the examples on this page, the width of the player always adapts to the width of its container, regardless of the selected size.

Furthermore, depending on the width of the current client, the size of the player will be forcefully reduced to a smaller one. This means that, for example, a client’s width smaller than 768px force larger players to an extra small size, regardless of the players’ original size.

The buttons

The thumbnail of the track contains all the buttons controlling the playback of WavePlayer. If the playlists consists of one audio track only, just the play button is visible.

The skip buttons will be displayed depending on the position in the playlist of the track that is currently being played back. Consequently, if the repeat_all parameter is set to true, both the skip buttons will be displayed at all time. This means that you can skip back and forth through the playlist continuously.

On the top part of the control interface, you can find an info button allowing you to toggle the visibility of the infobar. On the bottom part you have the usual volume button.

The waveform

WavePlayer’s waveform represents the timeline of the current audio track. With WavePlayer you can customize the aspect of the waveform. You can easily alter colors and many other factors determining how the waveform will display.

[ waveplayer size="lg" ids="20,58,12,25" ]

[ waveplayer size="md" ids="58" ]

[ waveplayer size="sm" ids="12" ]

[ waveplayer size="xs" ids="25" ]