How To Stream Mp3 With Nodejs To HTML Audio Tag

January 25, 2021

📖 2 min read

In this article we are going to make a simple nodejs API endpoint that streams an mp3 file hosted on publicly anywhere example:

Amazon S3
Cloudinary
Megaphone
Public mp3 file

Prerequisites

Nodejs Basics
Used Axios request library
Express basics
Hosted audio

Note: This is not a scalable way to stream audio, there are better ways by handling the streaming using HLS and FFmpeg on a server somewhere. You can use this script to stream and binge your favorite podcast.

Let's get started

First, we need to setup our project:

yarn init

Fill out the prompts or just work with the default values by adding -y argument at the end.

Next, we need to install relevant npm packages

yarn add express axios

Let's create our endpoint

// We will use this to make HTTP request to the mp3 link
const axios = require("axios");
// adapters are axios modules that handle dispatching a request and settling a returned Promise once a response is received.
const httpAdapter = require("axios/lib/adapters/http");
// express is lightweight web framework
const express = require("express");

// Initialize express and assign to variable app
const app = express();

const INPUT =
  "https://dcs.megaphone.fm/ADV3183643348.mp3?key=c3dc25ae82cc18218902aa6a0675798a";

app.get("/audio", (req, res) => {
  axios
    .get(INPUT, {
      responseType: "stream",
      adapter: httpAdapter,
      "Content-Range": "bytes 16561-8065611",
    })
    .then((Response) => {
      const stream = Response.data;

      res.set("content-type", "audio/mp3");
      res.set("accept-ranges", "bytes");
      res.set("content-length", Response.headers["content-length"]);
      console.log(Response);

      stream.on("data", (chunk) => {
        res.write(chunk);
      });

      stream.on("error", (err) => {
        res.sendStatus(404);
      });

      stream.on("end", () => {
        res.end();
      });
    })
    .catch((Err) => {
      console.log(Err.message);
    });
});

app.listen(4000, () => {
  console.log("Server is running");
});

Yeah thats it, lets add our html and start streaming this music

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Nami Node Streaming prototype</title>
  </head>
  <body>
    <audio controls src="http://localhost:4000/audio"></audio>
  </body>
</html>

The request will only finish when the whole audio is loaded while the audio is still playing.

What is next?

We will create a podcast listening service with this block of code to stream from rss audio links and host it. Follow me on twitter for updates or join my discord.