WaveSurfer-WP

WaveSurfer-WP

Wordpress plugin

Install on Wordpress

App Details

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

Themes and Translations are welcome !

Optimization trick: if you only use this plugin on a couple of pages, I invite you to use a plugin like Plugin Organizer or Gonzales to globally deactivate the plugin or its style, and make it load resources only on pages which need it.
No need for that on the back-end, only for front-end.

This player doesn’t have and will not have Like Button, Sharing Button, Play count and Download count.
If you are looking for a WordPress player with such Social Features and advanced statistics like SoundCloud or Hearthis.at, take a look at ZoomSounds.
For other advanced WordPress integration of wavesurfer-js, you can check WavePlayer by luigipulcini or WaveSurfer-Plus by GalleryCreator.

Contrary to the other WordPress plugin based on wavesurfer-js, wavesurfer-js hasn’t been modified in this plugin. This means that you can extend feature of this plugin using the wavesurfer-js methods, and that updates from the wavesurfer-js community will be pushed in WaveSurfer-WP regularly.

WordPress 5 and Guteberg: Inserting [audio] with Gutenberg doesn’t bring the [audio] shortcode as it use to be. As this plugin is designed to hook the audio shortcode, you can use the generic shortcode block in gutenberg to manually write your shortcode, or use the classic editor.

WaveSurfer-WP Premium Add-on

A premium add-on is available to add extra features to WaveSurfer-WP.

  • Cache Peaks File
    This add-on creates and loads peaks from small files, containing peaks values. No need to wait for the full audio to be decoded to display its waveform.

  • Markers System
    You can add custom clickable element on your pages to seek WaveSurfer-WP player to a desired position. Can be useful for adding marks, chapters, and it can even be used for interactive audio transcripts!

  • Plug and Play
    These extra features are packed as an add-on. No need to delete and replace the original plugin. You will still be able to benefit from translations made by the community. Also, the core is still open source, to allow contribution.

  • TimeLine Plugin
    When activated thanks to a shortcode attribute, a customizable time ruler will appear below your waveform.

You can buy it from the official product page.
Thanks for considering this way to support WaveSurfer-WP !

Additional Infos

It is a port for WordPress of WaveSurfer-js by katspaugh.

It also contains Download-js by dandavis.

Donators

Thanks to our generous donators for supporting this plugin development !

  1. SignalToNoize.com
  2. hawthonn
  3. Rob
  4. Robert Getzener

Do you want to contribute or sponsor one particular feature ? See you on the donation page. Thanks !

Pricing

Starting from $0 per month.

Check Out the Comparison Tables Widget

By Common Ninja

Comparison TablesTry For Free!

App Info

Rating

Reviewers

11 reviews

Tags

audio
media
player
visualization
waveform

Developed By

X-Raym

Quick & Easy

Find the Best Wordpress plugins for you

Common Ninja has a large selection of powerful Wordpress plugins that are easy to use, fully customizable, mobile-friendly and rich with features — so be sure to check them out!

Testimonial

Testimonial plugins for Wordpress

Contact Form

Contact Form plugins for Wordpress

Maps

Maps plugins for Wordpress

Translation

Translation plugins for Wordpress

Chat

Chat plugins for Wordpress

Slider

Slider plugins for Wordpress

Reviews

Reviews plugins for Wordpress

Contact

Contact plugins for Wordpress

Galleries

Galleries plugins for Wordpress

SEO

SEO plugins for Wordpress

Forms

Forms plugins for Wordpress

Comments

Comments plugins for Wordpress

Backup

Backup plugins for Wordpress

Privacy

Privacy plugins for Wordpress

Optimize

Optimize plugins for Wordpress

Tabs

Tabs plugins for Wordpress

Social Sharing

Social Sharing plugins for Wordpress

Events Calendar

Events Calendar plugins for Wordpress

Comments

Comments plugins for Wordpress

Social Feeds

Social Feeds plugins for Wordpress

Social Sharing

Social Sharing plugins for Wordpress

Portfolio

