XMLHttpRequest和http流 [英] XMLHttpRequest and http streaming
问题描述
我的目标是从浏览器中读取HTTP MP3音频流，并可以访问原始音频数据。
-
HTML5< audio> 让我轻松播放流，但据我所知，不允许访问原始音频数据。它只是播放它。
HTML5 < audio > lets me easily play the stream, but, as far as I know, does not grant access to the raw audio data. It just plays it.
JS XMLHTTPRequest 可以通过HTTP下载文件并处理原始音频数据。它似乎是一个很好的候选者，但它受到限制：它不会授权访问二进制数据，直到下载完成（readystate = 4）。在我的例子中，流是无限的，因此readystate永久保持在3并且XHR响应为空（这种行为在mozilla文档中有详细说明）。请注意，我连接的服务器的跨源策略是Access-Control-Allow-Origin：*
JS XMLHTTPRequest can download files through HTTP and process the raw audio data. It seems to be a good candidate, but it suffers from a limitation: it does not grant access to the binary data until the download is finished (readystate = 4). In my case, the stream is unlimited, so the readystate stays permanently at 3 and the XHR response is null (this behavior is detailed in the mozilla documentation). Note that the cross-origin policy of the server I am connecting to is Access-Control-Allow-Origin: *
代码示例适用于本地常规文件，但不适用于流。我在request.response.length获得空指针异常
Code sample that works for local regular files, but not for streams. I get a null pointer exception at request.response.length
request = new XMLHttpRequest();
//request.open('GET', 'test.mp3', true);
request.open('GET', 'http://domain.com/stream.mp3', true);
request.responseType = 'arraybuffer';
request.onload = function() {
console.log("request onload");
var audioData = request.response;
audioCtx.decodeAudioData(audioData,
function(buffer) { myBuffer = buffer; source.buffer = myBuffer; },
function(e){"Error with decoding audio data" + e.err}
);
}
request.onreadystatechange = function() {
console.log("ready state = " + request.readyState);
console.log(request.response.length);
}
request.send();
是否有人知道这些选项的替代方案或解决方法， 以便在下载流时可以读取原始二进制数据包吗？
Does anybody know alternatives or workarounds to those options, so that the raw binary packets can be read while downloading the stream?
请注意，我无法控制服务器。这是一个icecast http流。
另外，在浏览器方面，我想避免使用Flash。
谢谢
Note that I don't have control on the server. It's an icecast http stream. Also, on the browser side, I'd like to avoid using Flash. Thank you
编辑：为了澄清可能的跨源问题，JS在本地主机服务器上托管的页面上运行。
to clarify possible cross-origin questions, the JS is run on a page hosted in a localhost server.
推荐答案
以下解决方法有效：
如MDN中所述 https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/ Sending_and_Receiving_Binary_Data ，可以覆盖http请求的MIME类型，将其设置为自定义，并调用responseText。
As stated in MDN https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Sending_and_Receiving_Binary_Data, it is possible to override the MIME type of http request, setting it to custom, and call responseText.
function load_binary_resource(url) {
var req = new XMLHttpRequest();
req.open('GET', url, false);
//XHR binary charset opt by Marcus Granado 2006 [http://mgran.blogspot.com]
req.overrideMimeType('text\/plain; charset=x-user-defined');
req.send(null);
if (req.status != 200) return '';
return req.responseText;
}
重点是req.responseText没有受到同样的req限制。响应。它在readystate = 3状态下不为null。
然后，使用
The point is that req.responseText does not suffer from the same limitation of req.response. It is not null in the state readystate=3. Then, the binary responseText is accessed with
var filestream = load_binary_resource(url);
var abyte = filestream.charCodeAt(x) & 0xff; // throw away high-order byte (f7)
一个重要的缺点是req.responseText不断增长当下载流时。应该不时重置请求，以避免过多的RAM消耗。
A significant drawback is that req.responseText keeps growing as the stream is downloaded. The request should be reset from time to time to avoid excessive RAM consumption.
这篇关于XMLHttpRequest和http流的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
