Проигрыватель для потоковой передачи звука в реальном времени в HTML 5

Прежде всего, я знаю тег <audio>, но я хотел бы написать свой собственный живой аудиоплеер для дальнейших экспериментов.Проигрыватель для потоковой передачи звука в реальном времени в HTML 5

В принципе, я пытаюсь передать простой файл MP3 с сервера node.js на клиентский скрипт HTML5, который получает поток с помощью веб-сокетов, добавляет куски и, наконец, воспроизводит файл.

Поскольку я говорю о потоковой передаче, я начинаю играть файл до конца процесса загрузки.

Моя главная забота: я ничего не слышу. Нет ошибки, все работает нормально, но на самом деле ничего не происходит.

Я предполагал, что сложная часть была о размерах блоков, но функция 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>

Кстати, я пытался воспроизвести файл, даже в конце загрузки части , и он все еще не работает.

Спасибо за ваши советы!

источник

2014-08-31 Cyrus4ever

Я не думаю, что вы можете разделить mp3 на несколько частей и частично воспроизвести/декодировать их. Я не пробовал это сам и не стал экспертом по mp3, хотя.

Вам в основном нужно передавать аудио в PCM (raw audio) или использовать другой механизм для сжатия данных.

Вот пример потокового аудио код, который я написал некоторое время назад: https://github.com/agektmr/AudioStreamer

Я не уверен, если он все еще работает, но по крайней мере, до изменения Web Audio API.

источник

2014-09-01 09:38:34 agektmr

Спасибо за ваш комментарий. Сжимаете ли вы данные в своем проекте? – Cyrus4ever

Нет. Но этот проект, похоже, сжимает аудио, используя библиотеку под названием 'resampler.js' https://github.com/twitchyliquid64/Micstream – agektmr

Интересно. Я посмотрю на это. Благодаря! – Cyrus4ever

Проигрыватель для потоковой передачи звука в реальном времени в HTML 5

ответ

Смежные вопросы