I always loved waveform display for showing audio content. It is especially useful for audio tutorials, or podcasts, e-learning etc… It allows quick search in audio sections which is especially useful in these circumstances.

Audio waveforms preview is very common in sound processing softwares and in every Digital Audio Workstation. But finding this on the web is pretty rare. That’s why I instantly liked SoundCloud player, and later, the Hearthis.at player.

These are both great players but they lack something: multiple channels display. If I want to make a tutorial about 5.1 panning, having only one waveform is not that useful. Also, having to upload the sounds on a third-party platforms can be not desired, especially if you already have a lot of sounds uploaded on your website and that you don’t wont to upload them elsewhere, and if you want to stay independent.

I searched for this type of player a certain amount of time, until I found WaveSurfer-JS, a free open source jQuery plugin by katspaugh capable of embedding audio while displaying it’s waveform on a web page. More, it was pretty customizable, and modular… two things I really like in a software.

As soon as I found it, I write a feature request for having multiple channel capabilities. About one year later, the feature was integrated. It was maybe the first multiple-channels waveform web audio player available.

That’s was very promising, but it was not enough to be usable for me. Indeed, all settings, including path to the audio files, needed to be coded in jQuery. This may be powerful in some cases, but for integrating within a WordPress post, it needed HTML initialization. Indeed, it is not possible to modify a jQuery script from a post content, so I needed a way to put the infos in standard HTML format, and a way to transform this markup into the WaveSurfer-JS player. So I write another feature request, and once month later (one month ago), the feature was ready !

Well ok so we have split channels, we basic have HTML initialization… Now it needed to be WordPress friendly. That would be my challenge.

The HTML initialization render was pretty basic: it just detect audio element and replace it by a waveform, according to certain parameter. But it needed an controller (play, pause, stop buttons etc), because the standard audio player (depending of the browser) was output below the waveform, and so, two progress bar from different size were visible, which is a bit distracting. So that was the first step: creating buttons that could control the audio element according to certain output. The difficulty was to make it work with several player on the same page, and to retrieve audio infos once files were loaded, which happend before wavesurfer-js initlization. In resume, that was countless hour of struggling for small details on CodePen.

The second step was to integrate it with WordPress. It was clear that the HTML output should be handled the WordPress way: with shortcodes. I decided to override the default audio shortcode. This is very powerful because:

• 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.

I created a global settings page, for controlling global aspect of the plugin and allow a deeper integration with the theme, and waveforms colors can be overriden locally with shortcode attributes. To allow further customization, I put all necessary CSS classes, so that everyone can make and share his own theme. Yes, it’s theme-able audio controller !

And of course, I added a custom shortcode attribute for allowing split channels ! I did not include all WaveSurfer-js attributes, but this one was highly desired. 😛

Well, Three days of dev and it was ready for sharing !

Here is a demo:

And here is a live demo:

And with Split Channels and Custom Local Colors and others button:

I proposed the plugin to the official WordPress plugin repo and…

Tadaaa !

Well, now that I have this nice audio player, I think it is time to write some tutorial about audio. 😛 Unless I decide to add even more features… yes, I have some nice ideas…

Stay tune !

… and thanks to katspaugh for having make this possible ! 🙂

Links

• Download: WordPress › WaveSurfer-WP « WordPress Plugins
• Support: WordPress › Support » WaveSurfer-WP

Reviews

2015-12-03: WaveSurfer-WP has been choosen and reviewed as Plugins Picked of the Week on the WPWkeekly podcast #215 on the famous WP Tavern Website. Nice !

Updates

2015-01-03 : Now with Playlist shortcode support !