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