Name: WaveSurfer-WP Premium Add-On
Brand: ExtremRaym
SKU: 4505
Price: 20.00 EUR
Availability: InStock

WaveSurfer-WP and WaveSurfer-WP Add-On projects are on hold because of critical bugs found in wavesurfer.js, the script which powers the plugin. Until these bugs are fixed, I will not be able to add new features to these plugins, and purchase will be deactivated.

Development Story

Context

Displaying a waveform from an audio file is a process that can take a bit of time. To speed up to rendering, instead of leaving scripts to the analysis, peaks file can be created, and waveform are rendered from these values. No need to analyze and decode the full audio then, the peaks are not calculated but only read from small text files. It is a process that is used by professional audio software, and also by wavesurfer-js, the script that powered by my WaveSurfer-WP WordPress audio player plugin.

I wanted this feature for WaveSurfer-WP since a long time. Without it, decoding peaks for 50 minutes audio can take 30 seconds if the audio has not been pre-loaded by the browser. That is way too much to be usable in production.
But it was too complicated for me. I don’t even know where to start. WavePlayer plugin author made this feature for his wavesurfer-js music oriented WordPress integration so I know it was possible: he even kindly told me the basic concept.

Few days ago… I get enough of this stagnation for my plugin, and decided to try as hard as it would require to implement this feature.

Planning

It needed a bit of planning: so waveform decoding has to been done from front-end by wavesurfer-wp. But peaks have to been creating server side by PHP. And peaks file need to be reed from JavaScript, but as the uploads folder is not always at the same time across WordPress websites, JavaScript need to call these files from PHP. So, PHP and JavaScript taking to each other… That’s where Ajax come to play, and that’s where I was stuck since months.

Ajax is kind of complex: JavaScript communicating to PHP via XML or other format)… But what I discovered thanks to an OpenClassrooms tutorial that jQuery handle AJAX pretty well. It suddenly seems possible. That was only the beginning of the journey cause a lot of others things have to been handle: WordPress Ajax (which requires particular setup – and which is kind of convenient actually), WordPress variable (uploads path), finding a way to generate unique ID for each peaks files, find how to retrieve peak values, find a way to communicate these data, handling failure, process sanitization…

Action

It took shapes, little by little… and ultimately, with a lot of trials and errors… I succeed to create this cache feature!

I thought it was a good idea to propose this ass a paid feature, in order to helps me maintaining the free version, which only gets me two donations (despite the fact it is used on more than 200 websites). Rather than having a premium version of the plugin, I decided to pack this as an add-on. This have severla advantages:

The free plugin act like a working demo version.
Contributions of other users on the free version (themes, code, translation) are still possible.
Less code to manage as the add-on is only an extension and not a rewrite.

This add-on could have other extras features for WaveSurfer-WP in the future, but this is another story.

Features

Peaks Files

Draw peaks from cache files instead of having to wait for the audio file be downloaded.

Here is a demo of cache feature offer by this add-on:

I advice you to use PHP 7 and HTTP2 for best performance.

Interactive Markers System

This allows you to create quick jump buttons and interactive transcripts. See the full article about this feature here.

Here is the marker demo, with its edit button on the editor.

Timeline plugin

Integration of the wavesurfer-js timeline plugin into WaveSurfer-WP-Premium.

Usage

You can put timeline="true" as shortcode attribute to display a timeline below the waveform.

Then you can add attributes to specify your timeline display.

Attribute	Type	Default	Action
`timeline_height`	Number (px)	20	the height (in pixels) of the timeline.
`timeline_notch_percent_height`	Number (%)	90	the height (in percent) of the minor notch lines in the timeline.
`timeline_primary_color`	Hex	#000	the color of the modulo-ten notch lines
`timeline_secondary_color`	Hex	#c0c0c0	the color of the non-modulo-ten notch lines
`timeline_primary_font_color`	Hex	#000	the color of the modulo-ten time labels
`timeline_secondary_font_color`	Hex	#c0c0c0	the color of the non-modulo-ten time labels
`timeline_time_interval`	Number (seconds)		number of intervals that records consists of. Usually it is equal to the duration in minutes.
`timeline_primary_label_interval`	Number		number of primary time labels.
`timeline_secondary_label_interval`	Number		number of secondary time labels (Time labels between primary labels).

