brgndy-react-wave-form v1.1.0

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

PlayOrPause Button Component Props

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