brgndy-react-wave-form

react audio waveform library like soundcloud

- install

npm install brgndy-react-wave-form

- Usage

import {
  AudioWaveForm,
  AudioWaveFormWrapper,
  PlayOrPauseButton,
} from "brgndy-react-wave-form";
import { buttonClass, waveFormClass, waveFormContainer, icon } from "./App.css";
import { ReactComponent as PlayIcon } from "../src/assets/play.svg";
import { ReactComponent as PauseIcon } from "../src/assets/pause.svg";

const mockMusicData = [
  {
    id: 1,
    src: "/music1.mp3",
  },
  {
    id: 2,
    src: "/music2.mp3",
  },
  {
    id: 3,
    src: "/music3.mp3",
  },
];

function App() {
  return (
    <>
      <AudioWaveFormWrapper>
        {musicData.map((music) => {
          return (
            <div key={music.id} className={waveFormContainer}>
              <PlayOrPauseButton
                src={music.src}
                className=""
                playOrPauseValues={[
                  <PlayIcon className={icon} />,
                  <PauseIcon className={icon} />,
                ]}
              />
              <AudioWaveForm
                waveFormWidth={800}
                barWidth={3}
                barGap={3}
                barVariability={0.5}
                waveFormClassName={waveFormClass}
                audioFileSrc={music.src}
                backgroundTopColor={"red"}
                backgroundBottomColor={"yellow"}
                barTopColor={"black"}
                barBottomColor={"gray"}
              />
            </div>
          );
        })}
      </AudioWaveFormWrapper>
    </>
  );
}

export default App;

AudioWaveForm Component Props

| Name | Datatype | Default | Description | | --------------------- | -------- | ------------------------ | -------------------------------------------------------------------------- | | audioFileSrc | string | "" | URL of the music file you want to convert to WaveForm | | waveFormClassName | string | "" | className you want to apply that canvas component. | | waveFormWidth | number | 500 | The basic width of the canvas you want to convert. default minimum is 500 | | waveFromHeight | number | 200 | The basic height of the canvas you want to convert. default minimum is 200 | | barWidth | number | 3 | Area of ​​the waveform bar you want to convert. default minimum is 3 | | barGap | number | 3 | gap between waveform bars. default minimum is 3 | | baseBarHeight | number | 0.2 | Bar height of basic waveform. default minimum is 0.2 | | barVariability | number | 0.6 | Change in height between waveform bars. default minimum is 0.6 | | backgroundTopColor | string | "rgb(92, 92, 92)" | Top of the default background color that has not been played yet | | backgroundBottomColor | string | "rgba(0, 128, 255, 0.7)" | The part below the default background color that has not yet been played. | | barTopColor | string | "rgb(0, 128, 255)" | The color of the top part when the song is played | | barBottomColor | string | "rgba(92, 92, 92, 0.7)" | The color of the bottom part when the song is played |

PlayOrPause Button Component Props

| Name | Datatype | Default | Description | | ----------------- | ------------------------------------------------------ | ----------------- | -------------------------------------------------------------------------------------------------------------- | | audioFileSrc | string | "" | src of the music you want to play | | className | string | "" | className you want to apply that component. | | playOrPauseValues | [string, string] or [React.ReactNode, React.ReactNode] | ["play", "pause"] | Contents to be included in the play and pause buttons, index 0 is related to play, index 1 is related to pause |

Pitfalls

If you want to insert content into a button as SVG, use a conversion tool like svgr to convert it into a component!

Author

• brgndyy github

License

MIT