Make WordPress Core

Opened 9 years ago

Closed 8 years ago

#34152 closed defect (bug) (fixed)

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

Reported by: fab1en's profile Fab1en Owned by: wonderboymusic's profile wonderboymusic
Milestone: 4.5 Priority: normal
Severity: normal Version: 4.1
Component: Media Keywords: has-patch
Focuses: javascript Cc:


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.

Attachments (2)

34152.patch (1.1 KB) - added by Fab1en 9 years ago.
34152.2.patch (1.2 KB) - added by Fab1en 9 years ago.
Use jQuery instead of Underscore to clone the settings object when needed

Download all attachments as: .zip

Change History (12)

#1 @Fab1en
9 years ago

  • Resolution set to duplicate
  • Status changed from new to closed

Duplicate of #32423.

It appears that this bug is already fixed in trunk.

#2 @Fab1en
9 years ago

  • Keywords has-patch added
  • Resolution duplicate deleted
  • Status changed from closed to reopened

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.

9 years ago

#3 @swissspidy
9 years ago

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.

#4 @Fab1en
9 years ago

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.

#5 @fimion
9 years ago

  • Keywords needs-patch added; has-patch removed

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:

Version 4.4.

34152.patch Seems to have fixed my issue.

Last edited 9 years ago by fimion (previous) (diff)

#6 @swissspidy
9 years ago

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 );.

9 years ago

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

#7 @Fab1en
9 years ago

  • Keywords has-patch added; needs-patch removed

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 ?

#8 @fimion
9 years ago

It works. Thanks!

#9 @SergeyBiryukov
9 years ago

  • Milestone changed from Awaiting Review to 4.5

#10 @wonderboymusic
8 years ago

  • Owner set to wonderboymusic
  • Resolution set to fixed
  • Status changed from reopened to closed

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.

Note: See TracTickets for help on using tickets.