1

I'm working on a project which will have a audio playlist, Along with that i have to build a audio visualizer. I have a rough idea about how to do this if the source is an audio. The problem is, the source is a m3u8 and i'm using Hls.js with a HTML 5 video tag to implements an HTTP Live Streaming. My goal is to build a audio player which support HTTP Live Streaming and can show visualization. What is the best way to do it?

Thanks in advance.

Derek Pollard
  • 6,953
  • 6
  • 39
  • 59
Rinas Musthafa
  • 37
  • 3

1 Answers1

0

Hope It will help

> let video = document.getElementById('videoId'); let audioContext = new
> AudioContext();
> 
> const UsrAg = navigator.userAgent; var stream = null; if
> (UsrAg.indexOf('Firefox') > -1) { stream = video.mozCaptureStream(); }
> else { stream = video.captureStream(); }
> 
> var audioSrc = audioContext.createMediaStreamSource(stream) const
> analyser = audioContext.createAnalyser(); audioSrc.connect(analyser);
> analyser.fftSize = 256; const bufferLength =
> analyser.frequencyBinCount; const frequencyData = new
> Uint8Array(bufferLength);
> 
> 
> function renderFrame() {  requestAnimationFrame(renderFrame);
>   analyser.getByteFrequencyData(frequencyData);   that.setState({
> frequencyData: frequencyData }); } renderFrame();
Suriya Prakash
  • 1