Discussion on "Build a Radio Broadcast System With NodeJS, React and Socket.IO"

Wool Doughnut · 2022-10-23T11:30:46.526Z

In this article, I will show you how to build a radio broadcasting system with Express and React. Our radio station will consist of 1 host and multiple listeners. The host streams their microphone to the server, which broadcasts to each listener. We ...

Hey! Solid work! I have a situation where if I start a voice broadcast first and I try to listen in, I don't hear anything, but if I start listening in and then I start a broadcast, it works.

I use the word start because I had to wrap the new AudioStreamer in an event listener because Chrome kept saying "The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page."

I suspect this is happening because mid-stream, I can't get the bufferHeader which means audio stream won't start.

do you have any suggestions on how I can fix this?

I may have managed to fix both issues.

I first added a "Start" button to the listener route, which would activate both the HTTP music stream, and the new AudioStreamer call.

Then, I realised that if you listen in after starting the voice broadcast, even though the server sends the buffer header to the listener client, that header is not later passed to the AudioStreamer instance.

The solution was to create a state variable in the route component for the listener page that would store the buffer header, in the event that the server sends the header to the client before initialising the AudioStreamer.

I then passed this buffer header state variable into the useAudioStreamer file.

Finally, when the AudioStreamer is ready to initialise, the header it receives as a parameter can be applied to the AudioStreamer instance.

Below I have linked the updated code.

github.com/WoolDoughnut310/radio-broadcast/commit…

Hey! I getting an error from when I broadcast my voice to another tab on the listener end I get this error randomly, sometimes after a few seconds sometimes after like 1 minute. Are you aware of what may be causing this?

Sorry, but I haven't experienced that before. Are you sure that the error only ever occurs when the listener is another tab on the same browser? I don't know whether it would help, but the demo video I have at the beginning of the article is using 2 different web browsers. Are you running the application locally, or is it deployed to the web? Does the error display in the browser, or in the terminal console, or in the deployment logs? Does the error stop the entire system from functioning? Are you solely broadcasting your voice when the error occurs, or does the error also occur when you stream music and then switch to broadcasting your voice? Could you upload a screenshot of the full error to imgbb.com for me to look at?

Search Hashnode

Build a Radio Broadcast System With NodeJS, React and Socket.IO

Responses2