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

$3

sh

npm install react-wave-audio-player





$3



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

sh

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





$3



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



🔗 Tailwind CSS Setup: Using Tailwind with Vite



---



📖 Usage



$3

tsx

import React from "react";

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



const App = () => {

  return (

    

      

    

  );

};



export default App;

$3

tsx

  src="/audio/sample.mp3"

  waveColor="#a3aed0"

  progressColor="#3311db"

  cursorColor="blue"

  buttonsColor="#ff5722"

  barWidth={3}

  barRadius={2}

  barGap={1}

  height={80}

  playIcon={}

  pauseIcon={}

  volumeUpIcon={}

  volumeMuteIcon={}

  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 |

               | Custom play icon                   |

|

pauseIcon | ReactNode |

              | Custom pause icon                  |

|

volumeUpIcon | ReactNode |

   | Custom volume up icon              |

|

volumeMuteIcon | ReactNode |

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

!React Wave Audio Player Preview