0.1.5 • Published 1 year ago

react-audio-spectrum v0.1.5

Weekly downloads
294
License
MIT
Repository
-
Last release
1 year ago

React Audio Spectrum

An audio spectrum visualizer for react.

npm.io

Live Demo

https://hu-ke.github.io/react-audio-spectrum/

Getting Started

<audio id="audio-element"
  src="path/to/your/song.mp3"
  autoPlay
>
</audio>
<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}
/>

you can also pass audio element to the component

this.audioEle = new Audio('path/to/your/song.mp3) 
<AudioSpectrum
  id="audio-canvas"
  height={200}
  width={300}
  audioEle={this.audioEle}
/>

if you use both audioId and audioEle props, the component will ignore audioEle.

How to fix CORS issue?

if you encounter the console error like: MediaElementAudioSource outputs zeroes due to CORS access restrictions That means your web application attempts to access resources (like MP3 files) from a different origin (domain, protocol, or port) without the appropriate CORS headers being set by the server hosting the resource. Here is the nginx sample config to resolve CORS errors:

location / {
    add_header 'Access-Control-Allow-Origin' '*';
}

Or, if you are specifying allowed origins:

location / {
    add_header 'Access-Control-Allow-Origin' 'https://your-website.com';
}

Further more, you need to add the crossOrigin attribute to your audio element:

<audio id="audio-element1"
  src="https://reader.guru/medias/How-Long-Will-I-Love-You.mp3"
  crossOrigin="anonymous"
>

The link https://reader.guru/medias/How-Long-Will-I-Love-You.mp3 has been configured with Access-Control-Allow-Origin header, you can use it for testing.

Props

propertydescriptiontypedefaultisRequired
idcanvas idnumber/stringa random stringfalse
widthcanvas widthnumber300false
heightcanvas heightnumber200false
audioIdid of the target audio elementnumber/string-false
audioEletarget audio elementaudio object-false
capColorcolor of capsstring#FFFfalse
capHeightheight of capsstring2false
meterWidthwidth of metersnumber2false
meterColorcolor of metersstring/array{stop: 0, color: '#f00'},{stop: 0.5, color: '#0CD7FD'},{stop: 1, color: 'red'}false
gapgap between metersnumber10false

Install

yarn add react-audio-spectrum --save
or
npm install react-audio-spectrum --save

Contributing

react-audio-spectrum is a free and open source react library, and I appreciate any help you're willing to give - whether it's fixing bugs, improving documentation, or suggesting new features.

0.1.2

1 year ago

0.1.1

1 year ago

0.1.4

1 year ago

0.1.3

1 year ago

0.1.5

1 year ago

0.1.0

6 years ago

0.0.9

8 years ago

0.0.8

8 years ago

0.0.7

8 years ago

0.0.6

8 years ago

0.0.5

8 years ago

0.0.4

8 years ago

0.0.3

8 years ago

0.0.2

8 years ago

0.0.1

8 years ago