I need a link to enable downloading of each audio file item within the native wordpress playlist.

I've used the script from this thread >> Download button for wp audio player

but there isn't the ability to ask questions of the poster. I've just used the bottom script by Dave Romsey and placed it in a custom script plugin. Have I missed something by doing this? This produces a download icon on the right of the playlist item, has a hover state, but simply starts the playlist item when clicked.

<script>
/**
 * Our custom playlist template for mp3 download`.
 */
function wpse_141767_wp_underscore_playlist_templates() {
?>
<script type="text/html" id="tmpl-wp-playlist-current-item">
    <# if ( data.image ) { #>
    <img src="{{ data.thumb.src }}"/>
    <# } #>
    <div class="wp-playlist-caption">
            <span class="wp-playlist-item-meta wp-playlist-item-title">&#8220;{{ data.title }}&#8221;</span>
            <# if ( data.meta.album ) { #><span class="wp-playlist-item-meta wp-playlist-item-album">{{ data.meta.album }}</span><# } #>
            <# if ( data.meta.artist ) { #><span class="wp-playlist-item-meta wp-playlist-item-artist">{{ data.meta.artist }}</span><# } #>
    </div>
</script>
<script type="text/html" id="tmpl-wp-playlist-item">
    <div class="wp-playlist-item">
            <a class="wp-playlist-caption" href="{{ data.src }}">
                    {{ data.index ? ( data.index + '. ' ) : '' }}
                    <# if ( data.caption ) { #>
                            {{ data.caption }}
                    <# } else { #>
                            <span class="wp-playlist-item-title">&#8220;{{{ data.title }}}&#8221;</span>
                            <# if ( data.artists && data.meta.artist ) { #>
                            <span class="wp-playlist-item-artist"> &mdash; {{ data.meta.artist }}</span>
                            <# } #>
                    <# } #>
            </a>
            <# if ( data.meta.length_formatted ) { #>
<div class="wp-playlist-item-length"><span>
        <a href="{{ data.src }}"><i class="fa fa-download" title="Download" aria-hidden="true"></i></a>
    </span>{{ data.meta.length_formatted }}</div>
            <# } #>             
    </div>
</script>
<?php
}
</script>

but, as mentioned (and within that thread), the icon doesn't start a download, it simply activates the play function of the playlist item. I've tried moving the download icon section below the div (I'd still like it in it's original position if possible) to hopefully move the span outside of the div to remove it from the play attribute that everything inside that div obviously activates but this just opens the mp3 file in a new browser window:

<div class="wp-playlist-item-length"><span>
        <a href="{{ data.src }}"><i class="fa fa-download" title="download" aria-hidden="true"></i></a>
     </span>{{ data.meta.length_formatted }}</div>
        <# } #>             
    </div>
    <span>
    <a href="{{ data.src }}"><i class="fa fa-download" title="download" aria-hidden="true"></i></a>
    </span>

Is there a way to have the originally located download icon actually open a 'save' dialogue for each mp3? I'm no coder so not sure if this was what was supposed to happen when clicking the icon in the previous thread as there is no working example?

I'm very grateful for the other thread as it's almost there but just need the icon to actually activate.

Any help gratefully received. Thanks in advance : )

edit: I found this earlier which apparently stops the parent event being triggered by the child. I've tried to incorporate this into the above code, at the top, but it doesn't work (no surprise there since I don't really understand the code) However, this still wouldn't give me a 'save as' dialogue but would stop the download button playing the clip.

$("#parentEle").click( function(e) {
alert('parent ele clicked');
});
$("#parentEle").children().click( function(e) {
//this prevent the event from bubbling to any event higher than the direct children
e.stopPropagation();
});

I need a link to enable downloading of each audio file item within the native wordpress playlist.

I've used the script from this thread >> Download button for wp audio player

but there isn't the ability to ask questions of the poster. I've just used the bottom script by Dave Romsey and placed it in a custom script plugin. Have I missed something by doing this? This produces a download icon on the right of the playlist item, has a hover state, but simply starts the playlist item when clicked.

<script>
/**
 * Our custom playlist template for mp3 download`.
 */
function wpse_141767_wp_underscore_playlist_templates() {
?>
<script type="text/html" id="tmpl-wp-playlist-current-item">
    <# if ( data.image ) { #>
    <img src="{{ data.thumb.src }}"/>
    <# } #>
    <div class="wp-playlist-caption">
            <span class="wp-playlist-item-meta wp-playlist-item-title">&#8220;{{ data.title }}&#8221;</span>
            <# if ( data.meta.album ) { #><span class="wp-playlist-item-meta wp-playlist-item-album">{{ data.meta.album }}</span><# } #>
            <# if ( data.meta.artist ) { #><span class="wp-playlist-item-meta wp-playlist-item-artist">{{ data.meta.artist }}</span><# } #>
    </div>
</script>
<script type="text/html" id="tmpl-wp-playlist-item">
    <div class="wp-playlist-item">
            <a class="wp-playlist-caption" href="{{ data.src }}">
                    {{ data.index ? ( data.index + '. ' ) : '' }}
                    <# if ( data.caption ) { #>
                            {{ data.caption }}
                    <# } else { #>
                            <span class="wp-playlist-item-title">&#8220;{{{ data.title }}}&#8221;</span>
                            <# if ( data.artists && data.meta.artist ) { #>
                            <span class="wp-playlist-item-artist"> &mdash; {{ data.meta.artist }}</span>
                            <# } #>
                    <# } #>
            </a>
            <# if ( data.meta.length_formatted ) { #>
<div class="wp-playlist-item-length"><span>
        <a href="{{ data.src }}"><i class="fa fa-download" title="Download" aria-hidden="true"></i></a>
    </span>{{ data.meta.length_formatted }}</div>
            <# } #>             
    </div>
</script>
<?php
}
</script>

but, as mentioned (and within that thread), the icon doesn't start a download, it simply activates the play function of the playlist item. I've tried moving the download icon section below the div (I'd still like it in it's original position if possible) to hopefully move the span outside of the div to remove it from the play attribute that everything inside that div obviously activates but this just opens the mp3 file in a new browser window:

<div class="wp-playlist-item-length"><span>
        <a href="{{ data.src }}"><i class="fa fa-download" title="download" aria-hidden="true"></i></a>
     </span>{{ data.meta.length_formatted }}</div>
        <# } #>             
    </div>
    <span>
    <a href="{{ data.src }}"><i class="fa fa-download" title="download" aria-hidden="true"></i></a>
    </span>

Is there a way to have the originally located download icon actually open a 'save' dialogue for each mp3? I'm no coder so not sure if this was what was supposed to happen when clicking the icon in the previous thread as there is no working example?

I'm very grateful for the other thread as it's almost there but just need the icon to actually activate.

Any help gratefully received. Thanks in advance : )

