Javascript HTML 5中的实时音频流播放器_Javascript_Html_Node.js_Websocket

Javascript HTML 5中的实时音频流播放器

javascript html node.js websocket

Javascript HTML 5中的实时音频流播放器,javascript,html,node.js,websocket,Javascript,Html,Node.js,Websocket,首先，我知道标签，但我想编写自己的实时音频播放器，以供进一步实验基本上，我正在尝试将一个简单的MP3文件从node.js服务器流式传输到HTML5客户端脚本，该脚本使用WebSocket接收流，附加块，最后播放该文件因为我说的是流媒体，所以我在下载过程结束之前就开始播放文件我主要担心的是：我什么都听不见。没有错误，一切似乎都很好，但实际上什么也没发生我认为棘手的部分是关于块大小，但是decodeAudioData函数似乎没有使用可选的错误回调服务器端脚本非常简单： var fs = r

首先，我知道

标签，但我想编写自己的实时音频播放器，以供进一步实验

基本上，我正在尝试将一个简单的MP3文件从node.js服务器流式传输到HTML5客户端脚本，该脚本使用WebSocket接收流，附加块，最后播放该文件

因为我说的是流媒体，所以我在下载过程结束之前就开始播放文件

我主要担心的是：我什么都听不见。没有错误，一切似乎都很好，但实际上什么也没发生

我认为棘手的部分是关于块大小，但是decodeAudioData函数似乎没有使用可选的错误回调

服务器端脚本非常简单：

var fs = require('fs');

var WebSocketServer = require('ws').Server;

var wss = new WebSocketServer({port: 9090,host:"192.168.0.253"});
var readStream = fs.createReadStream("test.mp3",
                                     {
                                        'flags': 'r',
                                        'mode': 0666,
                                        'bufferSize': 64 * 1024
                                     }
                                    );

wss.on('connection', function(ws) {
                                    readStream.on('data', function(data)
                                                                {
                                                                    ws.send(data,     {binary: true, mask: false});
                                                                }
                                                );
                                    }
        );

客户端脚本是：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8>
<meta name="viewport" content="width=620">
<title>Test stream HTML5</title>

<script>
var numberOfChannels = 2;
function decode(node)
{
    try
    {
        audioCtx.decodeAudioData(
                                    node.buf,
                                    function(decoded)
                                    {
                                        for (var i=0; i<numberOfChannels; i++)
                                        {
                                            var channel = node.source.buffer.getChannelData(i);
                                            channel.set(decoded, node.cursor );
                                        }

                                        node.cursor += decoded.length;
                                        if (!node.started)
                                        {
                                            node.source.start();
                                            node.started = true;
                                        }
                                   }
                                );
    }
    catch(e)
    {
        console.log('decode exception',e.message);
    }
}

function onOpen(evt)
{
    console.log("CONNECTED");
}

function onClose(evt)
{
    console.log("DISCONNECTED");
}

function errorHandler(e)
{
  var msg = '';

  switch (e.code) {
    case FileError.QUOTA_EXCEEDED_ERR:
      msg = 'QUOTA_EXCEEDED_ERR';
      break;
    case FileError.NOT_FOUND_ERR:
      msg = 'NOT_FOUND_ERR';
      break;
    case FileError.SECURITY_ERR:
      msg = 'SECURITY_ERR';
      break;
    case FileError.INVALID_MODIFICATION_ERR:
      msg = 'INVALID_MODIFICATION_ERR';
      break;
    case FileError.INVALID_STATE_ERR:
      msg = 'INVALID_STATE_ERR';
      break;
    default:
      msg = 'Unknown Error';
      break;
  };

  console.log('Error: ' + msg);
}

var ws = new WebSocket("ws://192.168.0.253:9090");
ws.onopen = function(evt) {onOpen(evt)};
ws.onclose = function(evt) { onClose(evt) };
ws.onerror = function(evt) { errorHandler(evt) };
ws.binaryType = 'arraybuffer';

var audioCtx = new (window.AudioContext || window.webkitAudioContext)();

node={};
node.source  = audioCtx.createBufferSource();
node.source.connect(audioCtx.destination);
node.cursor = 0;
node.started=false;

// 9693654 is the size of the mp3 file: just a magic number used for the prototype :)
node.source.buffer = audioCtx.createBuffer( numberOfChannels, 9693654, 44100);

ws.onmessage = function (evt)
               {
                    node.buf=evt.data;
                    decode(node);
               };


</script>

</html>


测试流HTML5
var numberOfChannels=2；
函数解码（节点）
{
尝试
{
audioCtx.decodeAudioData(
node.buf，
功能（已解码）
{
对于（var i=0；i我不认为你可以将mp3分成多个部分并部分播放/解码。我自己也没有尝试过，但我不是mp3方面的专家
您基本上需要在PCM（原始音频）中传输音频或使用其他机制来压缩数据
下面是我在回来时编写的音频流代码示例：

我不确定它是否仍然有效，但至少在Web Audio API更改之前。
谢谢你的评论。你压缩项目中的数据了吗？没有。但是这个项目似乎使用了一个名为resampler.js
的库来压缩音频。我会看看这个。谢谢！