Press Play Now!

v1.help-me-i-dont-know-how-to-name-versions is out \o/

Wanna make one for you? Just copy the code and start editing, it's fully commented and has tons of features:

-> https://pirahxcx.neocities.org/pira-player/demo-player.js <-

Control everything through the Customization section!

• Customize inner and outer backgrounds with colors, gradients, images. You can have they all rotating or changing at random.
• Create your title with either text or images, you can upload custom fonts, set outline, have hover effects of textshadow/dropshadow, hue-rotate, brigthness, changing text or image, and you can add animations to it - by the way, everything you can pick from random pools of your making or rotate through themes like I'm doing on this demo.
• Customize the buttons, set dropshadow, brightness, hue, have the icon changing on hover, you can also place them at random hue and angle changes for a cartoony effect.
• Customize the file display, change font, color, outline, hover color and other effects, change the background, use blur, you can also have the file name scrolling or being typed.
• Decorate your widget! There are four slots that you can fully control the behavior to enable or disabled and change their timers etc etc, apply animations to your image, control their size, have stuff at random or just plan your theme.
• Custom cursors that can also change at your will.
• If you think the widget is too small or too big, you can scale its size.
• With a little CSS knowledge you can tweak it all to your will.

If I did a shitty job on the code explaining how to use it let me know!

I hope you are enjoying this demo playlist of local alternative rock bands I made :)

But if you aren't...

Make your own playlist!

No, this won't work with YouTube or Spotify and I don't intend to make it work, if you want a playlist you gonna have to Do It Yourself!

Where to host files?

You need to place your songs somewhere you can get a raw link for it, so stuff like Google Drive, Proton Drive and Mega won't work. Catbox and File Garden aren't made for streaming, they have very limited bandwidth and the connection isn't reliable. One option is hosting on the Internet Archive, but their bandwidth throttles a lot for streaming, so the best place to host your songs is actually where you are hosting your site. If you are on Neocities you need a premium subscription to upload audio files, if you are on Nekoweb you can do on free tier. As I didn't want to use up all my storage with playlists, I'm using Dropbox, that gives you 2GB storage on free tier.

Here's the playlist of this demo: https://pirahxcx.neocities.org/pira-player/demo-playlist.json. You are going to have to create a file following this exact formating (press Ctrl U to see the Page Source). I guess it's pretty straight forward, put the name you want displayed on the first field, then the raw link to the file. If you are hosting your songs on Neocities or Nekoweb it's not a problem, but there's a trick if you are hosting on Dropbox, when you copy the share link you gotta change the end of it from dl=0 to raw=1 and that's it.

"Okay, I copied the file and I'm editing it, how do I make it work?

Just place this somewhere and the widget will render:

Someone please make good layouts!

I put a bit more of work in this demo, but the two players I'm actually using for myself are pretty clean and boring.

If you customize the widget for you let me know, I'd love to make a gallery with people's layout and playlists :D

Look at me also using fauux art without crediting him! Yeah, that cool Lain gif and more you can find here: https://fauux.neocities.org/

The cursors were hand drawn by me :D
The buttons were edits I made from... I will find later and do proper attributions.

Planned features:

• Add brightness and hue option to all hover effects.
• Add thumb border control.
• Add possibility to change button image on hover... imagine your button is a mouth and it tries to bite your cursor? Or an eye that closes? Shit, gonna have to add this to title image as well!
• Scroll file name automatic if it doesn't fit the display.
• Make playlist shuffle optional.
• Uh, why I haven't put text color change on title too?
• Maybe a mini version like all media players got in the 2000s?
• Perhaps mid top and mid bottom decor slots as well...
• Make more CSS animations... ideas?
• If someone says they abolutely need borders to be changing with timers on their layout I will copy paste the code from the other parts.

Send suggestions and bug reports and nude to pirahxcx@proton.me

ps: My page has an auto upscale for 1920x1080 resolution or higher, so if that's yours, you are seeing the widget 1.5x bigger than it actually is - but if you want it this exact size, you can scale it in the customization menu.

Version History:

• 2026/05/26: v1.0 is out \o/
• 2026/05/28: v1.help-me-i-dont-know-how-to-name-versions is out \o/
• Shuffling songs is now optional.
• Added brightness and hue-rotate effects to title, buttons, thumbs, and file name.
• Title can change image/text on hover. Buttons can change image.
• Now you can properly control thumb border.
• Fixed song name scrolling weird reset.
• If song name doesn't fit the display it will auto scroll.
• Added Pulse animation.