Dealing with the clickTrack event in wp-playlist.js in order to display audio download link on the playlist title row

I read this thread here that offers a filter for changing MediaElement.js settings in WordPress, and I am looking to do something similar only I don't need to target all of the MediaElement.js script, only the wp-playlist.js (and probably wp-playlist.min.js).

The reason is because I am trying to add a download link to audio files in a WordPress playlist while keeping it on the same row as the title and file duration. I followed the steps in the previous thread and was successful in getting the same results. However, the answer by birgire included a suggestion for further customization in which he said:

You might also consider enqueuing your own version of the wp-playlist.js file where you replace:

'click .wp-playlist-item' : 'clickTrack',

with for example:

'click a.wp-playlist-item-caption' : 'clickTrack',

to be able to have the download link in the same row as the song title.

Unfortunately, I am not an coding expert and my attempts at enqueuing the wp-playlist.js file ended up (1) having either no affect or - sometimes - (2) breaking the playlist in place or (3) breaking the whole website.

I did consider playing with the css code in the playlist template but found it to be a hassle. It will work, with time and trial and error, and I am not saying it's not worth the time and effort, but (despite my limited experience) I feel that there must be a very simple filter or function that can achieve the same result.

So, to rephrase my question: Can the core wp-playlist.js events be modified in a child template or plugin using a filter? If yes, how?

And specifically, can the css class in this event 'click .wp-playlist-item' : 'clickTrack', be modified with a filter? If yes, please outline how.

Thank you for your time and patience.

Topic playlist audio filters Wordpress

Category Web

1
answered at

Update: I found a super simple solution to my question several hours after posting it. It turns out a filter is not needed at all.

Adding onclick='event.stopPropagation();' to the download link is all that is needed. It will allow for putting the download link on the same title row without affecting the ability to change tracks when the title is clicked.

This means that the custom playlist offered by birgire can be modified so that the link looks like this:

<!-- BEGIN CHANGES -->
<a href="{{ data.src }}" class="wpse-download" download="" onclick='event.stopPropagation();'>Download</a>
<!-- END CHANGES -->

And it can now be safely placed in the div.wp-playlist-item selector (and everything can be styled per preference). Clicking on Download will trigger the download, and clicking on a track title will start the player (as it is supposed to do). No filters or js enqueue needed, and the core wp-playlist.js file does not need to be disturbed! :)

About

Geeks Mental is a community that publishes articles and tutorials about Web, Android, Data Science, new techniques and Linux security.