better audio players 🎧

Sonix Player

									
Install :

									
										npm 
											i
										
										sonix-player
									
									
								
											
												main.js or app.js
												

													import
													SonixPlayer from "sonix-player"
												

												

													import
													"sonix-player/style.css"
												

												

													const
													player = newSonixPlayer()
												

											
										
											
														Use the component anywhere in your app (HTML syntax)
														<sonix-player
														data-src="/phonk.mp4"
														data-thumbnail="/phonk.jpg"
														data-figure="/phonk.jpg"
														data-name="phonk"
														data-artist="phonk music"
														data-auto="true"
														data-volume="true"
														data-repeat="true"
														data-speed="true"
														data-max="4"
														data-download="true"
														data-black="#121212"
														data-accent="#f50"
														data-primary="#121212"
														data-secondary="#ccc">
														</sonix-player>
											
										
											
												main.jsx or app.jsx
												

													import
													SonixPlayer from "sonix-player"
												

												

													import
													"sonix-player/style.css"
												

											
										
											
														Anywhere in your component JSX
														function MyPlayer() {
														return (
														<sonix-player
														data-src="/phonk-song.mp3"
														data-thumbnail="/phonk-thumb.png"
														data-figure="/phonk-fig.png">
														and many more features...
														<sonix-player/>
														);
														}

														export default MyPlayer
											
										
											
												Add this in your HTML head
												<link
												rel="stylesheet"
												href="https://unpkg.com/sonix-player/style.css"/>
												<script
												type="module"
												src="https://unpkg.com/sonix-player"</script>
											
										
											
														Use the component anywhere in your app (HTML syntax)
														<sonix-player
														data-src="/phonk.mp4"
														data-thumbnail="/phonk.jpg"
														data-figure="/phonk.jpg"
														data-name="phonk"
														data-artist="phonk music"
														data-auto="true"
														data-volume="true"
														data-repeat="true"
														data-speed="true"
														data-max="4"
														data-download="true"
														data-black="#121212"
														data-accent="#f50"
														data-primary="#121212"
														data-secondary="#ccc">
														</sonix-player>

Features

Volume & Speed Control

Adjust playback speed and volume effortlessly with built-in controls — no extra code needed.

Fully Customizable Styles

Easily restyle the player with your own CSS or Tailwind classes to match your brand or theme.

Responsive & Lightweight

Designed to work seamlessly across all devices — mobile, tablet, and desktop — with minimal footprint.

Thumbnail & Metadata Support

Display album art, track name, and more using simple attributes. Looks great and adds context.

Easy to Use Anywhere

Framework-agnostic: Use it with React, Vue, Vite, or even plain HTML/CSS/JS.

Repeat & Autoplay

Easily enable repeat and autoplay functionality with simple attributes. Ideal for looping music or auto-start playback on load.

Examples

									
													Use the component anywhere in your app (HTML syntax)
													<sonix-player
													data-src="/sounds/montagem.mp4"
													data-thumbnail="/images/artwork-2.jpg"
													data-figure="/images/artwork-2.jpg"
													data-name="MONTAGEM"
													data-artist="phonk music"
													data-max="6"
													data-black="#212529"
													data-accent="#40c057"
													data-primary="#fff"
													data-secondary="#94d82d">
													</sonix-player>
									
								
									
													Use the component anywhere in your app (HTML syntax)
													<sonix-player
													data-src="/sounds/montagem.mp4"
													data-figure="/images/artwork-2.jpg"
													data-artist="phonk music"
													data-name="MONTAGEM"
													data-volume="false"
													data-repeat="false"
													data-speed="false"
													data-download="false"
													data-black="#343a40"
													data-accent="#f03e3e"
													data-primary="#e9ecef"
													data-secondary="#845ef7">
													</sonix-player>
sonix Thumbnail
Build with

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-secondary Player secondary color color - #ff4600

UNPKG links

style.css.min

										
											https://unpkg.com/sonix-player/style.css

sonix-player.js.min

										
											https://unpkg.com/sonix-player

With NPM

for vite apps or react

										
											npm 
												i
											
											sonix-player

Clone it

clone and run locally:

										
											git 
												clone
											
											https://github.com/AnuXiii/sonix-player

GitHub Info

sonix-player github-page