react-wave-audio-player v1.0.3

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

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