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! 🚀🎵