Speed Button Working Only After Play Is First Pressed

[KieranM55]

Hi Lewis,

Still loving your plugin, makes my Guitar Practice website so powerful - I just wanted to ask if you know if there is a way around this.

Currently, if you press a speed (e.g. on my website I just have 60/70/80/90/100%), it highlights in red, then you press play, but it always still plays at the default speed (100%). After you've hit play the first time on a song, then the speed buttons do work (I just press the same speed button again).

I'm hoping there might be something I could change, so that each speed button will work prior to hitting play, if you know if this is possible at all?

Thanks very much! Kieran

[Lewiscowles1986]

Hi @KieranM55,

Are you sure this is not interference from an on-click handler from any other plugin?

If you are sure, can you share with me a HTML, JS, CSS snapshot of a page this is happening on and zip them up, attach in a comment.

Solving bugs can often be an issue of reproducing the exact steps. I have tested this in the latest version of WordPress, an the latest release of the plugin and cannot reproduce needing to click twice for the built-in classical shortcode based version, or the block-based HTML5 (custom controls).

Seeing the HTML, CSS & JS should allow me to take a look when I have time and advise what is messing up.

Best.

[KieranM55]

Essendon Guitar HTML.zip

Thanks Lewis for your fast response.

Not using any plugins that affect clicking at all to my knowledge.

I've attached a Zip file with all of the HTML of an example page - if it's easier and faster, I could email you a login to my site to have a direct look yourself?

Let me know what you think, thanks very much for your help!

[Lewiscowles1986]

Hi Kieran,

I Just happened to be online when you messaged 😄 . The zip only has the HTML, not the CSS or JavaScript I asked for (the one from my plugin should be a separate file).

Please see the attached screenshot from Google Chrome Webpage, Complete automatically gets all the CSS, JS, Iamges; and you can then zip the folder and attach. Otherwise I will be unable to help. I Certainly cannot login to your site.

[KieranM55]

Hi Lewis,

Apologies, adjusting your playback speed options in Wordpress is the absolute limit of my backend website skills.

I've saved a page from my website as 'Webpage, Complete' as you suggested in Chrome, and attached here in a zip file - I hope this is the one you need?

When I said login to my website - I meant as a user just to see the front end (try out a guitar riff or 2?), not to login and edit the Wordpress.

Thanks again, Kieran

Practice Portal - Playback Speed Example.zip

[Lewiscowles1986]

Hi Kieran,

I am going to have to close this.

Here is a minimal (and I mean bare-bones) example https://codepen.io/Lewiscowles1986/pen/gORPjmx

I removed some style attributes so I could click play without adding an entire custom UI, only brought in the parts of the CSS, HTML, JS my plugin generates and needs based on the html file you sent over.

As a side-note, the file references a Practice Portal - Playback Speed Example_files directory. That should have been in the zip, although I was able to work around it because my plugin is so small. Others may not be so willing or able. I saw this by-chance at a weekend and had a spare day off.

From what you have sent me I cannot reproduce which plugin is causing interference, but you really need to test that by:

1. turning each plugin and theme off (themes you just switch to one like twenty twenty one);
2. when the problem goes away, experiment with which plugins or themes (maybe a combination of both) creates this behavior.

Once you have done that, I would love to know the problem plugin or theme; but there likely isn't a lot I can do about it, as it's their code, not mine causing the issue. I Had hoped it might be the data-value="0.9" missing somehow, but it looks like it is there for all the speeds.

Email or raise a ticket with whoever created the problem plugin or theme to explain it is interfering with others plugins.

[KieranM55]

Hi Lewis,

Firstly - greatly appreciate your time looking into this, sorry for my naivety, but I was hopeful it might be something simple I'd missed that you'd know about and could help with quickly.

I've followed your advice and tried changing themes, and disabling all plugins - no luck yet the issue is still there in every instance so far, so it must be something deeper from another plugin or part of my wordpress site that is unfortunately well beyond my skills to find.

The speed buttons still work well though, and we just have the case of pressing play first which we communicate to everyone anyway.

If you did have a donation page/premium version I'd be more than happy to contribute, as your plugin has been a huge part of our site.

Thanks again, Kieran

[Lewiscowles1986]

Hi Kieran,

Thanks for the kinds words bud.

To confirm, this is not so much needing to click-twice, but needing to change speed after playback starts on your site, or both?

See https://wp.dh.codesign2.co.uk/?p=34357 for a site that is fully up to date, and using this feature. It's one of the places I manually test this plugin.

