/brgndy-react-wave-form

react audio waveform library like soundcloud

Primary LanguageTypeScriptMIT LicenseMIT

brgndy-react-wave-form

react audio waveform library like soundcloud

화면 기록 2024-04-10 오후 10 42 04

- 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

License

MIT