VIP Vidya Intarweb Playlist 3.0 Open BETA #vip

Today is the VIP's 11th birthday! So what better time to release the VIP 3.0 open beta than right now! After months upon months of off-and-on work (mostly off), the official HTML5 player is here.

No, here.

Features of the original VIP HTML5 player (the base) :

• Playlist selection dropdown box! For selecting a specific playlist.
• Repeat a track! Press the repeat button to play a track ad nauseam.
• Playlist selection and volume are saved! No need to readjust.

Added Features:

• Deeper, sexier color tones! Guaranteed to make even the colorblind wet.
• Draggable controls! I couldn't decide where to put the controls, so I made you decide on your own. My indecision actually led to something cool!
• Keyboard controls! "Space" to play/pause; "left/right" to seek backward/forward; "ctrl + left/right" to go to previous/next track; "ctrl + up/down" to increase/decrease volume. Each track can also be highlighted by pressing "tab" to go down or "shift + tab" to go up; then it's just a matter of pressing "enter" to play the highlighted track. If your mouse is busted, the playlist is fully navigable with just the keyboard!
• Share a direct link to a track including fully-working social share buttons! Press the share button to show a link to share with your friends or significant others. Only VIP and Source are shareable for now.
• Loading from a shared link magically removes the hashtag code in the URL! It's coding sorcery, I tell you.
• Excellent portability! Listen to the VIP on every machine and in every browser, except Internet Explorer 9 and under. Try it out on your 16K screen. Try it out on your computer at work that's stuck with Internet Explorer 10/11.
• Install as an app on your phone or PC! For those times when you want to listen to the VIP immediately.
• Switching between VIP and Source while playing a track will play the same track! If you want to hear the original of an arrangement or an arrangement of the original, you can switch between playlists and hear them.
• Update warning! With the magic of Workbox service worker technologies, the page will display a warning upon load if there's an update to the playlists or the code, prompting you to reload. I still don't fully understand it, but Google helped make it work.
• You can add "/source", "/mellow", or "/exiled" to the URL to go directly to the specified playlist!
• Useless feature: You can save the page and it will run when you open the file, just like the Flash version!

Planned Features:

• Show an error message when loaded in IE9 and under.
• Add a button to play the original track instead of the arrangement, if you hate the arrangement that much. (VIP only)
• Combine playlists into super-playlists.
• Add a never play button, because you hate a track so much that you never want it to play, unless you click on it directly.

Known Bugs:

• The playlist doesn't work in IE9 and earlier. This will never be fixed. Upgrade your browser, boomer.
• The volume control doesn't affect the rain audio in the Mellow playlist. This is intended behavior. I wanted you all to have separate control of the rain volume, but I didn't want to add another volume control and clutter the space.
• The border around the play button may not be even.
• Border gradients don't work in IE.
• Some flickering occurs in Chrome when toggling the header.
• The control box has some graphical layering issues in MS Edge.
• If you repeatedly skip tracks, every browser, except Safari, will not stop downloading the tracks you skipped over, using up unnecessary bandwidth. I don't know how to fix this; so if you value your bandwidth, limit your skips.
• Because of Workbox, normal browser caching no longer works for some reason. Because of this, I had to implement a way to force cache the music. Currently, up to 500 tracks will be cached if you play through them. So if you happen to go offline for whatever reason, the playlist will be able to play those cached 500 tracks. This doesn't work in Firefox.

Nerdy Stuff:

• Google Lighthouse
  
  The performance result fluctuates between high 70s and low 90s. I tried to make the site load super-fast to improve user experience and ranking, even though it is a niche site with no competitors. Is it probable for the site to rank #1 in the search for "video game music"? Perhaps.
  The best practices result is stuck at 92 because of JQuery's lack of passive listeners.
• The rosters are now in JSON instead of XML. JSON makes the rosters much cleaner and improves performance. More details are in this post.
• Remove the ".min" from the filenames to view the unminified mess of source code, complete with a bajillion comments. The code is more than triple the size of the original VIP HTML5 player.
• I made an album of the alpha development, because why not?
• There is a humans.txt. I have to mention it, because only turbo-nerds know about it. It's a pretty useless file to include, but it's still a fun file to make.

Confused about the version number? VIP 1.0 was a terrible and short-lived version that used MP3. I had to make some alterations to the Flash player to be able to play AAC and add rain audio to Mellow. When 2.0 was introduced, everything (about 100 tracks or so) was converted to AAC. It's sad that the changelog still hasn't kept up. Using Flash editors in general was a bad experience, so I haven't made any other changes since then.

Someone tell me if I screwed up badly somewhere, but most of all, enjoy! Thanks for listening all these years.

Thanks! Yeah, the other players are the inspiration for making my own!

Thanks! Notepad++ is the only text-based program I use, because it has everything!

I personally find the current theme to be dark enough, but I'll see if I can add some more themes.