通过websocket接收的音频流，如何使用audio标签播放

flystone84 2015-08-31 02:37:26

在html页面中，通过WebSocket接收来自后台的音频流数据，想通过audio标签实现实时播放，目前已能收到音频数据，不知道如何组装成流进行播放，求高手指教！

...全文

5812 8 打赏收藏转发到动态举报

写回复

用AI写文章

8 条回复

切换为时间正序

请发表友善的回复…

发表回复

逆光飞翔12 2019-01-15

打赏
举报

qq_43547702 2018-11-06

打赏
举报

引用 8 楼 Qi_w2006 的回复:

[quote=引用 4 楼 cth2008 的回复:] function getBlob2(data,len){ var buffer = new ArrayBuffer(len); var dataview = new DataView(buffer); writeUint8Array(dataview,0,data,len); return new Blob([dataview], { type: 'audio/wav' }); } websocket.onmessage = function got_packet(msg) { var data = msg.data; var datalen = msg.data.size; { var reader = new FileReader(); reader.onload = function(evt) { if(evt.target.readyState == FileReader.DONE) { var data = new Uint8Array(evt.target.result); /* // 方式1 ,ok audioContext.decodeAudioData(evt.target.result, function(buffer) {//解码成pcm流 var audioBufferSouceNode = audioContext.createBufferSource(); audioBufferSouceNode.buffer = buffer; audioBufferSouceNode.connect(audioContext.destination); audioBufferSouceNode.start(0); }, function(e) { alert("Fail to decode the file."); }); */ //方式2 ok audio.src = window.URL.createObjectURL(getBlob2(data,data.length)); } } reader.readAsArrayBuffer(data); } 最近也在做web 播放实时视频流，并最终搞定了，采用2种方式都可以，主要代码贴出来了，提供大家学习吧。

仿照你的访求，在writeUint8Array卡住，还请救人一命 [/quote] 请问您的方式实现了么，方便交流一下么，谢谢

qq_43547702 2018-11-02

打赏
举报

请问这个问题还能解决么

Qi_w2006 2018-06-28

打赏
举报

引用 4 楼 cth2008 的回复:

function getBlob2(data,len){
var buffer = new ArrayBuffer(len);
var dataview = new DataView(buffer);
writeUint8Array(dataview,0,data,len);
return new Blob([dataview], { type: 'audio/wav' });

}

websocket.onmessage = function got_packet(msg) {

var data = msg.data;
var datalen = msg.data.size;

{
var reader = new FileReader();

reader.onload = function(evt)
{
if(evt.target.readyState == FileReader.DONE)
{
var data = new Uint8Array(evt.target.result);

/*
// 方式1 ,ok
audioContext.decodeAudioData(evt.target.result, function(buffer) {//解码成pcm流
var audioBufferSouceNode = audioContext.createBufferSource();
audioBufferSouceNode.buffer = buffer;
audioBufferSouceNode.connect(audioContext.destination);
audioBufferSouceNode.start(0);
}, function(e) {
alert("Fail to decode the file.");
});
*/

//方式2 ok
audio.src = window.URL.createObjectURL(getBlob2(data,data.length));
}
}
reader.readAsArrayBuffer(data);
}

最近也在做web 播放实时视频流，并最终搞定了，采用2种方式都可以，主要代码贴出来了，提供大家学习吧。

仿照你的访求，在writeUint8Array卡住，还请救人一命

qq_28755477 2017-07-21

打赏
举报

你好，后台如何用WebSocket输出二进制的音频流？

七大爷爷 2016-12-20

打赏
举报

引用 4 楼 cth2008 的回复:

function getBlob2(data,len){ var buffer = new ArrayBuffer(len); var dataview = new DataView(buffer); writeUint8Array(dataview,0,data,len); return new Blob([dataview], { type: 'audio/wav' }); } websocket.onmessage = function got_packet(msg) { var data = msg.data; var datalen = msg.data.size; { var reader = new FileReader(); reader.onload = function(evt) { if(evt.target.readyState == FileReader.DONE) { var data = new Uint8Array(evt.target.result); /* // 方式1 ,ok audioContext.decodeAudioData(evt.target.result, function(buffer) {//解码成pcm流 var audioBufferSouceNode = audioContext.createBufferSource(); audioBufferSouceNode.buffer = buffer; audioBufferSouceNode.connect(audioContext.destination); audioBufferSouceNode.start(0); }, function(e) { alert("Fail to decode the file."); }); */ //方式2 ok audio.src = window.URL.createObjectURL(getBlob2(data,data.length)); } } reader.readAsArrayBuffer(data); } 最近也在做web 播放实时视频流，并最终搞定了，采用2种方式都可以，主要代码贴出来了，提供大家学习吧。

writeUint8Array这个是什么？

cth2008 2016-05-04