I Just logged in and found the post where I knew I had this, then checked that setting speed; before clicking play works for me, and alters the speed; which I totally understand does not fix your problem, but should show that this can be done and should work on a fairly vanilla WordPress.

There is also https://wp.dh.codesign2.co.uk/testing-page-playback-speed/ where annoyingly the playlist plugin seems incompatible with newer wordpress CSS for centering, but otherwise everything seems to work well. This shows a mix of HTML5 and old-style playback speed, and uses custom HTML to make buttons that control the entire page.

The reason I am providing these examples, is a bit like how you might try to show someone if they were not picking up a piece of music. By providing examples, it's my hope I can help you lightbulb to "this is why" and then fix.

[KieranM55]

Thanks Lewis for further follow up - that's correct, it's the fact that I have to hit play first, for the speed buttons to actually affect the speed (if pressed before play, the speed clicked highlights in red, but doesn't actually change the speed unless play has been clicked and then you click the speed again - which is tricky as students believe they are playing something slower, although it stays at 100% - and again, not your coding error but something I've missed which is causing the issue).

Although on your test site - https://wp.dh.codesign2.co.uk/testing-page-playback-speed/ - I'm actually getting the same issue when I click specifically on the CD2 media player with the single audio file - it is not affecting the speed if I click any of the speed buttons before hitting play (all other files are working correctly) - I've highlighted which one I'm talking about in the attached picture - does this happen for you as well?

I've also just tested my site in Firefox, Chrome and Edge - and the speed buttons aren't appearing at all in Firefox, but do appear in Chrome and Edge - again likely an issue with my site specifically, but just thought I'd check in case you had noticed any similar issues with Firefox at all?

Appreciate your further time!

[Lewiscowles1986]

Hey Kieran,

does this happen for you as well?

It doesn't. Can I find out more about your computer?

Mac or Windows Which versions of Firefox, chrome, edge did you use?

Do you think you'd be able to export the browser console, or is this gobbledegook?

[KieranM55]

Hey Lewis,

OK really interesting, I use windows - HP Omen 15 laptop.

I googled how to export the browser console, and have attached my website data in a zip here from Chrome Version 93.0.4577.63 on my PC - www.essendonguitarpractice.com.au-Chrome Console Logs.zip

I just tested your same site - https://wp.dh.codesign2.co.uk/testing-page-playback-speed/ - on Chrome, Edge, Firefox on my laptop, and on my phone with Chrome - all providing the same issue I'm describing, the speed button doesn't affect the speed, until after I've clicked play - but only for that 1 audio file on your site - the video speed button does work before hitting play.

I also have meant to mention - that every one of my guitar students has the same issue with the speed button for our site - so a mix of tablets, PCs, phones, Mac etc. and everyone always has to click play first.

Keen to hear your thoughts, let me know if there's anything else I can provide to help too, and super appreciate all your help!

[Lewiscowles1986]

Hmm... Still working for me, but can you try something for me?

Try the red buttons at the top for page-wide playback speed before that audio, and let me know if they work before hitting play.

[KieranM55]

Yes, when I use the red buttons at the top before hitting play, they do affect the speed, same as the playlist on the left, the only one I've found that doesn't work before hitting play is the single audio file in the middle.

Hope that helps.

[Lewiscowles1986]

Hi Kieran, You've been an amazing sport. I've just released a new plugin version which simplifies this and may solve your issue.

I'm getting playback speed buttons in FireFox, but I was finally able to reproduce by using a debugger and manually editing code from the plugin. I Think if 1.2.0 release works well for you I'll issue a 1.2.1 soon after to mitigate loading problems, which it seems are network speed related.

[KieranM55]

YES!!!!! It works for me with every test, all browsers (including appearing for Firefox now as well), PC and mobile phone - thank you so much!!!!

I'm using WP Fastest Cache plugin - that I turn off any time I do updates - and the speed seems all good for me, the site loads fast even with loads of audio files like I have.

Thanks so much Lewis this will make a massive difference for our students I really appreciate it - I hope you have a contribution page or a premium version or something so I can send through some appreciation?

[Lewiscowles1986]

Great news. Thanks so much. I Don't right now, but feel free to pass on the good will; rate the plugin 5 stars; star on GitHub; write a guide on using it, or setting it up with WordPress, and share the link. 🙌

[KieranM55]

Fantastic, I rated the plugin on wordpress last year, have starred it here, let me know if there's anywhere else I could review it as well, your guide to edit the speeds is definitely what helped me as well as the only one I needed, thanks again!