Hi, love the plugin!

I try to position the play button left of the waveform and I can’t seem to get it to work. The waveform always sits on top of the buttons. Is there something I’m missing?

sorry my css is mediocre

As you are probably aware, WordPress is soon going to be moving to jQuery 3. Currently, this plugin won’t work with jQuery 3. But my own testing suggests that the fix is simple.

In wavesurfer-wp/js/wavesurfer-wp.js, you need to change this line:

$j(document).on('ready ajaxComplete wavesurfer', function(event, request, settings) {

to just this:

$j(function(event, request, settings) {

The good news is that this modification is backward-compatible, so won’t cause any problems on sites continuing to use older versions of WordPress (or using ClassicPress).

I load the audio shortcode via an ajax call. The interface is rendered correctly, but wavesurfer does not appear to initiate.

Calling the below does nothing:

$(document).trigger(‘wavesurfer’);

I looked at https://github.com/X-Raym/wavesurfer-wp-init, but this plugin just generates errors in the console.

How to make wavesurfer work after adding the audio shortcode to the page via an ajax call?

Is there a way to normalise the amplitude of the waveforms?

I have some audio files that are very quiet. As a result, the waveform is almost not visible.
Is it possible to ‘stretch’ the peaks of the waveform such that the maximum height equals, say, 75% (or whatever) of the height of the canvas?

Hi there,

I wonder what should I do to be able to display a spectrogram like in the Wavesurfer demo here : https://wavesurfer-js.org/example/spectrogram/index.html?fill
I am keen about touching the WP code a bit if necessary.
THank you

I added your plugin and tried it with and without additional shortcodes, but the mp3 file just won’t play. It did fine before your plugin, but my friend wanted to show the wave forms. This is only a 35 second audio file. This is how it shows when I inspect using chrome:
<div class=”wavesurfer-player” data-wave-color=”#EE82EE” data-cursor-color=”#333333″ data-progress-color=”#800080″ data-height=”128″ data-url=”https://www.bioncefoxx.com/wp-content/uploads/2020/06/B-Foxx-Landing-Page-Intro-.mp3″></div&gt;

Thank you

I see in google page insight that every audio files is loading twice.

I’ve tried to make some changes in:

before
wavesurfer[i].load(file_url, peaks, preload);
after
wavesurfer[i].load(file_url, preload, peaks);

and that help but not rendered peaks ??

Is it possible to make some changes and not loading every audio file twice on page?

Hi. I try use jQuery function load() to refresh page with wavesurfer plugin and if I call function the I get error :

Uncaught TypeError: Cannot read property 'name' of undefined

$j(document).on('ready ajaxComplete wavesurfer', function(event, request, settings) {
	if (typeof settings !== 'undefined') {
		if (settings.success.name === 'wavesurfer_wp_ajax') return;
	} else {
		WaveSurferInit();
	}
});

In line:
if (settings.success.name === 'wavesurfer_wp_ajax') return;

Using load():

jQuery("#div").load(location.href + " #div");

How i can fix this?

• This topic was modified 4 years, 11 months ago by malepiwo11.
• This topic was modified 4 years, 11 months ago by malepiwo11.

I’m using WaveSurfer in conjunction with WooCommerce Product Table. It works fine, until I load the second page. I get the following error:

Preload parameter of wavesurfer.load will be ignored because:
	- Peaks are not provided

Is there any method I can call to load the waves? It works fine if they’re all in one page, but the rest that is loaded through AJAX won’t load.

Hello ??

i just discover this plugin and (as a musician and dj) i love it, really nice work!
However i am looking for a solution that, while should be easy and obvious, it is missing…

Split Channels to be the default!

I do have a music site were we present hundreds of audio samples (all stereo), there are over 1000 pages, so the shortcode option in each one of those pages is an impossible task!

Can you please tell me if there’s a quick way to make split channels available site-wide, by default?

I did it for the mute and loop buttons, that’s was easy… but on our case i can’t find a way to do it… (i’m a well experienced user but not a developer ?? )

Thanks in advance!

Hi – love this plugin!!

When I use it in the traditional way with a fixed url for the source, it works beautifully. However, I’m having problems when I send a variable as the source.

Here for instance, with pointy brackets, the default player appears, and plays theselected file correctly:

<!DOCTYPE html>
<html>
<head>
	<script type="text/javascript"></script>
</head>
<body>
<div class="player">
       
 
	<audio id='audio_core' src = '' controls ></audio>

	<script>
		var babyname = sessionStorage.getItem("babyname"), mypath="https://myluckyname.com/wp-content/uploads/2019/03/"+ babyname +".mp3", src=mypath,
			audio_core=$('#audio_core').attr('src', src)[0]
		audio_core.load() // <- play the song!!!
        
	</script>
       
      

</div>
</body>

</html>

but when I replace the pointy brackets on the audio shortcode with square brackets:

[audio id='audio_core' src = '' controls][/audio]

your player appears, but there’s no source.

Thank you!!!!!

Hi – love this plugin!!

When I use it in the traditional way with a fixed url for the source, it works beautifully. However, I’m having problems when I send a variable as the source.

Here for instance, with pointy brackets, the default player appears, and plays theselected file correctly:

<!DOCTYPE html>
<html>
<head>
	<script type="text/javascript"></script>
</head>
<body>
<div class="player">
       
       <h1>名字：<script type="text/javascript">
                 var babyname = sessionStorage.getItem("babyname")
                 document.write(babyname)
               </script>
        </h1>
 
	<audio id='audio_core' src = '' controls ></audio>

	<script>
		var babyname = sessionStorage.getItem("babyname"), mypath="https://myluckyname.com/wp-content/uploads/2019/03/"+ babyname +".mp3", src=mypath,
			audio_core=$('#audio_core').attr('src', src)[0]
		audio_core.load() // <- play the song!!!
        
	</script>
       <h2>意義：<script type="text/javascript">
                 var babyname = sessionStorage.getItem("babyname")
                 
               </script>
       </h2>
       <p> 这是根据你的选择而设计的名字 </p>
       <p> 请随意下载音频文件并与家人和朋友分享 </p>
       <p> 我们建议最多选出三个名字，这样你与家人和朋友分享时可以去粗取精。 </p>
        <p><a href="https://myluckyname.com/find-my-english-name/">请点击这里从我们的代理处请求另一个名字</a></p>'

</div>
</body>

</html>

but when I replace the pointy brackets on the audio shortcode with square brackets:

[audio id='audio_core' src = '' controls][/audio]

your player appears, but there’s no source is passed (so the buttons appear, but there is no waveform).

Thank you!!!!!

• This topic was modified 5 years, 7 months ago by hurra03.

So i installed the plugin and echoed the short code in my layout.
The buttons appeared but no waveform and audio. Here is some code to give you a better idea on what i am trying to achieve:

<?php $url = wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); ‘full’ ?>
<div class=”row img” style=”background: url(‘<?php echo $url;?>’) no-repeat center center;”>
<!– <audio controls>
<source src=”<?php echo get_post_meta($post->ID, ‘media_links_download-link’, true); ?>” type=”audio/mpeg”>
Your browser does not support the audio element.
</audio> –>
<?php $audio = get_post_meta($post->ID, ‘media_links_download-link’, true); ?>
<?php echo do_shortcode(‘[audio mp3="' . $audio . '"]‘); ?>

</div>

The basic html5 audio player works.But i can’t manage to do the same thing with the wavesurfer plugin. I am using WP 5.1.1 with a custom built theme. The plugins that i use are: custom post type that i’ve built, theme check, Show Current Template.

Hi there,

I am having issues with the plugin, it was working when I first installed it but now audio does not play and wave forms do not load 80% of the time, only showing a flat greyish bar.

I’ve tried testing on different computers and different browsers, chrome seems to be the only one that sometimes works however not very often…

I am using WordPress OceanWP theme and embedding the audio player in TablePress.

I have reduced the files down to 128kbps MP3 however this has not improved the situation.

I hope you can help with a solution as the plugin is great when it works!

Many thanks

• This topic was modified 5 years, 9 months ago by Ben.

Hey there,

Firstly I want to say what a simple and outstanding plugin!

I am building a massive audio library, the player needs to sit compactly in the table, it would fit perfectly for me if not for the time stamp buttons, which end up sitting below the player causing table rows to extend.

I just want to remove these time stamp buttons to fix the issue but can’t see any options for this in the settings.

Thanks

Bonjour. J’ai installé votre plugin sur mon site WP. Cependant, le player audio ressemble toujours à ce que j’avais avant, c’est à dire le player de HTML5 par défaut. Est-ce que cela pourrait venir d’un conflit avec un autre plugin? J’utilise Gmedia Libraries aussi. Pourriez-vous m’aider s’il vous plait?

Voici le lien de la page créée pour l’occasion:

https://www.migratesound.com/test-audio/

Merci d’avance.

I tried your plugin to replace the native wp player but the waveform is not showing up in categories or any other listing pages. Single download page is working fine via “Add Media”.

Any idea?

Many thanks!

• This topic was modified 6 years ago by Peter023.

Is this plugin still being worked on? Some of the wave sound patterns don’t line up for some reason. Any updates or version bug checks checks would be great.

Trying to change the name of the playlist track files but I cannot find where that info is located or take from? It’s not the file name, or audio track title, alt, etc…

Hi,

Firstly, thanks for this beautiful plugin.

I use it on this website. Click on “Musique Maestro” button to see the player.

The music is loaded well and plays correctly on every browser (chrome, firefox and opera tested)
But waves are only displayed on firefox; sometimes on opera, and never on chrome…

Do you have an idea ?

Hi,
Really happy to find this plugin, exactly what i wanted, look so great, good job.
How can i have “next button” “previous button” … by default instead of placing shortcodes for every post?

Where I can purchase Pro-version or add-ons?

And is it possible to make the ID3 image as background for page or DIV?

Cheers.

firstly, the player works perfectly to start with. my audio loads and the waveform displays etc, then if i activate WooCommerce plugin, or Contact Form 7, the player buttons still appear, but the waveform does not. upon inspecting the elements, the .wavesurfer-player div is empty.

i know the file is loading and accessible since it works, and ive output the file URL as a data-attribute that i can open directly in a new tab and it still works perfectly.

im not sure what might conflict with wavesurfer and the two other plugins so im not sure where to even start debugging.

any help would be greatly appreciated!
-Seth

Use the marker function to jump to a point time to start playing music,
but the “play button” does not change from “Play” to “Pause” automatically

SAFARI compatibility There are some issues,
the safari browser will download the entire audio file, which will allow the site to consume a lot of traffic, especially when a page has a lot of audio files.
CHROME, FIREFOX there is no such problem

This is very pretty and interesting to look at!

There is one issue, though, when playback has finished. Then the Play button says Pause, when it should revert to Play. You need to tweak line 219 of wavesurfer-wp.js so that it reads:

buttonPlay.removeClass('wavesurfer-active-button').html('<span>Play</span>');

Hi,

Any plans to implement a volume control to this plugin?

I would buy for the premium if the plugin had this feature.

Thanks and regards,
Elvis

Hi,
if I have created a long playlist, it would be advantageous to display the current title near the player area. This will also be done in the original player (see Attachement).
Is there the possibility to realize this with the wavesurfer plugin?

Here the scrennshot of backend:
https://abload.de/img/code_screenh8ume.jpg

Here the screenshot of the frontend:
https://abload.de/img/code_screen_frontendcxuvw.jpg

Thank you,
Karl

Really a great job!!
Just a couple of issues (some present even in Samsung S5 browsers):

– Waveforms not appearing in iPhone 4GS browsers and their div doesn’t adapt to screen width.
– List doesn’t show songs data “inline” in browser which do not support css “flex”
– WP shortcodes arguments images=”false” artists=”false” tracklist=”false” are ignored

Thanks for your efforts! This is a very professional concept. Just lower the price of PRO Addon and you will sell more.
Let me know for fixes.
All the best.

• This topic was modified 7 years, 7 months ago by OpenRing.

Hi,
I have created a playlist. Everything works as it should, except for one thing:
How can I prevent the player from automatically jumping to the next song and playing it?
Is there a command “dont play the next song”? If so, what does the command look like?
My demo site here:
https://raudive.de/?page_id=6104

Thanks, Max

Hi, how to adjust the waveform width? Thanks