您现在的位置是:首页 >  编程分享 > WEBWEB

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

kidou 转载 编程分享 2019-07-20

简介 项目中遇到一个问题,存放在七牛云的文件,在chrome中点击a标签下载文件。


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

参考了网上的例子,不过网上的例子在试验中可以,但是一旦换成完整的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

原地址:https://my.oschina.net/kidou/blog/1801141

Tags:


本篇评论 —— 揽流光,涤眉霜,清露烈酒一口话苍茫。


    声明:参照站内规则,不文明言论将会删除,谢谢合作。


      最新评论



ABOUT ME

Name:袅袅牧童 | Arkin

Job:Web全栈技术工程师

WeChat:nnmutong

Email:nnmutong@icloud.com

标签云