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:
<pira-player></pira-player> <script src="YOUR FILE HERE"></script>The boring part
blah blah blah this was the first layout I was making for my MPB (Brazilian music) player when I decided to this whole thing, this page is pretty bare bones now, been working on this widget for awhile and I'm excited about putting the 1.0 version out there - gonna bling this page later.
It shows the buttons cartoony effect with random hues and angles I mentioned.
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?
Support for multiple playlists.
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:
: v1.playback-should-work-better-on-mobile-now is out.
It is a small (not quite) update to fix the problem of mobile browser background throttling, which, even with the next song already loaded, would stop playing at media end if the tab wasn't focused. I created a silent dummy audio file that the browser believes is the real audio while the real playlist is in the background, that way it will take 1h (the length of my file) for the first media end to fire, so if you are on mobile you will have at least 1h of music without having to look at the page again.
In the script file there are instructions on how to create and link your own dummy file, so you can make a longer one if you wish (but depending on the browser and OS, they might shut JS down before media end anyway, mobile devices are designed for you to download hundreds of apps to monitor your data instead of just surfing the web through a browser).
There wasn't any changes to UI and customization, but I really have to get the CSS tighter.
: 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.
