WaveSurfer-WP

This plugin replaces the default WordPress audio player with a player capable of displaying audio waveforms. It can display a mix of the different audio channels (for podcast, radio replays, e-learning, music), or all channels simultaneously (for sound tutorial, sounds-packs showcases, audio products demo etc…), which is its main purpose.

By working with the default audio/playlist shortcode, you have great advantages:

• It works with all your previous posts
• You still have the default player in the Visual Editor (not just shortcode)
• It supports every audio format supported by WordPress (wav, ogg, mp3, m4a).
• Safe deactivation: if you deactivate the plugin, your shortcode will fallback to the WordPress default audio player.

Global colors and style settings can be overridden locally by dedicated shortcode attributes.

• progress_color="purple"
• wave_color="#FF0000"
• cursor_color="#FF0000"
• height="128"
• bar_width="0"

Also, there is some attributes accessible at shortcode level:

• mute_button="true"
• loop_button="true"
• download_button="true"
• split_channels="true"
• player="default"

For more advanced customization, with a custom site-plugin, you can:

• add shortcode attributes conditionally with the filter wavesurfer_wp_shortcode_attributes.
• use the wavesurfer_wp_shortcode_data filter if you want to add custom waveform data attributes.
• use the wavesurfer-wp-init JavaScript event handler to render the player on custom events, like after click on a button. See examples on the WaveSurfer-WP-Init GitHub repository.

Check this Gist for demos of how to use the filters.

Extra features :

• Pressing play on a player automatically set all the others on the same page to pause.
• AJAX Page loading compatibility
• MultiSite Friendly

The default style requires some icons of Font-Awesome 1.0. These are included in the plugin as a small custom font. Because this icon-font is already used in a lot of themes and plugins, you can deactivate this custom font if needed.

You can deactivate the default WaveSurder-WP theme, and use your own theme style. I strongly encourage you to do that as custom CSS is the only way to make it fit your theme perfectly. There is a lot of dedicated CSS selectors for that. You can take one of the included theme as reference.
This will allow you to have more control on icons, responsivity, mouse hover behavior etc…

More Infos & Demos

You can contribute by to WaveSurfer-WP development on GitHub

Read the full description on the official page →