edit: I found this earlier which apparently stops the parent event being triggered by the child. I've tried to incorporate this into the above code, at the top, but it doesn't work (no surprise there since I don't really understand the code) However, this still wouldn't give me a 'save as' dialogue but would stop the download button playing the clip.

$("#parentEle").click( function(e) {
alert('parent ele clicked');
});
$("#parentEle").children().click( function(e) {
//this prevent the event from bubbling to any event higher than the direct children
e.stopPropagation();
});

• audio
• playlist

Share Improve this question edited Jan 30, 2018 at 19:40 Blix asked Jan 30, 2018 at 12:51 BlixBlix 4166 bronze badges 3

• I've updated my answer here. – birgire Commented Jan 30, 2018 at 23:49
• Thanks very much for this. Worked perfectly. I edited the code a little. I'll paste my solution below. – Blix Commented Feb 2, 2018 at 11:13
• Glad to hear it helped @Blix – birgire Commented Feb 2, 2018 at 14:01

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 2

Thanks to both of you for your help. Just so it might help others, this is what I did: Downloaded a wordpress plugin to allow custom scripts. I used this one >> https://wordpress/plugins/header-and-footer-scripts-inserter/

I then pasted this code within the plugin (thanks to Birgire above & HERE :

<script type="text/html" id="tmpl-wp-playlist-current-item">
    <# if ( data.image ) { #>
    <img src="{{ data.thumb.src }}"/>
    <# } #>
    <div class="wp-playlist-caption">
            <span class="wp-playlist-item-meta wp-playlist-item-title">{{ data.title }}</span>
            <# if ( data.meta.album ) { #><span class="wp-playlist-item-meta wp-playlist-item-album">{{ data.meta.album }}</span><# } #>
            <# if ( data.meta.artist ) { #><span class="wp-playlist-item-meta wp-playlist-item-artist">{{ data.meta.artist }}</span><# } #>
    </div>

</script>
<script type="text/html" id="tmpl-wp-playlist-item">
    <div class="wp-playlist-item">
            <a class="wp-playlist-caption" href="{{ data.src }}">
                    {{ data.index ? ( data.index + '. ' ) : '' }}
                    <# if ( data.caption ) { #>
                            {{ data.caption }}
                    <# } else { #>
                            <span class="wp-playlist-item-title">{{{ data.title }}}</span>
                            <# if ( data.artists && data.meta.artist ) { #>
                            <span class="wp-playlist-item-artist"> — {{ data.meta.artist }}</span>
                            <# } #>
                    <# } #>
            </a>
            <# if ( data.meta.length_formatted ) { #>
            <div class="wp-playlist-item-length">{{ data.meta.length_formatted }}</div>
            <# } #>             
    </div>

    <!-- BEGIN CHANGES -->
       <a href="{{ data.src }}" class="wpse-download" download=""><i class="fa fa-download" title="Download" aria-hidden="true"></i></a>
    <!-- END CHANGES -->
    </script>

In the above code I also removed the speech / quote marks around the playlist title (this is hard coded into the WP core. I had asked a different question about removing these but this code resolves this too. Good times : )

I then altered the css to place the download icon at the beginning, in front of the playlist title, then padded the title over to the right so it all fitted. (it was the 'absolute' positioning that I needed to stop this activating the playlist rather than the download)

/*playlist title - more to right*/
.wp-playlist-item-title {
    padding-left:25px
}

/*download link styles - move within playlist & to left of playlist title*/

.wpse-download {
    margin-top: -22px;
    padding-left:5px;
    position: absolute;
}

/*change color of icon*/
.wpse-download {
 color:white!important;
}

/*change hover / active state of download icon*/
.wpse-download:hover, .wpse-download:visited
{
 color:#aaa!important;
}

I have styled the playlist further to suit my needs but here is what I ended up with. Thanks again : )

Actually, for the majority of modern browsers all you need to do is add download to your <a> element, eg:

<a href="{{ data.src }}" download >