react-audio-wave-with-segments

react-audio-wave

A react component that visualizes a waveform of an audio file. Source code at https://github.com/llaurora/react-audio-wave.

Installation

# if you prefer npm
npm install react-audio-wave

# if you prefer yarn
yarn add react-audio-wave

# if you prefer pnpm
pnpm add react-audio-wave

Example

const AudioPlayer = () => {
    {/* ... */}
    return (
        <div className="audio-player">
            {/* ... */}
            <ReactAudioWave
                supportPlaybackRate
                className="audio-wave-container"
                waveHeight={waveHeight}
                colors={colors}
                audioSrc={audioSrc}
                onChangeLoadState={onChangeLoadState}
                onCurrentTimeChange={onCurrentTimeChange}
                onPlayEnded={onPlayEnded}
                placeholder={Placeholder}
            />
        </div>
    );
};

Full code of the example, refer to the example

Props

For the interface definition, please refer to the API documentation

interface ReactAudioWaveProps {
    waveHeight: number;
    colors: Wavecolors;
    audioSrc: string;
    placeholder: PropsWithChildren<any>;
    emptyElement?: ReactElement;
    barGap?: number;
    barWidth?: number;
    progressStyle?: CSSProperties;
    supportPlaybackRate?: boolean;
    mono?: boolean;
    progressCursorVisible?: boolean;
    cursorVisible?: boolean;
    cursorTimeConfig?: CursorTimeConfig;
    className?: string;
    timeFormat?: (seconds: number) => string;
    onChangeLoadState?: (state: LoadStateEnum, duration?: number) => void;
    onCurrentTimeChange?: (current: number) => void;
    onWaveSizeChange?: (size: Size) => void;
    onPlayEnded?: () => void;
    renderErrorElement?: (error?: string) => ReactElement;
}