Several audio players on the same page get their controls mixed up

[Fab1en]

Here is the scenario :

1. publish a post with an audio player reading a single audio file.
2. publish a second post with a playlist containing several audio files.

The issue can be seen on the front page, when both players appear (and when the singe player is below the playlist one). If you click on "play" on the playlist, the first audio file plays correctly. But when the second file is loaded automatically at the end, the controls of the single player gets activated instead of the one of the playlist player. The sound is the right one, but the play/pause button and the timeline of the single player are activated and the one of the playlist player are not.

The bug only happens when the single player appears under the playlist one.

[Fab1en]

Duplicate of #32423.

It appears that this bug is already fixed in trunk.

[Fab1en]

I still think that something should be fixed here.

When I look at the JavScript source code, I see that the _wpmejsSettings global variable is copied into a local settings variable. But then, settings.success is changed so _wpmejsSettings.success is also impacted. Assigning a variable to an object only assigns the reference, and does not copy the entire object. In the following patch, I propose to use the undescore utility _.clone to get a fully private copy of _wpmejsSettings before assigning it to the local variable.

[34346] only fixes this bug because it changes the execution order, but the root cause is still there.

[swissspidy]

In what ways is 34152.patch​ related to the original report? It'd probably be easier to open a new ticket for it if it's not really related.

[Fab1en]

34152.patch​ is fixing the bug reported here and the one reported at #32423 without the need of [34346]. But [34346] is also apparently fixing it. But I think this bug is not fully fixed yet, and need some reconsideration.

The issue is that _wpmejsSettings is used by each MediaElementJS instance. The variable is stored locally so it seems to be fine, but in fact each player instance will modify the global_wpmejsSettings variable. Then, you have a race condition that shows the bug in some rare conditions.

[fimion]

I am actually having this precise issue on a site I am working on. I have an audio book sample from an [audio] tag, and then a [playlist] for an album. The audio book sample will play and then will start track 2 from the playlist when it is done.

Also, if you try to play anything from the playlist, you lose the ability to play the audio book clip.

see here: ​http://harrisonlong.net/media/audio/

Version 4.4.

34152.patch​ Seems to have fixed my issue.

[swissspidy]

wp-mediaelement.js does not use Underscore.js, therefore _.clone can't be used there reliably.

But jQuery is available, so we could use something like settings = jQuery.extend( {}, _wpmejsSettings ); (shallow copy) or settings = jQuery.extend(true, {}, _wpmejsSettings );.

[Fab1en]

Use jQuery instead of Underscore to clone the settings object when needed

[Fab1en]

I updated the patch to use jQuery instead of Underscore in wp-mediaelement.js. In wp-playlist.js, Underscore is already used elsewhere, so _.clone is safe to use.

@fimion, could you test this new patch and see if it works like the previous one ?

[fimion]

It works. Thanks!

[wonderboymusic]

In 36364:

Media: When reusing the initial values from the global MediaElement config object, the config object should first be cloned. Objects in JS are references that will retain any changes. This fixes an issue where player controls could get mixed up between instances when multiple players (namely, single audio and audio playlists, in a certain order) are on the same page.

Props Fab1en.
Fixes #34152.