- 1 Development Story
- 2 Features
- 3 Demo
- 4 Notes
- 5 Development Status
- 6 Changelog
- 6.1 1.5 (2020-08-02)
- 6.2 1.4 (2018-12-31)
- 6.3 1.2.6 (2017-05-16)
- 6.4 1.2.5 (2017-05-15)
- 6.5 1.2.4 (2017-04-14)
- 6.6 1.2.3 (2017-01-27)
- 6.7 1.2.2 (2017-01-24)
- 6.8 1.2.1 (2017-01-24)
- 6.9 1.2 (2017-01-19)
- 6.10 1.1.5 (2016-12-22)
- 6.11 1.1.4 (2016-12-21)
- 6.12 1.1.3 (2016-11-29)
- 6.13 1.1.2 (2016-11-29)
- 6.14 1.1.1 (2016-11-22)
- 6.15 1.1 (2016-10-22)
- 6.16 1.0.1 (2016-10-19)
- 6.17 1.0 (2016-09-23)
- 7 License
- 8 Purchase
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.
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.
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.
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.
||Number (px)||20||the height (in pixels) of the timeline.|
||Number (%)||90||the height (in percent) of the minor notch lines in the timeline.|
||Hex||#000||the color of the modulo-ten notch lines|
||Hex||#c0c0c0||the color of the non-modulo-ten notch lines|
||Hex||#000||the color of the modulo-ten time labels|
||Hex||#c0c0c0||the color of the non-modulo-ten time labels|
||Number (seconds)||number of intervals that records consists of. Usually it is equal to the duration in minutes.|
||Number||number of primary time labels.|
||Number||number of secondary time labels (Time labels between primary labels).|
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
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.
[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_secondary_label_interval="1"][/audio]
- 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
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.
- Dependencies update (wavesurfer.js 4.0.1)
- Dependencies update (wavesurfer.js 1.2.8 to 2.1.1)
- Prevent some errors with AJAX init
- Better nonce check
- Timeline Plugin
- Better compatibility with AJAX
- Continuous shortcode attribute for playlist support for the premium add-on
- Better internal hooks names
- Add marker button on all post types
- Marker button data end insertion bug fix
- 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
- Update system performance optimization
- Interactive Markers System, for quick jump buttons and interactive transcripts (see options panel)
- Peak creation from ‘edit-posts’ capability (better for multi-author website)
- Small bug fix
- Security: Peaks can now be written only by Admins
- Better media preload strategy
- AJAX Page loading compatibility
- Fixed Playlist behavior.
- Performance: GET request peaks loading instead of PHP
- Replace .peaks extension by more standard .json
- Performance: GET request for AJAX peaks loading instead of Post
- Initial Release.
License are valid 365 days.
Purchases are temporary disabled untill these two wavesurfer.js major bugs are fixed :