Portfolio plugins for Wordpress

Video Player

Video Player plugins for Wordpress

popup

popup plugins for Wordpress

SiteMap

SiteMap plugins for Wordpress

Payment

Payment plugins for Wordpress

Coming Soon

Coming Soon plugins for Wordpress

Inventory

Inventory plugins for Wordpress

Testimonials

Testimonials plugins for Wordpress

Portfolio

Portfolio plugins for Wordpress

Membership

Membership plugins for Wordpress

Forms

Forms plugins for Wordpress

Analytics

Analytics plugins for Wordpress

Events Calendar

Events Calendar plugins for Wordpress

Sliders

Sliders plugins for Wordpress

Analytics

Analytics plugins for Wordpress

Reviews

Reviews plugins for Wordpress

Security

Security plugins for Wordpress

Ads

Ads plugins for Wordpress

Music Player

Music Player plugins for Wordpress

Countdown

Countdown plugins for Wordpress

Email Marketing

Email Marketing plugins for Wordpress

Membership

Membership plugins for Wordpress

Ecommerce

Ecommerce plugins for Wordpress

Customer Support

Customer Support plugins for Wordpress

Video Player

Video Player plugins for Wordpress

Tabs

Tabs plugins for Wordpress

Social Feeds

Social Feeds plugins for Wordpress

Common Ninja Apps

Some of the best Common Ninja plugins for Wordpress

Browse our extensive collection of compatible plugins, and easily embed them on any website, blog, online store, e-commerce platform, or site builder.

Comparison Tables for Wordpress logo

Comparison Tables

Add comparison tables to your site to help visitors evaluate features side by side, understand differences quickly, and choose the right option with confidence.

FAQ for Wordpress logo

FAQ

Add an FAQ section to your site to answer common questions, reduce support requests, and give visitors a smoother and more confident user experience.

Reviews Trust Box for Wordpress logo

Reviews Trust Box

Display ratings from multiple platforms in a reviews trust box that builds credibility, social proof, and boosts conversions.

Scroll Progress for Wordpress logo

Scroll Progress

Use a scroll progress bar that visually tracks reading on the page, improves navigation, and keeps visitors aware of their position.

WhatsApp Chat for Wordpress logo

WhatsApp Chat

Add WhatsApp Chat to your site to communicate with visitors, deliver instant support, and create a smoother, more trustworthy user experience.

Animated Headline for Wordpress logo

Animated Headline

Add animated headlines to draw attention to key messages and improve user engagement through visual emphasis.

Scroll to Top for Wordpress logo

Scroll to Top

A scroll to top button that helps visitors move back to the top of long pages quickly, improving navigation and overall browsing flow.

Google Play Reviews for Wordpress logo

Google Play Reviews

Show Google Play reviews for your Android app to build trust, strengthen credibility, and help visitors make confident download decisions.

Age Verification for Wordpress logo

Age Verification

Verify visitor age with an age verification popup that helps you meet legal requirements, protect your business, and ensure responsible access.

Messenger Chat for Wordpress logo

Messenger Chat

Add Messenger Chat to your site to communicate with visitors, offer fast support, and create a smoother user experience across all pages.

Telegram Chat for Wordpress logo

Telegram Chat

Add Telegram Chat to your site to communicate with visitors, deliver instant support, and provide a smoother, more reliable user experience.

Event Listings for Wordpress logo

Event Listings

Create event listings with an events board widget that displays upcoming activities clearly, helps visitors discover events, and supports easy management.

More plugins

plugins You Might Like

Discover Apps By Platform

Discover the best apps for your website

WordPress
Wix
Shopify
Weebly
Webflow
Joomla
PrestaShop
Shift4Shop
WebsiteX5
MODX
Opencart
NopCommerce

Common Ninja Search Engine

The Common Ninja Search Engine platform helps website builders find the best site widgets, apps, plugins, tools, add-ons, and extensions! Compatible with all major website building platforms - big or small - and updated regularly, our Search Engine tool provides you with the business tools your site needs!

Multiple platforms