Chrome下载音频文件,而不是打开播放


声明:本文转载自https://my.oschina.net/kidou/blog/1801141,转载目的在于传递更多信息,仅供学习交流之用。如有侵权行为,请联系我,我会及时删除。

但是现在是跳转到播放页面,就是浏览器自带的播放页面。

参考了网上的例子,不过网上的例子在试验中可以,但是一旦换成完整的url就还是会跳转到页面,于是参照了另一个例子,请求后转化成blob,然后转化成url,方便a标签引用,chrome试验成功,细节还未研究,暂且记录一下

下载文件成功

使用jquery代码(此代码虽然没有报错,但是下载的文件只有电流声,我自己想要的声音根本没有,估计可能是实际不允许跨域,返回过来的数据不对,没有深入研究,请看后续代码):

$.post("https://host.name.com/path/filename.mp3", function(data){ 	// 请求http资源文件,转化成blob 	var b = new Blob([data], {type: 'audio/mp3'}); 	// 转化成url 	var bURL = URL.createObjectURL(b); 	// 新建a标签,触发点击下载(IE未测试) 	var link = document.createElement('a'); 	link.href = bURL; 	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); }); 

参考资料:

https://stackoverflow.com/a/25755295

https://developer.mozilla.org/zh-CN/docs/Web/API/Blob

<<<=================== 2018-04-26 14:56:33 更新 ===================>>>

经过测试,发现上述代码下载音频无法使用,于是想起fetch方法,此方法是比较新的浏览器才会支持,该方法基于Promise,具体请看(有时候能看,有时候需要“科学”一下):

Promise的解释: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise

Fetch方法(建议使用搜索引擎直接搜索Fetch去看): https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch

个人体会,fetch相当于浏览器引用js那种的请求,相当于直接控制浏览器去请求指定文件,查看console打印的log,会发现,当前Promise的状态是cors,即跨域。

最后附上成功的代码:

fetch('https://host.name.com/path/filename.mp3')     .then(d => {         console.log(d);         return d.blob();     })     .then(b => {         console.log(b);         var bURL = URL.createObjectURL(b);          var link = document.createElement('a');         link.href = bURL;         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);      }); 

<<<=================== 2018-04-26 17:16:19 更新 ===================>>>

fetch方法低版本的Safari 9不支持,于是尝试使用XMLHttpRequest:

// 使用XMLHttpRequest function loadFile(uri, callback) {       if (typeof callback != 'function') {           callback = function(uri) {               console.log(uri);           }       }       var xhr = new XMLHttpRequest();       xhr.responseType = 'blob';       xhr.onload = function() {           callback(window.URL.createObjectURL(xhr.response));       }       xhr.open('GET', uri, true);       xhr.send(); }  //使用方法   var fileUrl = 'https://host.name.com/path/filename.mp3';   loadFile(fileUrl, function(URI) {       // 下载完毕回调,URI是blob的资源地址,可以直接调用      console.log('>>>', URI);     var bURL = URI;      var link = document.createElement('a');     link.href = bURL;     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); }); 

然后发现Safari 9会报一个错误,然后连接到blob的文件开始播放,看到网上有人说download属性Safari 10.1才开始支持,于是放弃……求教大家有什么好的办法,先谢谢各位了。

参考资料:

https://www.cnblogs.com/codekey/p/4532735.html

http://www.w3school.com.cn/xml/xml_http.asp

https://blog.csdn.net/huaieli1/article/details/78268221

本文发表于2018年04月26日 22:38
(c)注:本文转载自https://my.oschina.net/kidou/blog/1801141,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如有侵权行为,请联系我们,我们会及时删除.

阅读 2288 讨论 1 喜欢 0

抢先体验

扫码体验
趣味小程序
文字表情生成器

闪念胶囊

你要过得好哇,这样我才能恨你啊,你要是过得不好,我都不知道该恨你还是拥抱你啊。

直抵黄龙府,与诸君痛饮尔。

那时陪伴我的人啊,你们如今在何方。

不出意外的话,我们再也不会见了,祝你前程似锦。

这世界真好,吃野东西也要留出这条命来看看

快捷链接
网站地图
提交友链
Copyright © 2016 - 2021 Cion.
All Rights Reserved.
京ICP备2021004668号-1