Как плавно воспроизводить непрерывные фрагменты аудио-объектов внутри <audio>? - PullRequest
Новая
       64

Как плавно воспроизводить непрерывные фрагменты аудио-объектов внутри <audio>?

0 голосов
/ 30 декабря 2018

Я получаю 1000ms аудиоблоки от клиента с помощью getUserMedia() и преобразую их в аудиоблок за 1 секунду и отправляю их на сервер (и остальным клиентам) с помощью socket-io до тех пор, пока пользователь не прекратит запись.

На сервере я пересылаю полученный блоб другим клиентам, где URL-адрес блоба получается с помощью createObjectURL(), а затем этот URL-адрес устанавливается как src для тега <audio> на внешнем интерфейсе.Каждые 1000 мс клиенты получают новый BLOB-объект, и его URL-адрес получается, а затем передается в тег <audio>.

Однако этот переход от предыдущего URL-адреса к новому URL-адресу имеет некоторую видимую задержку, из-за которой звук становится прерывистыми менее плавно и согласованно.

На стороне клиента я так записываю аудиоблобы, 

var chunks = [];
var mediaRecorder = new MediaRecorder(stream, { bitsPerSecond: 32000 });

mediaRecorder.ondataavailable = function (e) {
    chunks.push(e.data);
}


mediaRecorder.start();


setInterval(() => {
    mediaRecorder.stop();
    mediaRecorder.start();
}, 1000);


mediaRecorder.onstop = function (e) {
    var blob = new Blob(chunks, { 'type': 'audio/ogg; codecs=opus' });
    chunks = [];
    socket.emit('audio-blob', blob);
}

На сервере я просто пересылаю каплю клиентам, socket.to(String(socket.room)).broadcast.emit('audio-blob', blob);

и на принимающих клиентах блоб воспроизводится так: 

socket.on('audio-blob', blob => {
    var newblob = new File([blob], "filename")
    var audioURL = window.URL.createObjectURL(newblob);
    window.audio = new Audio();
    window.audio.src = audioURL;
    window.audio.play();
})

Как сделать звук согласованным и сократить до заметного лага во время перехода

...