React Wave Audio Player

A customizable React audio player built with TypeScript, Tailwind CSS, and WaveSurfer.js. This package provides a fully responsive and visually appealing audio player with waveform visualization.

🚀 Features

🎵 Waveform Visualization using WaveSurfer.js
🎨 Customizable Colors & Styles (progress bar, cursor, buttons, etc.)
🎚️ Adjustable Volume & Playback Speed
⏯ Play/Pause, Mute/Unmute Controls
📥 Audio Download Button
✨ Works with Tailwind CSS for styling

📦 Installation

1. Install the package

npm install react-wave-audio-player

2. Install required peer dependencies

Since this package depends on react, react-dom, tailwindcss, wavesurfer.js, and react-icons, ensure they are installed in your project:

npm install react react-dom tailwindcss wavesurfer.js react-icons

3. Configure Tailwind CSS (If not already set up)

If you haven't set up Tailwind CSS, follow the official documentation:

🔗 Tailwind CSS Setup: Using Tailwind with Vite

📖 Usage

Basic Example

import React from "react";
import { AudioPlayer } from "react-wave-audio-player";

const App = () => {
  return (
    <div className="p-4">
      <AudioPlayer src="/audio/sample.mp3" />
    </div>
  );
};

export default App;

Customizing the Player

<AudioPlayer
  src="/audio/sample.mp3"
  waveColor="#a3aed0"
  progressColor="#3311db"
  cursorColor="blue"
  buttonsColor="#ff5722"
  barWidth={3}
  barRadius={2}
  barGap={1}
  height={80}
  playIcon={<YourCustomPlayIcon />}
  pauseIcon={<YourCustomPauseIcon />}
  volumeUpIcon={<YourCustomVolumeIcon />}
  volumeMuteIcon={<YourCustomMuteIcon />}
  playbackSpeeds={[0.5, 1, 1.5, 2]}
  onPlay={() => console.log("Playing")}
  onPause={() => console.log("Paused")}
  onVolumeChange={(vol) => console.log("Volume: ", vol)}
/>

🎨 Props & Customization

Prop	Type	Default	Description
`src`	`string`	Required	URL of the audio file
`waveColor`	`string`	`"#a3aed0"`	Color of waveform
`progressColor`	`string`	`"#3311db"`	Color of progress bar
`cursorColor`	`string`	`"blue"`	Color of cursor
`buttonsColor`	`string`	`"#3311db"`	Color of control buttons
`barWidth`	`number`	`2`	Width of waveform bars
`barRadius`	`number`	`2`	Radius of waveform bars
`barGap`	`number`	`1`	Gap between waveform bars
`height`	`number`	`100`	Height of the waveform
`playIcon`	`ReactNode`	`<FaPlay />`	Custom play icon
`pauseIcon`	`ReactNode`	`<FaPause />`	Custom pause icon
`volumeUpIcon`	`ReactNode`	`<BsFillVolumeUpFill />`	Custom volume up icon
`volumeMuteIcon`	`ReactNode`	`<BsFillVolumeMuteFill />`	Custom mute icon
`playbackSpeeds`	`number[]`	`[1, 1.5, 2]`	Available playback speed options
`onPlay`	`() => void`	`undefined`	Callback when audio starts playing
`onPause`	`() => void`	`undefined`	Callback when audio pauses
`onVolumeChange`	`(volume: number) => void`	`undefined`	Callback when volume changes

📜 License

This project is licensed under the MIT License.

🤝 Contributing

If you find any issues or want to contribute, feel free to open an issue or submit a pull request on GitHub.

🔗 GitHub Repository: react-wave-audio-player

⭐ Support

If you like this package, please give it a ⭐ on GitHub!

Happy coding! 🚀🎵