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! This kind of thing would be pretty easy to turn into a plugin. It’s also looking like I’ll be able to work more with our music department to think through online course on music so possibilities like this will be very useful. Playing with it gave me all sorts of ideas (including possibly using it as part of of the upcoming Reclaim Your Dance Party // API + Audio = (beats, visuals, internet, participate) session at Domains 17 with Grant and Brian). You could get more and more complex from there. If we stacked several tracks vertically the visuals would quickly point out content variation in terms of timing and total composition. I find the ability to highlight track elements visually and access specific segments to be a pretty powerful combination. I found WaveSurfer.js this morning and just a bit later I had a functional example. In this case, it’s meant to provide a visual and auditory way to play through interview segments that represent different categories of responses. I needed to make a quick proof of concept for the annotation of audio on the web. See the Pen wave surfer – waveform by Tom ( on CodePen.
0 kommentar(er)
