HTML 5实时音频流播放器

Question

首先，我知道<audio>标签，但是我想编写自己的现场音频播放器以进行进一步的实验。

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

因为我在谈论流，所以我在下载过程结束之前开始播放文件。

我主要担心的是：我听不到任何声音。 没有错误，一切似乎都正常，但实际上什么也没发生。

我以为棘手的部分是关于块大小的，但是encodeAudioData函数似乎并未使用可选的错误回调。

服务器端脚本非常简单：

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>

顺便说一句，即使在下载部分结束时，我也尝试播放该文件，但仍然无法正常工作。

感谢您的建议！

Answer 1

我不认为您可以将mp3分成多个部分，然后部分播放/解码。 我自己还没有尝试过，但不是mp3专家。

基本上，您需要以PCM（原始音频）流式传输音频或使用其他机制来压缩数据。

这是我回写的音频流代码示例： https : //github.com/agektmr/AudioStreamer

我不确定它是否仍然有效，但至少在Web Audio API更改之前。

HTML 5实时音频流播放器

问题描述

1 个解决方案

解决方案1
1 2014-09-01 09:38:34

HTML 5实时音频流播放器

问题描述

1 个解决方案

解决方案1 1 2014-09-01 09:38:34

解决方案1
1 2014-09-01 09:38:34