🎧 Sonix Player

Sonix Player is a modern, customizable audio player built as a Web Component.
It’s designed to be lightweight, framework-agnostic, and flexible — ready to work with React, Vue, Vite, or even plain HTML/CSS/JS.

✨ Easily add playback controls, thumbnails, volume, speed, repeat options and more to your web apps.

🚀 Installation

With NPM (for frameworks like Vite, React, Vue, etc.)

npm install sonix-player

🧩 Framework Integration Guide (Vite, React, Vue)

Sonix Player is built as a Web Component, which makes it super easy to use in any modern JavaScript framework like React, Vue, or apps powered by Vite.

📦 1. Installation

Install the package via npm:

    npm install sonix-player

🧠 2. Usage in Vite

In your main.js or main.tsx file:

    import SonixPlayer from "sonix-player";
    import "sonix-player/style.css";

    // Initialize the player
    const player = new SonixPlayer();

Use the component anywhere in your app (HTML syntax):

    <sonix-player
        data-src="/audio/song.mp3"
        data-thumbnail="/images/cover.jpg"
        data-figure="/images/figure.jpg"
        data-artist="Let The End"
        data-name="Linkin Park"
    ></sonix-player>

🧪 Custom Styles

Add own custom styles on your player with this class like => max-width - margin - padding - width and more...

.sonix-player

⚙️ Features

✅ Lightweight & fast

🎨 Fully styled with Tailwind CSS

🖼️ Supports thumbnails

🔁 Repeat mode

⏩ Playback speed control

🔉 Volume slider

💾 Download button

🌙 Dark mode–friendly

💡 Web Component – works anywhere!

📂 Attributes

Attribute	Description	Example and Default Value
data-src	Audio file source	/music.mp3" - hidden
data-thumbnail	Thumbnail Image on player top	/cover.png" - hidden
data-figure	Figure of track Image	"/img.png" - hidden
data-artist	Track Artist name	Linkin Park - hidden
data-name	Track name	Let the end - hidden
data-auto	Auto Play audio then loaded	true or false - false
data-volume	Show Volume Control Button	true or false - true
data-repeat	Show Repeat Control Button	true or false - true
data-speed	Show Speed Button	true or false - true
data-max	Max Speed for Speed Control Button	number - 2
data-download	Show Download Track Button	true or false - true
data-black	Player black color	color - #121212
data-accent	Player accent color	color - #fff
data-primary	Player primary color	color - #303030
data-seconadry	Player seconadry color	color - #ff4600

🛠️ Development

To clone and run locally:

git clone https://github.com/AnuXiii/sonix-player cd sonix-player npm install npm run dev

To build for production:

npm run build

📦 CDN & UNPKG

Get the Last Version : https://app.unpkg.com/sonix-player

📄 License

MIT © AnuXiii

🌟 Star the Repo If you find this package useful, please consider starring the repo! Your support helps improve and grow this project ❤️