Feature Request: Audio Visualiser

[MariuzM]

Sorry if this is something already supported but I'm failing to implement it, but if not, are there plans to support it? I know there are some NPM packages with React Audio Visualiser but most of these samples i've see are just using .mp3 files.

Currently i have stream playing and would like to add a visualiser element to it.

[VictorGaiva]

What do you mean by visualizer? Do you have an example?

[MariuzM]

Something like this: https://www.npmjs.com/package/react-audio-spectrum

[VictorGaiva]

This seems to be too specific for this module. But this module is generic enough for you to be able to do this on your own.

You might be able to do this by creating a canvas bellow the player and drawing the visualization yourself, based on the data from the audio stream and the current seek value.

There is probably already some module able to do the canvas part.

[cookpete]

This is simply beyond the scope for this library. There's no reason you couldn't hook react-audio-spectrum up to ReactPlayer though. Something like this should work (untested code, based on the example here):

<ReactPlayer
  url='https://storage.googleapis.com/media-session/elephants-dream/the-wires.mp3'
  playing
  controls
  config={{ file: { attributes: { id: 'audio-element' } } }}
/>
<AudioSpectrum
  id="audio-canvas"
  height={200}
  width={300}
  audioId={'audio-element'}
  capColor={'red'}
  capHeight={2}
  meterWidth={2}
  meterCount={512}
  meterColor={[
    {stop: 0, color: '#f00'},
    {stop: 0.5, color: '#0CD7FD'},
    {stop: 1, color: 'red'}
  ]}
  gap={4}
/>

[cookpete]

Similar request here: https://github.com/CookPete/react-player/issues/153