Holen Sie Live-Streaming-Audio von NodeJS-Server zu Clients

Question

Ich brauche einen Echtzeit-Live-Audio-Stream von 1 Client zu einem Server zu mehreren Listener-Clients.

Derzeit habe ich die Aufnahme vom Client arbeiten und streamen das Audio über socket.io auf den Server. Der Server empfängt diese Daten und muss die Audiodaten (auch über socket.io?) An die Clients streamen, die diesen Stream anhören möchten. Es muss so real wie möglich sein (Verzögerung minimieren).

Ich verwende GetUserMedia, um das Mikrofon aufzunehmen (Browserkompatibilität ist hier nicht wichtig). Ich möchte, dass die Clients den HTML5-Audio-Tag verwenden, um den Stream zu hören. Die auf dem Server empfangenen Daten sind Chunks (derzeit mit 700 gepackt), die in einem Blob mit dem Typ audio/wav gepackt sind.

Dies ist mein Code an den Server zu senden: Ich bin in der Lage, die Brocken

mediaRecorder.ondataavailable = function(e) { 
    this.chunks.push(e.data); 
    if (this.chunks.length >= 700) 
    { 
     this.sendData(this.chunks); 
     this.chunks = []; 
    } 
}; 
mediaRecorder.sendData = function(buffer) { 
    blob = new Blob(buffer, { 'type' : 'audio/wav' }); 
    socket.emit('voice', blob); 
} 

Auf dem Server die gleiche Art und Weise wie diese an den Client zu senden:

socket.on('voice', function(blob) { 
    socket.broadcast.emit('voice', blob); 
}); 

On der Kunde kann ich dies wie folgt spielen:

var audio = document.createElement('audio'); 
socket.on('voice', function(arrayBuffer) { 
    var blob = new Blob([arrayBuffer], { 'type' : 'audio/wav' }); 
    audio.src = window.URL.createObjectURL(blob); 
    audio.play(); 
}); 

Dies funktioniert zum ersten Klecks Brocken ich sende, aber sie sind nicht ke erlaubt ep ändert sich in audio.src in eine neue URL-Quelle, so dass dies keine funktionierende Lösung ist.

Ich denke, ich muss eine Art von Stream auf dem Server erstellen, die ich in den Audio-Tag des HTML5 auf den zuhörenden Clients einfügen kann, aber ich weiß nicht wie. Die empfangenen Blobs mit Chunks sollten dann in Echtzeit an diesen Stream angehängt werden.

Was ist der beste Ansatz, dies zu tun? Mache ich das direkt vom Client-Mikrofon zum Server?

Answer 1

Sie audiosrc dynamisch (unter der Annahme, mp3-Typ) wie folgt ändern könnten:

<audio id="audio" controls="controls"> 
    <source id="mp3Source" type="audio/mp3"></source> 
     Your browser does not support the audio format. 
</audio> 

Anruf folgende Funktion, wann immer, socket Ereignis empfangen wird:

function updateSource() { 
     var audio = document.getElementById('audio'); 

     var source = document.getElementById('mp3Source'); 
     source.src= <blob>; 

     audio.load(); //call this to just preload the audio without playing 
     audio.play(); //call this to play the song right away 
    } 

Answer 2

ich ein bisschen spät bin zu dem Party hier aber es sieht aus wie die Web Audio API wird dein Freund hier sein, wenn Sie es nicht schon beendet haben. Es ermöglicht Ihnen, einen Audio-Stream direkt auf dem Ausgabegerät abzuspielen, ohne das Hinzufügen eines Audio-Elements zu stören.

Ich bin dabei, das Gleiche zu tun und Ihre Frage hat meine Frage beantwortet - wie man Daten vom Client zum Server bekommt. Der Vorteil der Web-Audio-API besteht darin, dass Streams zusammengefügt und Audioeffekte auf dem Server angewendet werden können.

MDN Web Audio API

Die io Ereignisse sollten die Daten in einem Audio-Puffer-Objekt in dem Audio-Kontext ersetzen. Die Audiobearbeitung kann im Web-Audio-Kontext von nodeJS stattfinden, bevor sie als einzelner Stream an jeden Client gesendet wird.