Demo

Basic Usage

[audio mp3="https://www.extremraym.com/wp-content/uploads/2016/12/SalmanKhan_2015P.mp3"][/audio]

Timeline Plugin Basic Customization

[audio mp3="https://www.extremraym.com/wp-content/uploads/2016/12/SalmanKhan_2015P.mp3" timeline="true" timeline_primary_color="#FFFFFF" timeline_secondary_color="#ea8400" timeline_secondary_font_color="#ea8400" timeline_primary_font_color="#FFFFFF"][/audio]

[playlist tracklist="false" artists="false" images="false" ids="4816,4679" timeline="true" timeline_primary_color="#FFFFFF" timeline_secondary_color="#ea8400" timeline_secondary_font_color="#ea8400" timeline_primary_font_color="#FFFFFF"]

Timeline Plugin with Playlist

1.
TED
-
TED: Salman Khan (2015 Partner)
10:57
2.
electrorock-loop-1
0:04

Timeline Plugin Short Sound

[audio wav="https://www.extremraym.com/wp-content/uploads/2015/11/electro-loop.wav" timeline="true" timeline_primary_color="#FFFFFF" timeline_secondary_color="#ea8400" timeline_secondary_font_color="#ea8400" timeline_primary_font_color="#FFFFFF" timeline_time_interval="0.1"][/audio]

Timeline Plugin Short Sound 2

Timeline secondary label interval usage.

Notes

Coded with WordPress conventions and standards in mind
Clean uninstall method (all database options and files create with this plugin are deleted)
Security checks and sanitization for peaks files creation to prevent malicious data injection
MultiSite friendly
Translatable

Development Status

No extra features planned.

I need more beta testers feedbacks in order to see if the plugin works as expected for a maximum of situations.

Changelog

1.5 (2020-08-02)

Dependencies update (wavesurfer.js 4.0.1)

1.4 (2018-12-31)

Dependencies update (wavesurfer.js 1.2.8 to 2.1.1)

1.2.6 (2017-05-16)

Prevent some errors with AJAX init
Better nonce check

1.2.5 (2017-05-15)

Timeline Plugin

1.2.4 (2017-04-14)

Better compatibility with AJAX
Continuous shortcode attribute for playlist support for the premium add-on

1.2.3 (2017-01-27)

Better internal hooks names

1.2.2 (2017-01-24)

Add marker button on all post types

1.2.1 (2017-01-24)

Marker button data end insertion bug fix

1.2 (2017-01-19)

Performance optimization with better peaks loading logic
MultiSite Friendly
Marker button in Visual Editor
New marker format: hh:mm:ss.ms (minimum field is ss)
Better update checking

1.1.5 (2016-12-22)

Update system performance optimization

1.1.4 (2016-12-21)

Interactive Markers System, for quick jump buttons and interactive transcripts (see options panel)
Peak creation from ‘edit-posts’ capability (better for multi-author website)

1.1.3 (2016-11-29)

Small bug fix

1.1.2 (2016-11-29)

Security: Peaks can now be written only by Admins
Better media preload strategy
AJAX Page loading compatibility

1.1.1 (2016-11-22)

Fixed Playlist behavior.

1.1 (2016-10-22)

Performance: GET request peaks loading instead of PHP
Replace .peaks extension by more standard .json

1.0.1 (2016-10-19)

Performance: GET request for AJAX peaks loading instead of Post

1.0 (2016-09-23)

Initial Release.

License

License are valid 365 days.

Purchase

Purchases are temporary disabled untill these two wavesurfer.js major bugs are fixed :