Visualized radio-streaming with React/Vite/Node/FFmpeg/Socket.io

About:

This is a simple Online Radio app built with React.js, Vite, Node.js, FFmpeg, and Socket.io.

The app is a single-page application that uses the Web Audio API to play audio files.

It gets audio file information from the remote editable document, downloads the appropriate audio file from the cloud, and continuously adds it to the stream. After the song is finished, it is deleted from the server. And repeats this process over and over by selecting some random track from the track list.

Article about this project on Medium.

Prerequisites:

• Node.js
• FFmpeg

Installation:

• Download:

git clone git@github.com:boolfalse/radio-streaming-project.git && cd radio-streaming-project/

• Setup .env credentials as follows:

APP_ENV="development"
VITE_BACKEND_PORT=3001

VITE_SOCKET_PORT=3000
VITE_SOCKET_HOST="http://localhost"

RADIO_GIST_ID="6b66a0065c70a33f95e0e831cb0c7e9f"
RADIO_PLAYLIST_FILE="tracks"

• Install dependencies:

npm i && npm i --prefix=server/

• Bundle the project:

npm run build

• Run the project (by a single command):

npm run project

• Check the result at http://localhost:3000.

Author:

• BoolFalse