🎧 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...

⚙️ 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 ❤️

sonix-player website will be coming up soon 🔜