Change 881014 had a related patch set uploaded (by MusikAnimal; author: MusikAnimal):

[mediawiki/extensions/Phonos@master] PhonosButton.js: Add hook to allow scripts to mute Audio object

https://gerrit.wikimedia.org/r/881014

Would there be any problem with passing the PhonosButton rather than the audio element? If a script wanted to modify the interface, e.g. providing a button to toggle the speed, this hook would be of little help.

In T327226#8533515, @Nardog wrote:

Would there be any problem with passing the PhonosButton rather than the audio element? If a script wanted to modify the interface, e.g. providing a button to toggle the speed, this hook would be of little help.

Hmm, we certainly could, but I'd worry about how fragile the scripts would become. It would seem quite easy for us to unknowingly break user scripts and gadgets if we expose the whole PhonosButton object. Not that an adept JS programmer would make any future-disproof assumptions, but I feel like if we're providing an API it's on us to ensure it's stable.

You should still be able to add a UI element, if you wanted. All Phonos buttons have the .ext-phonos CSS class, so it should be easy enough to loop through and make whatever desired UI changes adjacent to the button, for example.

Just my opinion! I think if enough people want to control playback speed, we should implement it in Phonos itself.

I think for any hook we should ideally have two or three uses in mind when we add it. If there's only one purpose of this (modifying playback speed) then I think we should look into adding that properly. Alternatively, maybe a more general hook would be better, allowing users to e.g. replace the PhonosButton with their own subclass of it? Or, maybe something more like the currently proposed hook but located in PhonosButton.getAudioEl(), where it can still add a listener on the play event but also all others.

One consideration might be that we don't want to expose OOUI to hook users, but exposing standard JS API stuff (like an Audio object) is fine.

If the handler receives audio, it can just do audio.addEventListener('play', ...), so the hook firing it on every playback seems overkill. A hook in getAudioEl() makes sense to me, because even though you can access the PhonosButton object through OO.ui.infuse(), audio doesn't become available until after user interaction. I also wonder if an OOUI event (e.g. emit('audioready')) is better suited than mw.hook().

Sorry for the long delay! I was tied up with Survey madness. The patch is now ready for re-review, this time using a hook called ext.Phonos.audio that is PhonosButton.prototype.getAudioEl() as suggested.

Change 881014 merged by jenkins-bot:

[mediawiki/extensions/Phonos@master] PhonosButton.js: Add hook to allow scripts to mutate the Audio object

https://gerrit.wikimedia.org/r/881014

Docs: https://www.mediawiki.org/wiki/Help:Extension:Phonos#JavaScript_integration

@MusikAnimal Playback speed was slower when adjusted to 0.5. The lowest I got for playback was 0.1. For fun, I tested at 3.5 speed which was fast as expected. What is the range of the adjustment speeds by the way? When I put a negative or an extra decimal place, it reads it as normal. Also when I disabled JS, it played back normal. The only time it didn't adjust from the playback speed was on an en-rtl, which is probably as designed but just wanted to make sure with you first. If it's ok than I'll move it to Done, unless you wanted me to test something else on it.

OS: macOS 13.0; Windows 11
Browsers: Safari 16.0, Chrome 110, Firefox 110, Edge 110
Skins: Vector 2022, 2010, Minerva, MonoBook, Timeless
Environment: Beta
Speeds tested: 0.5, -0.5, 0.05, 3.5. 0.1
Test links: https://en.wikipedia.beta.wmflabs.org/wiki/Phonos_testGM
https://en.wikipedia.beta.wmflabs.org/wiki/Phonos_RTL

en-RTL - Played normal speed even when playback speed was adjusted.
https://en-rtl.wikipedia.beta.wmflabs.org/wiki/Phonos_RTL

The rate change works for me on en-rtl too. Note the visual indication of progress with the animated background doesn't change even if you set playbackRate.

Change 894727 had a related patch set uploaded (by MusikAnimal; author: MusikAnimal):

[mediawiki/extensions/Phonos@master] PhonosButton.js: sync progress animation with playback speed

https://gerrit.wikimedia.org/r/894727

In T327226#8658835, @GMikesell-WMF wrote:

…
en-RTL - Played normal speed even when playback speed was adjusted.
https://en-rtl.wikipedia.beta.wmflabs.org/wiki/Phonos_RTL

In T327226#8659345, @Nardog wrote:

The rate change works for me on en-rtl too.

Same for me. Can you double-check, @GMikesell-WMF? I don't know how the language (RTL or not) could effect the playback.

Note the visual indication of progress with the animated background doesn't change even if you set playbackRate.

Good point! I didn't notice this. I just submitted a new patch that should fix this.

But we're not officially supporting changing the playback rate, are we? I thought it was just one of myriad things you could exploit the hook for. So it makes little sense to me to single out playbackRate and prepare for its being modified, when there are countless other things the hook may be used for that make the default behavior unexpected.

I believe the right path is for the hook example to attach its own canplaythrough handler and override animation-duration (e.g. double it if playbackRate = 0.5).

In T327226#8673277, @Nardog wrote:

But we're not officially supporting changing the playback rate, are we? I thought it was just one of myriad things you could exploit the hook for. So it makes little sense to me to single out playbackRate and prepare for its being modified, when there are countless other things the hook may be used for that make the default behavior unexpected.

We could officially support it! Through the hook, that is. I see your point, but I don't see any reason not to accommodate playback when calculating the animation, either :) That is what prompted the creation of this hook, after all. Let's see what the other engineers have to say.

Change 894727 merged by jenkins-bot:

[mediawiki/extensions/Phonos@master] PhonosButton.js: sync progress animation with playback speed

https://gerrit.wikimedia.org/r/894727

@MusikAnimal Playback animation is now synced with the playback speed. I did come across an issue under the Monobook skin. It looks like the word boxed line got a little crazy as seen in the screenshot below when you click on it.

Test links: https://en.wikipedia.beta.wmflabs.org/wiki/Phonos_testGM

In T327226#8681371, @GMikesell-WMF wrote:

@MusikAnimal Playback animation is now synced with the playback speed. I did come across an issue under the Monobook skin. It looks like the word boxed line got a little crazy as seen in the screenshot below when you click on it.

Test links: https://en.wikipedia.beta.wmflabs.org/wiki/Phonos_testGM

I was only able to reproduce that issue in Chrome, FYI. Anyway I'm quite certain it's unrelated to this task. Please feel free to create a new task if you want. Thanks!

@MusikAnimal I created T332076: Phonos: Box around the phonos word that's playing is uneven in the Monobook skin for the issue above. With the playback animation being resolved and not experiencing any other issues, I will move this to Done. Thanks!