congrats on this release. It looks really great. I will try it on my blogs

Can this plug in be made to work with [playlist] shortcodes as well?

Thanks for the quick reply! I am building a WP site where members will upload multiple audio files into a playlist. It would be nice to stylize them with your plug-in.

Hi nice player Respect ! one problem when write a comment and ADD audio file you player not work to this file, when i add file from admin panel work grate ?

Playlist is now avaible in v2.1 🙂

Hi !
I invite you to go on WordPress forum for support.
https://wordpress.org/support/plugin/wavesurfer-wp
Describe what you did (shortcode) and what was the expected behaviou (aka, what doesn’t work precisyly (controls, waveform display, mouse cursor hover, colors…).
From what I can see, it works, both chrome and FireFox.

I don’t understand, are you using audio shortcode inside comments ? As far as I know, this is not a native WordPress feature.
(I guess you use :
https://wordpress.org/plugins/comment-attachment/ )

You sir are a genius for creating this!

one big problem though, the player will not work if Visual Composer plugin is installed. I spent hours trying to figure out why the player wasnt showing up…..So i uninstalled visual composer and it showed up on the next refresh.

I think its something with the code, because I wasnt even using any Visual composer elements. If you could please please fix this I would be the happiest person in the world!! lol….do you take donations?? 🙂

Thanks you a lot 🙂
Well the hardest part was made by katspaugh, he build the script that convert audio to waveforms, I’m personnaly taking care of the WordPress Integration (which is not that easy, in fact ^^).
Donations are welcome, it could really help me put more time into this. The link is in the sidebar, “Show your Love” widget 🙂
Thanks again for your consideration about my work !! Very stimulating.

I will definitely donate!

still having problems….it works fine on my ‘live’ site, but not in the ‘staging’ site. So im going back and fourth between the two trying to find the culprit. It sucks cause Im actually much further along w/ development in the staging site then I am in the ‘live’ site.

the update VC trick didnt work on the ‘live’ site 🙁

Hmm can we continue this discussion on WordPress.org support (link at the bottom of the article ?)
It will be easier.

The problem is that I don’t own VC so I can’t test :/
But as long as it can output audio shortcode without modifications it should work.. Can you please makes screenshots, give all infos etc so thay O can try to estimate what doesn’t work ?
Also update all your plugins and WP.

Waveforms are drawn using the canva element. As far as I know, this could only be style using Javascript.
http://www.w3schools.com/tags/canvas_fillstyle.asp
https://github.com/katspaugh/wavesurfer.js/issues/415

Basic exemple : http://codepen.io/X-Raym/pen/KVaoOg

woooooo!!!! brilliant!

You can take the gradient related functions and variables and put them on top of the Wavesurfer object creation 🙂
Here is how (on the version of the script similar to the last one, 2.1.1)
http://codepen.io/X-Raym/pen/dGNqzL
Check line 44.
I didn’t put conditions to make it load the gradient from the HTML, here they are hard coded do give you an exemple.

Waveforms should appear right after the file finish loading.
Do you have any link to share ?

It works perfecty here
https://monosnap.com/file/WfmhfF2h3i4dScTh26fGDDyMqLdxS2.png
Both chrome and firefox, Windows and Mac =/
What is your config (browser version + os) ?

Windows 7. IE 11.

I was thinking it was browser related. Unfortunately, this #$%^^ computer doesn’t want to let my Firefox or Chrome work today for me to test other browsers……

yea… about half of the time it wont load until you refresh the page.

in safari i can’t get it to load at all

I am making a bit of research, and I succeed to make my page load with ajax thanks to a WordPress plugin called Advanced Ajax Page.
The author propose a solution for this kind of case (js loaded but not run again after an ajax called).
It is a solution special for this plugin : put the code inside a function, function that is triggered when the ajax is called.
I had the same problem without this reload-code thing, and it works after.
So, from what I can see so far, only a custom solution based on how your page are refreshed can work, and it is up to your system provider (the author of the plugin/theme who wrote your ajax transitions) to propose a solution, some bridges so that functions can be triggered when the page refresh.
I’m still investigating, but it is what I found so far.

Have you tried my AJAX fixed ? If it works for you, I will put it in next WaveSurfer-WP update.

Try this JS https://gist.github.com/X-Raym/bff45ba8748a9be374f7
Replace the old one by this one and have a test.

all the buttons are there, it does the green bar load thing….then vanishes.

sorry for all the comments, i dont want to be a pest, but I forgot to mention that its in 2 wave mode now….(with the recent ajax friendly code). How do i get back to single waveform?

yea that was the issue. It wasnt HTTPS but it was the staging site (myftpupload). When i use the regular address it works fine in both safari and chrome! so thats solved.

just this one last issue of the double waveforms. every instance now loads 2 wave forms, with one set of controls, each waveform is on its own independent time line…..its actually really cool lol, but i need to get back to just the one wave… can u help?

thanks again man…you are the best.

Nice to see that the problems vanished one after the other, I wish the integration was more simple (it works with basic http request), but well… It can work !
So, if the the problem doesn’t come from the shortcode, then I’m a bit surprised, cause it is not the default behavior.
Any link to share so that I could inspect the html ?
And the code pasted in the post editor ?
Also, did you mod something in the JS ?

Ok ok that’s why, simple to fix then
From the new JS, replace

splitChannels: true (which came from the gradient)

by

splitChannels: split

And be sure you have

var split = container.attr(‘data-split-channels’);
(with the split conditions below)

On top of the init.

Sorry to ask but are you sure it is the code you have on your live website ? It seems to work here (just copy pasted), as you can see, waveforms are not split, if there is no data-split-channels attribute in the html.

http://codepen.io/X-Raym/pen/KVWaBw

Maybe it is a problem with your shortcode can I see it ?
Also, you didn’t change the PHP right ?

(your gradient is suprising… :P)

try the code i sent u above in an a wordpress enviroment. for some reason it doesnt do the double thing in codepen….but in wordpress it does.

i did a complete re-install of the plugin and only changed the .js file and the doubles showed up again…. im gonna look through it…im sure i’ll find the reason

i tried switching the “split:split to split:true” and it generated 4 waveforms. For some reason its automatically creating 2 independent waves for each song.

here is what it looks like on my staging page

I know what is the problem but I don’t have solution cause i don’t why.
The problem that is is not stereo waveform, it is two “one channel” waveform one into others. There is two canva element: but it should be one one.
That why when you say Split it goes up to 4.
Let’s try to find why…

thats so wierd….. it only happens when i add the new ajax code….. when i use the default code that came w/ your plugin download…everything works fine. hmmm

ok that fixed the double waveform….but killed the ajax

yep.that was that.
Sorry but we can’t continue on this discussion page, I can’t manage support easily on a single page like that.
Please join me here https://ide.c9.io/x_raym/temp
I don’t have a lot of time but we will try somethings

Or maybe this one :
$j(document).on(“ready ajaxComplete”, function() {
if ( $j( “#wavesurfer-block-1” ).find(‘canvas’).length == 0) {
WaveSurferInit();
}
});

I’ll send you an e-mail !

It may be possible,
But I don’t plan to do it, as it would involves more complex stuff that I intented
(a way to push the +1 to the database, a way to organize the datas in the database, and a way to recall them).
That’s out of my todo list, at least for the moment.
Maybe consider a more social oriented player for this kind of stats (soundcloud, hearthis), or using a plugin that could have download count if you don’t plan to have thousands of sound download (I use Download Monitor :
https://fr.wordpress.org/plugins/download-monitor/screenshots/ ).

cant we change the height and width of this player

I have some short MP3 files for a free study program but they aren’t working. Any fixes for this? I’m using the WordPress plugin. http://agreatdream.com/phrases/

I’d suggest two changes:

1) A setting to allow wavesurfer to play before the entire file is loaded.

As per:https://github.com/katspaugh/wavesurfer.js/blob/master/README.md (FAQ)

Can the audio start playing before the waveform is drawn?
Yes, if you use the backend: ‘MediaElement’ option. See here: http://wavesurfer-js.org/example/audio-element/. The audio will start playing as you press play. A thin line will be displayed until the whole audio file is downloaded and decoded to draw the waveform.

2) Allow just a single black-triangle-on-white-square play button instead of any other buttons, like the older style of wavesurfer.

Thanks, we’ll go for the CSS.

What are the drawbacks you speak of?

Hi! Great plugin.
I have one quastion about it: how to Disable Simultaneous Play sounds on one page in WP?
Thanks!

This plugin is working great! Thank you.
Please could we add the option to pause other players?

Thanks for the update; it does now play right away, but the waveform is missing for some reason and does not seem to generate consistantly.
http://stephanieallen.ca/living-your-life-mission/an-interview-with-cftafm-dorothy-becker-deanne-fitzpatrick-frank-allen/

Hello! I like a lot your player, It’s brilliant actually… But I have one question. On the wordpress you present it even as radioplayer. I have a radiostation and i want it for this. Made the install, all good, added the shortcode with the link and…nothing! i must say that the link is in this form http://url:port/trance …where the trance is mointpoint, using icecast2. Can you help me with this?

Maybe try ZoomSounds plugin for livestream :
http://codecanyon.net/item/zoomsounds-neat-html5-audio-player/4525354

Hi !
Having pre cached peaks would be possible without having to set any shortcode argument.

WavePlayer, a premium plugin released after WaveSurfer-WP and based on wavesurjer-js too, can handle cached peak generation at file upload, peak regeneration from files in media library, and peak loading.
http://codecanyon.net/item/waveplayer-a-wordpress-audio-player/14349799

I wish I could add these feature but I don’t know how to do it. Maybe WavePlayer could fit your needs better then.

You can mod the .js to add your offset.
This player doesn’t offer fade-out functionnality, (maybe it can be moded).

Sorry for the trouble, the “radio” was completly misleading, I was thinking about Radio Show who wnat to share Replays/Podcast of their shows, not real time audio streaming.
Wavesurfer-WP only works with simple files. For audio stream, you will have to use another plugin.
Good luck 🙂

WaveSurfer-WP works with the audio and playlist shortcode, and with attributes describe on the plugin page. If your reference plugin used these, then wavesurfer-WP maybe be compatible.
Please note that WaveSurfer-WP is free so you can make any test you want.

Hi,
Track names is supported on playlist shortcode, and not in regular audio shortcode, just like the regular WordPress shortcode way.
Please check WavePlayer plugin if you need musical ortiented player with ALbum Art etc..

As title is not displayed on defautlt shortcode, I assume that it shoudln’t be displayed by default, to avoid unexpected behavior.
Maybe a title=”true” attribute could be added, as well as a user preference. TItle could be Created from Attachement name (not from mp3 tag) and displayed over the player. I suppose a hn title would be more semantic, but this means that the users should have a way to customize title level. Probably with another user setting. Optionnaly, default style for this title should be added in the differents stylesheet provided. So maybe a title=”*level*” kind a thing, targetable via CSS with class (cause the level can change).
You understand now how ‘basic feature’ can lead to a lot of consideration. 😛

I don’t consider this at this time, but maybe later, when I will have more time to dedicate to my free open source work!

Sir I Add download_button=”true” In Short Code Exmaple [audio mp3="http://www.example.com/file.mp3" download_button="true" ] But Downloading Button Not Working

It works only on wordpress??

Hello,
I use the WaveSurfer plugin already on my site. It’s a reall powerfull Plugin, great Work!
But I have difficulties with inserting the script “Timeline”.
Or can’t this script as a general rule not be integrated at WordPress?

So my Question if yet:
Can you modify the data accordingly, of course against payment?

Thx, Karl