Build a volume meter for an HLS video managed with Hls.js

Question

I am using Hls.js to manage a video into my HTML page. I need to build a volume meter that inform the user about the audio level of the video. Since I need to keep the video.muted = true , I am wondering if the there is any way with Hls.js to extract the audio information from the stream and build a volume meter with those. The goal is give the users a feedback without have the volume of the video on.

Answer 1

You can do this easily with the Web Audio API.

Specifically, you'll want a couple nodes:

• MediaElementAudioSourceNode
  You will use this to route the audio from your media element (ie the video element HLS.js is playing in) to the audio graph.

• AnalyserNode
  This node analyzes the audio in chunks, giving you frequency data (via FFT) and time domain data. The time domain data is simplified from the main stream. You can run a min/max on it to get a value (generally -1.0 to +1.0). You can use that value in your visualization.

You also need to connect the AnalyserNode to the AudioContext's destinationNode to output the audio in the end, since it will be re-routed from that video element.

Note that this solution isn't particular to HLS. The same method works on any audio/video element, provided that the source data isn't tainted by cross-origin restrictions. Given how HLS.js works, you won't have to worry about that, since the CORS problem is already solved or it wouldn't work at all.