Question

我有这个音频MP3文件，我希望在用户使用JavaScript / JQuery点击DIV时下载它。

$("#button").live("click",function(){
    // initiate download
});

任何帮助都将不胜感激。我似乎无法找到关于这个主题的任何内容。谢谢！

Answer 1

iframe答案是一种方法，但通常情况下MP3只会在iframe中播放，所以如果您不想打扰任何服务器端工作，并且MP3由您托管（至少在Firefox中，这不是Chrome中所必需的，您可以使用a元素的下载属性。

<a href="audio.MP3" download="DownloadedFilenameHere.mp3">Download</a>

如果你真的需要它作为DIV，你可以在一个元素中包含div或使用像这样的Javascript解决方法。 JS解决方案的一个很好的优点是您可以同时为多个文件执行此操作。

var link = document.createElement('a');
link.href = "audio.MP3";
link.setAttribute('download', "DownloadedFilenameHere.mp3");
document.getElementsByTagName("body")[0].appendChild(link);
// Firefox
if (document.createEvent) {
    var event = document.createEvent("MouseEvents");
    event.initEvent("click", true, true);
    link.dispatchEvent(event);
}
// IE
else if (link.click) {
    link.click();
}
link.parentNode.removeChild(link);

如果您想要多次下载，只需使用window.setInterval并使用500毫秒的间隔。使用for循环不起作用，因为出于某种原因，Firefox无法一次处理那么多下载，而你必须将其分开。

Answer 2

您可以创建iframe，并将src设置为MP3。

这只是解决方案的一半。为了确保提示用户下载文件，而不是仅仅获取播放器，您需要通过服务器配置（即mod_headers）或脚本（即PHP）设置以下标题。

Content-Disposition: attachment; filename=somefilename.mp3;

示例：

$("#button").on("click",function(){ $("<iframe />") .css({width:0,height:0}) .attr("src", "URL_TO_MP3") .appendTo("body"); });

DIV单击下载音频文件

2 个答案: