【问题标题】:DIV Click Download Audio FileDIV 点击下载音频文件
【发布时间】:2014-09-09 23:31:13
【问题描述】:

我有这个音频 MP3 文件,我想在用户使用 JavaScript/JQuery 单击 DIV 时下载它。

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

任何帮助将不胜感激。我似乎在这个话题上找不到任何东西。谢谢!

【问题讨论】:

标签: javascript jquery download mp3


【解决方案1】:

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

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

如果你真的需要它是一个 DIV,你可以将 div 包含在 a 元素中,或者使用像这样的 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 无法同时处理这么多的下载,而您必须将其隔开。

【讨论】:

  • 不错的解决方案!浏览器支持not so good,但 +1。
  • 你可以直接调用link.click(),不知道为什么大家都使用过于复杂的假事件...
  • @AlexanderO'Mara 虽然至少如果它不起作用,用户将被重定向到文件,而不是在用户无法停止的情况下从不可见的 iframe 播放声音。跨度>
  • @dandavis 就我的研究而言,.click() 是一个 IE 函数,尽管其他浏览器最终支持它,但我仍然更喜欢使用该浏览器的原生函数。不过,你是对的。在我们现代,您可以简单地删除 Firefox 部分,因为 Firefox 现在已经支持 IE 的功能。
  • 任何支持[下载]的东西都将支持click(),我认为它在firefox2中工作......在制作danml.com/download.html之后,我发现了各种不实际的潜在支持漏洞由于其他运动部件的现代要求,设备孔......
【解决方案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");
});

【讨论】:

  • 实际上,重要的是 content-disposition 标头,导航到 mp3 通常会显示播放器...
猜你喜欢
  • 2019-02-24
  • 2018-01-27
  • 1970-01-01
  • 2012-10-11
  • 2018-03-13
  • 1970-01-01
  • 1970-01-01
  • 2014-07-29
  • 1970-01-01
相关资源
最近更新 更多