CODEWITHSUNDEEP
javascriptnode.jshtmlaudiostreaming
Patrick Hund
Patrick Hund

Reputation: 20256

How to Stream Live Audio With Low Latency

I have programmed a server that creates an audio stream from my MacBook's audio input, using express, osx-audio and lame:

const http = require("http");
const express = require("express");
const audio = require("osx-audio");
const lame = require("lame");
const audioInput = new audio.Input();

const encoder = new lame.Encoder({
  channels: 2,
  bitDepth: 16,
  sampleRate: 44100,
  bitRate: 128,
  outSampleRate: 22050,
  mode: lame.STEREO
});

audioInput.pipe(encoder);

const app = express();
const server = http.Server(app);

app.get("/stream.mp3", (req, res) => {
  res.set({
    "Content-Type": "audio/mpeg",
    "Transfer-Encoding": "chunked"
  });
  encoder.pipe(res);
});

server.listen(3000);

On the client side, the sound from this audio stream is included as an <audio> element like so:

<audio controls autoplay preload="none">
  <source src="./stream.mp3" type="audio/mpeg" />
  <p>Oops – your browser doesn't support HTML5 audio!</p>
</audio>

This works – I can hear the sound from the input source I've selected on my laptop from any browser that is connected to the server when I click the “play” button on the audio element.

However the audio played by the browser lags several seconds behind the original signal. It seems although I'm using preload="none", the browser buffers quite a lot of the audio stream before it starts playing it.

Is there something obvious missing here? Is there a better way to achieve real-time audio with only a few milliseconds latency instead of several seconds?

If you're interested, my project's complete source code is here on GitHub.

Upvotes: 9

Views: 5366

Answers (1)

Dr Yuan Shenghai
Dr Yuan Shenghai

Reputation: 1915

Rather than reinventing the wheel, you can use FFMPEG, advertised as “A complete, cross-platform solution to record, convert and stream audio and video.”

Example:

ffmpeg -re -i input -f rtsp -muxdelay 0.1 rtsp://server/live.sdp

You can choose which library (h.264, mpeg, etc) your browser is OK with.

Upvotes: 3

Related Questions