0

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!

Sami.Samami
  • 15
  • 6
  • Have you used google? It took me 10 seconds to find a solution (on SO even). http://stackoverflow.com/questions/2793751/how-can-i-create-download-link-in-html – CerebralFart May 04 '16 at 11:46
  • Have you read what I asked up there ? :) it would take you 10 seconds to find out what I was really looking for. where did I say that I wanted to create a download link ? let alone in an HTML page ? and believe me, the answer is no where because like I said it's a customized download button for the wordpress player and besides I got no programming skills and that's why I asked for help. It would be great if you could modify the given codes or help me in other ways. Thanks for noticing! – Sami.Samami May 04 '16 at 16:24

1 Answers1

0

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>';
coopersita
  • 5,011
  • 3
  • 27
  • 48
  • Excellent, almost there Both mods fix the issue in Firefox and Google Chrome however there's a problem in Internet Explorer. when I click on the player it downloads the mp3 file instead of playing. the issue was already there and I didn't notice earlier. it has nothing to do with your mod. And also the first problem still persists in mobile browsers. I can't download the file in any way. – Sami.Samami May 04 '16 at 18:39
  • Depending on the mobile device, you probably can't download files. – coopersita May 04 '16 at 19:15
  • I checked other wordpress based websites and I can easily download them. it's weird ! – Sami.Samami May 05 '16 at 05:06
  • Does anybody else know how to fix the issue in mobile phones ? I don't really wanna ask a new question for this... :( – Sami.Samami May 06 '16 at 16:21
  • You'll probably have to, and provide examples of the sites where it works, and if possible, the URL to your site. – coopersita May 06 '16 at 16:25
  • I'm working on my website offline for the time being due to this and other issues. I also put it on byethost for test purposes. Here's the link: http://musicplayer.byethost12.com. If need be, I can send you my admin and cpanel access through my email address. Just let me know if you need further access. Thanks coopersita. – Sami.Samami May 07 '16 at 11:17
  • Have you tried putting both `download` and `target=_blank`? I just tried in my mac, and it just opens the file in another tab. I think you need to open a new question. I've never encountered this before. Perhaps someone else has. – coopersita May 07 '16 at 15:08
  • I tried replacing your mods one by one and like I said both works like a charm in PC browsers (except for IE). however, when I add both lines at the same time, it won't work anymore. the problem is in mobile phones. I got no issues in PC browsers. Anyways, I can give you give you my cpanel access if you would like to see it for yourself ? maybe I'm doing something wrong here...!! – Sami.Samami May 07 '16 at 16:18
  • BTW, I just changed it back to your first mod: var html = ''; – Sami.Samami May 07 '16 at 16:19
  • Sorry, can't help you. You need to open a new question. – coopersita May 07 '16 at 18:27