This example shows you how to embed an audio file in other websites using WavePlayer.
This customization is particularly useful when you need to show several instances of the player but don’t want to clutter your page too much. It can be the perfect solution for tables or listings.
In this example you can see the CSS rules required to transform your player into a self-contained thumbnail, with the waveform at the bottom. This is particularly useful when using in the WooCommerce Shop page.
In this example, a specific CSS rule is applied to the playlist to set its maximum height. As a result, the playlist will only show a limited number of tracks but, while playing back, WavePlayer will automatically scroll up or down to make sure the current track is always visible.
WavePlayer comes with four default size and three different shapes for the thumbnail. You can set your favorite combination in the Settings, but you can also customize each instance individually using the adjusting the shortcode in the post editor.