Question

我有来自外部服务器的音频流，但无法执行任何服务器端更改。它目前工作得很好，但它只能在HTML5音频元素中流式传输歌曲。我也想实现一个下载功能，问题是，链接没有下载任何内容，它会自动流式传输mp3。 HTML5下载属性没有做任何事情。

服务器的完整响应标头：

Accept-Ranges:bytes
Cache-Control:no-cache, no-store, must-revalidate
Connection:close
Content-Length:6991749
Content-Type:audio/mpeg
Date:Sun, 28 Apr 2013 19:40:49 GMT
Expires:Sat, 26 Jul 1997 05:00:00 GMT
Last-Modified:Thu, 10 Jan 2013 18:59:31 GMT
Server:nginx/1.0.2

如果没有PHP代理，它应该完全在JavaScript中工作。

Answer 1

事实证明，我最初的悲观情绪（关于这是不可能的）可能是错误的。这是一个使用一些HTML5文件API的演示（不像我一直在阅读的一些东西那样先进，但似乎安全限制使得目前完全自动化这一点，{{{ 3}}适用于Firefox和Chrome，但我猜只有IE10才有机会支持它。

var createObjectURL = function (file) {
    if (window.webkitURL) {
        return window.webkitURL.createObjectURL(file);
    } else if (window.URL && window.URL.createObjectURL) {
        return window.URL.createObjectURL(file);
    } else {
        return null;
    }
},
xhr = new XMLHttpRequest();
xhr.open('GET', 'http://upload.wikimedia.org/wikipedia/commons/6/63/Wikipedia-logo.png', true);
xhr.responseType = 'blob';

xhr.onload = function (e) {
    if (this.status == 200) {
        var url = createObjectURL(new Blob([this.response], {
            type: 'image/png'
        }));
        var link = document.createElement('A');
        link.setAttribute('href', url);
        link.setAttribute('Download', 'Name I Want it to have.png');
        link.appendChild(document.createTextNode('Download'));
        document.getElementsByTagName('body')[0].appendChild(link);

    }
};
xhr.send();

我在这里使用XMLHttpRequest请求PNG，然后我将其存储在Blob中，并创建一个下载网址，其中包含一些额外信息，可触发浏览器下载资源而不仅仅是链接到它（这是它与PNG的关系）。我找不到一个不需要一些会话密钥的Grooveshark URL，所以我不知道这是否适合你，但是这个限制来自Groovshark阻止热链接到歌曲的努力。

Answer 2

我现在做了，问题是，当请求一次时，服务器自动拒绝访问临时创建的Stream URI。我刚刚注释掉HTML5音频元素，只放置了一个带有新HTML5下载属性的下载链接

<a href="stream.com/stream.mp3" download="filename.mp3">

如果我没有设置“下载”属性，浏览器会自动流式传输文件。竖起大拇指HTML5！

强制下载音频流

2 个答案: