0

我有来自外部服务器的音频流，无法执行任何服务器端更改。它目前运行良好，但只能在 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

如果可能的话，它应该完全在 JavaScript 中工作，无需 PHP 代理。

4

2 回答 2

0

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

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

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

于 2013-04-29T13:35:39.080 回答
0

事实证明，我最初的悲观主义（关于这是不可能的）可能被误导了。这是一个使用一些 HTML5 File API 的演示（不像我一直在阅读的一些东西那么先进，但似乎安全限制使得目前完全自动化这有点遥不可及，这个演示适用于 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，然后将其存储在 a 中Blob并创建一个下载 URL，其中包含一些触发浏览器下载资产而不是仅仅链接到它的额外信息（这就是它对 PNG 所做的事情）。我找不到不需要会话密钥的 Grooveshark URL，所以我不知道这是否对您有用，但该限制来自 Groovshark 防止热链接到歌曲的努力。

于 2013-04-29T00:39:30.473 回答