Wavesurfer js wordpress free#

It defaults to Web Audio API and falls back to HTML5 Audio. Howler.js is an audio library for the modern web. The library creates HTML5 audio element and uses it to play mp3/ogg audio files which is currently supported in all browsers. Loud links is a simple tiny JavaScript library to add interaction sounds to your website. Yes, it’s theme-able audio controller !Īnd 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.JavaScript Libraries for Creating Beautiful Animations 1. To allow further customization, I put all necessary CSS classes, so that everyone can make and share his own theme. 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.

Safe deactivation: if you deactivate the plugin, your shortcode will fallback to the WordPress default audio player.

It supports every audio format supported by WordPress (wav, ogg, mp3, m4a).

You still have the default player in the Visual Editor (not just shortcode).

I decided to override the default audio shortcode. It was clear that the HTML output should be handled the WordPress way: with shortcodes. The second step was to integrate it with WordPress. In resume, that was countless hour of struggling for small details on CodePen. 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. So that was the first step: creating buttons that could control the audio element according to certain output. 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. The HTML initialization render was pretty basic: it just detect audio element and replace it by a waveform, according to certain parameter. Well ok so we have split channels, we basic have HTML initialization… Now it needed to be WordPress friendly. So I write another feature request, and once month later (one month ago), the feature was ready ! 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. This may be powerful in some cases, but for integrating within a WordPress post, it needed HTML initialization. Indeed, all settings, including path to the audio files, needed to be coded in jQuery. That’s was very promising, but it was not enough to be usable for me.

It was maybe the first multiple-channels waveform web audio player available. About one year later, the feature was integrated. More, it was pretty customizable, and modular… two things I really like in a software.Īs soon as I found it, I write a feature request for having multiple channel capabilities.

Wavesurfer js wordpress free#

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. 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. If I want to make a tutorial about 5.1 panning, having only one waveform is not that useful. These are both great players but they lack something: multiple channels display. That’s why I instantly liked SoundCloud player, and later, the Hearthis.at player. But finding this on the web is pretty rare. 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.Īudio waveforms preview is very common in sound processing softwares and in every Digital Audio Workstation. I always loved waveform display for showing audio content. EDIT : WaveSurfer-WP Premium Add-On, featuring cache system for waveforms and interactive markers system, is out!