How to stream a media file from server to client side for example an mp3 audio file in my case in loopback 4 nodejs?

Question

I have loopback 4 - nodejs in the backend and Ionic 4 in the frontend of my mobile application. I'm storing an mp3 file on server sid and I want to stream and play it on the client-side so basically audio streaming from loopback4. So basically I'm looking for server-side code in loopback-4 which is in typescript to audio-stream a file to client. (I'm unable to use npmjs libraries since most of them are not typed and cannot be used in typescript)

Answer 1

As soon as I know about loopback4, it doesn't have nodejs stream implementation. I recommend you to use native NodeJS streams. Check out this repo https://github.com/noamtcohen/AudioStreamer

Answer 2

Short answer: I was able to achieve this by simply serving static files i.e my audio file from the server-side. Accessing it using the endpoint I made and calling it using the tag on the frontend.

Long answer:

1. In loopback 4, you can find a line of code in application.ts file where public directory from the root folder of the server project is served.

   this.static('/', path.join(__dirname, '../../public'));

Similarly, you can serve your static files from whatever dir you want. In my case, I served my files from media folder which I added in the root directory of my node project.

this.static('/', path.join(__dirname, '../media'));

2. The second step is to expose an API endpoint which you would use to make a get request to the server. You can do that inside index.ts file of the server project and the code right below app.start().

app.static('/media', 'media', { extensions: ['mp3'] });

Here, adding the API endpoint and the directory in the root folder of the node project is mandatory.

3. Now, on the frontend you only have to add your complete url to access the static file from node project to the src attribute of html tag. Add controls attribute to the tag and html will handle everything for you. You can play, pause, skip, etc.

   <audio controls #audioElement id="id1" [src]="http://localhost:3000/media/audio-files/myAudiofile.mp3">