Wordpress在播放器旁边播放自定义下载按钮，而不是下载

Question

I asked a friend to add a download button next to the wordpress audio player so that I could easily download each soundtrack.

he wrote these lines of codes in the foother.php for me:

function createMejsDownload(){
    var href = jQuery('.wp-playlist-playing a').attr('href');
    var controllerWidth = jQuery('.mejs-inner').width();
    var controllerWidth2 = controllerWidth-35;
    var html = '<a href="'+href+'" class="mejs-download"></a>';
    jQuery('.mejs-controls').css('width', controllerWidth2+'px');
    jQuery('.mejs-inner').append(html);
    var href = jQuery('.wp-playlist-playing a').attr('href');
    var controllerWidth = jQuery('.mejs-inner').width();
    var controllerWidth2 = controllerWidth-35;
    jQuery('.mejs-controls').css('width', controllerWidth2+'px');
    jQuery('.mejs-time-rail').css('width', (controllerWidth2-174)+'px');
    jQuery('.mejs-time-rail .mejs-time-total.mejs-time-slider').css('width', controllerWidth2-184);
    jQuery('.mejs-download').attr('href', href);
    jQuery('.mejs-controls').trigger('click');
    setInterval(function(){
        var href = jQuery('.wp-playlist-playing a').attr('href');
        var controllerWidth = jQuery('.mejs-inner').width();
        var controllerWidth2 = controllerWidth-35;
        jQuery('.mejs-controls').css('width', controllerWidth2+'px');
        jQuery('.mejs-time-rail').css('width', (controllerWidth2-174)+'px');
        jQuery('.mejs-time-rail .mejs-time-total.mejs-time-slider').css('width', controllerWidth2-184);
        jQuery('.mejs-download').attr('href', href);
        jQuery('.mejs-controls').trigger('click');
    }, 1);
}

The problem is every time I click on the download button it just plays the mp3 file in a new tab instead of downloading. I guess I heard he told me it had something to do with "force_dll" or something but he had no idea how to do that.

I googled for the force_dll issue and I came up with a solution for Google Chrome. it seems like holding alt while clicking on the download button can actually download the file in google chrome but I don't really wanna do things like that! Besides I don't wanna use third party applications as well.

Any help would be appreciated!

Answer 1

Try this instead:

function createMejsDownload(){
var href = jQuery('.wp-playlist-playing a').attr('href');
var controllerWidth = jQuery('.mejs-inner').width();
var controllerWidth2 = controllerWidth-35;
var html = '<a href="'+href+'" class="mejs-download" download></a>';
jQuery('.mejs-controls').css('width', controllerWidth2+'px');
jQuery('.mejs-inner').append(html);
var href = jQuery('.wp-playlist-playing a').attr('href');
var controllerWidth = jQuery('.mejs-inner').width();
var controllerWidth2 = controllerWidth-35;
jQuery('.mejs-controls').css('width', controllerWidth2+'px');
jQuery('.mejs-time-rail').css('width', (controllerWidth2-174)+'px');
jQuery('.mejs-time-rail .mejs-time-total.mejs-time-slider').css('width', controllerWidth2-184);
jQuery('.mejs-download').attr('href', href);
jQuery('.mejs-controls').trigger('click');
setInterval(function(){
    var href = jQuery('.wp-playlist-playing a').attr('href');
    var controllerWidth = jQuery('.mejs-inner').width();
    var controllerWidth2 = controllerWidth-35;
    jQuery('.mejs-controls').css('width', controllerWidth2+'px');
    jQuery('.mejs-time-rail').css('width', (controllerWidth2-174)+'px');
    jQuery('.mejs-time-rail .mejs-time-total.mejs-time-slider').css('width', controllerWidth2-184);
    jQuery('.mejs-download').attr('href', href);
    jQuery('.mejs-controls').trigger('click');
}, 1);
}

I just added the download to the <a> tag in the 5th line:

 var html = '<a href="'+href+'" class="mejs-download" download></a>';

If that doesn't work, change the 5th line to:

 var html = '<a href="'+href+'" class="mejs-download" target="_blank"></a>';