如何通过带有node.js和socket.io的WebSockets流式传输MP3数据？ [英] How to stream MP3 data via WebSockets with node.js and socket.io?

问题描述

使用node.js和socket.io通过WebSocket传输MP3数据时遇到问题。一切似乎都奏效，但decodeAudioData对我来说并不公平。

这是我的玩具服务器：

<$ p （app）
，fs = $ {code> var app = require（'http'）。createServer（handler）
，io = require（'socket.io' require（'fs'）

app.listen（8081）;

函数处理程序（req，res）{
res.writeHead（200，{
'Content-Type'：'text / html'，
}）;
res.end（'Hello，world！'）;
}

io.configure（'development'，function（）{
io.set（'log level'，1）;

io .set（'transports'，['websocket']）;
}）;

io.sockets.on（'connection'，function（socket）{
console.log（'connection established'）;

var readStream = fs。 createReadStream（test.mp3，
''flags'：'r'，$ b $'encoding'：'binary'，
'mode'：0666，
'bufferSize' ：64 * 1024}）;
readStream.on（'data'，function（data）{
console.log（typeof data）;
console.log（'发送数据块' ）
socket.send（data）;
}）;

socket.on（'disconnect'，function（）{
console.log（'connection droped '）;
}）;
}）;

console.log（'Server running at http://127.0.0.1:8081/'）;

客户端接收到的数据类型为字符串，但我想将数据提供给decodeAudioData，看起来它不喜欢字符串。对decodeAudioData的调用会导致以下错误消息：

 未捕获错误：SYNTAX_ERR：DOM异常12 
  

我认为decodeAudioData需要存储在ArrayBuffer中的数据。有没有办法转换数据？

这是客户端代码：

 < script src =http://127.0.0.1:8081/socket.io/socket.io.js>< / script> 
< script> 
 var audioBuffer = null; 
 var context = null; 
 window.addEventListener（'load'，init，false）; 
函数init（）{
 try {
 context = new webkitAudioContext（）; 
} catch（e）{
 alert（'此Web浏览器不支持Web Audio API'）; 
} 
} 
 
函数decodeHandler（缓冲区）{
 console.log（data）; 
} 
 
 var socket = io.connect（'http://127.0.0.1:8081'）; 
 socket.on（'message'，function（data）{
 //这是问题
 context.decodeAudioData（data，decodeHandler，function（e）{console.log（e） ;}）; 
}）; 
< / script> 
  

解决方案

我找到了一种通过流式传输MP3数据的方法我自己的Websockets。

一个问题是MP3数据的块大小。似乎Web Audio API需要有效的MP3块才能解码数据。可能并不奇怪。在我的演示程序中，我提供了一组MP3文件。

音频的质量也不完美。我有一些微妙的故障。我可以通过发送更大的MP3数据块来改善这种情况，但仍然存在一些小问题。编辑：我设法改进了音频质量。看起来Web Audio方法decodeAudioData并非真正用于解码连续的MP3数据块。

I have problems streaming MP3 data via WebSocket with node.js and socket.io. Everything seems to work but decodeAudioData doesn't play fair with me.

This is my toy server:

var app = require('http').createServer(handler)
  , io = require('socket.io').listen(app)
  , fs = require('fs')

app.listen(8081);

function handler (req, res) {
    res.writeHead(200, {
        'Content-Type': 'text/html',
    });
    res.end('Hello, world!');
}

io.configure('development', function() {
  io.set('log level', 1);

  io.set('transports', [ 'websocket' ]);
});

io.sockets.on('connection', function (socket) {
    console.log('connection established');

    var readStream = fs.createReadStream("test.mp3", 
                                         {'flags': 'r',
                                          'encoding': 'binary', 
                                          'mode': 0666, 
                                          'bufferSize': 64 * 1024});
    readStream.on('data', function(data) {
        console.log(typeof data);
        console.log('sending chunk of data')
        socket.send(data);
    });

    socket.on('disconnect', function () {
        console.log('connection droped');
    });
});

console.log('Server running at http://127.0.0.1:8081/');

The client receives the data as type string but I want to feed the data to decodeAudioData and it seems it doesn't like strings. The call to decodeAudioData results in the following error message:

Uncaught Error: SYNTAX_ERR: DOM Exception 12

I think decodeAudioData needs the data stored in an ArrayBuffer. Is there a way to convert the data?

This is the client code:

<script src="http://127.0.0.1:8081/socket.io/socket.io.js"></script>
<script>
    var audioBuffer = null;
    var context = null;
    window.addEventListener('load', init, false);
    function init() {
        try {
            context = new webkitAudioContext();
        } catch(e) {
            alert('Web Audio API is not supported in this browser');
        }
    }

    function decodeHandler(buffer) {
        console.log(data);
    }

    var socket = io.connect('http://127.0.0.1:8081');
    socket.on('message', function (data) {
            // HERE IS THE PROBLEM
        context.decodeAudioData(data, decodeHandler, function(e) { console.log(e); });
    });
</script>

解决方案

I've found a way to stream MP3 data via Websockets myself.

One problem was the chunk size of the MP3 data. It seems that the Web Audio API needs to be fed with valid MP3 chunks to be able to decode the data. Probably not surprising. In my demo app I provide a set of MP3 chunk files.

Also the quality of the audio is not perfect. I have some subtle glitches. I was able to improve that by sending larger chunks of MP3 data but there are still tiny crackles.

EDIT: I managed to improve the audio quality. It seems the Web Audio method decodeAudioData isn't really designed to decode continuos chunks of MP3 data.

这篇关于如何通过带有node.js和socket.io的WebSockets流式传输MP3数据？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！