XMLHttpRequest和http流

我的目標是從瀏覽器中讀取HTTP MP3音頻流並可以訪問原始音頻數據。XMLHttpRequest和http流

HTML5 <音頻>讓我輕鬆地播放流，但據我所知，不授予訪問原始音頻數據。它只是玩它。
JS XMLHTTPRequest可以通過HTTP下載文件並處理原始音頻數據。它似乎是一個很好的候選者，但它有一個限制：它不會授予對二進制數據的訪問權限，直到下載完成（readystate = 4）。在我的情況下，這個流是無限的，所以readystate永遠保持在3，XHR響應爲null（這個行爲在mozilla文檔中有詳細描述）。請注意，我連接到服務器的跨域策略是訪問控制允許來源：*

代碼示例，對於本地普通文件的工作，而不是流。我會在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();

是否有人知道的替代品，以及解決這些選項，使原始的二進制包可以在下載流中讀取？

請注意，我沒有在服務器上的控制權。這是一個icecast http流。另外，在瀏覽器端，我想避免使用Flash。謝謝

編輯：爲了澄清可能的跨源問題，JS運行在託管在本地主機服務器上的頁面上。

來源

2015-10-09 astooooooo

要清楚，您需要原始解碼的PCM音頻數據，而不是來自服務器的比特流，是的？如果是這樣，那麼Web Audio API就是您需要的。 – Brad

@Brad事實上，我使用Web Audio API（作爲提示參見上面的decodeAudioData方法，在我的部分代碼中）。我只是無法從流中獲取緩衝區並將其放入API中。我想我找到了一個解決方案，請參閱下面的解決方案。 – astooooooo

以下解決方法的工作：

正如MDN https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Sending_and_Receiving_Binary_Data說，它是可以覆蓋的MIME類型的HTTP請求，將其設置爲自定義，並調用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.response的相同限制。它在狀態readystate = 3中不爲null。然後，二進制的responseText與

var filestream = load_binary_resource(url); 
var abyte = filestream.charCodeAt(x) & 0xff; // throw away high-order byte (f7)

一個顯著的缺點是隨着流下載的req.responseText保持增長訪問。該請求應該不時重置以避免RAM消耗過多。

來源

2015-10-09 15:25:10 astooooooo

有沒有更新到今天？ –

-2

您必須在主機上有本地主機服務器或腳本。 Becouse當您運行腳本文件，你會得到跨起源錯誤，當您嘗試其他服務器上請求

來源

2015-10-09 11:46:12 Sebastian

感謝您的輸入。請注意，我連接到的服務器的跨源策略是Access-Control-Allow-Origin：* – astooooooo

是，但是，如果您僅使用本地文件，則從某種服務器，瀏覽器會自動取消本地主機的所有請求 – Sebastian

我再次檢查外部服務器上的隨機mp3文件。我得到了交叉原點錯誤。我試圖下載的流有一個開放的跨源策略。嘗試連接到它時，我沒有收到任何CORS錯誤。問題在別處。 – astooooooo

XMLHttpRequest和http流

回答

相關問題