Hello everybody, it's been a while since I've been active on the site, mostly been lurking in the shadows. I felt it's been too long since I've made a post on here not related to assisting someone else with their Wii troubles, so I decided to finally ship this out. This is going to be a lengthy post, so grab a snack or two.
So during this past December while I was on break, I spent the whole time working on this "tiny" web project I called DynMusic. It was meant to be a replacement for my horribly inefficient Kingdom Hearts themed music page from ages ago. This old page worked by having several spoiler-esque elements laid out on the page with many nested spoiler-esque elements inside those, and it was formatted like so:
....GAMENAME
........TRACKNAME1
........TRACKNAME2
........TRACKNAME...ETC
It took a long time to load, and so I finally put DynMusic together.
What it initially looks like (may have to right-click -> view image)
So as you can see from that screenshot, it has this dropdown list you can open up, and it has a list of tracks from a few games I was using to test this, mainly Tales of the Abyss and Kingdom Hearts II, anything beyond that is by request of a friend.
The dropdown, which had limited height until I upgraded browsers ):
There are many more than that, but I don't want to take several screenshots of the same thing.
When you select a track on that dropdown, the page will refresh, and the vID variable in the URL will become a video ID for use by the YouTube video player. The video will appear, in 240p, in the box to the right where it said "Please select a track from the dropdown list !! ". The video will loop for quite some time, so you don't have to keep going back to restart it while working on a project or whatever you may be doing at the time.
Karma from the TotA section was chosen, and so that specific video appears on the side
That covers what this was made to do - to play music on a near endless loop until I switch it or stop it, while being as efficient as possible. However, I went overboard and implemented two other features into this. One of them is a little webtool that automates the process of adding to the track/gameID lists, and the other is a theme selection menu.
The webtool was quite the challenge, I had to figure out how to make new additions to a text file in the middle of it while still keeping the formatting intact.
This is what the track addition tool looks like
Going in order, YouTube Video ID is the video id it will use in the video player to the right. Name of Track is what will show up in the dropdown list. Game ID is special, and will be described in greater detail in the next section. GAMENAME is the text that will be appended to the current page/tab title. After all that information is put in, all you do is click Automate and it will be added to the dropdown list.
Now as mentioned before, Game ID is a bit different than the others, so different that it needed it's own tool to automate the process of adding it. A Game ID is used for when you click on a game instead of a track in the dropdown list, it will instead display an image ( usually box art ) in the box to the right, along with it linking to a wikipedia page or other information page on it. The reason the track addition tool requires the Game ID is so it knows where to insert it in the list of tracks for the dropdown list.
The Game ID addition tool
Like before, going in order :
Game ID is the abbreviation of the title of the game/series ( Ex: KH2 - Kingdom Hearts II ),
Name is the full game name,
Menu Name is what will be displayed in the dropdown list,
Game Info Link is the informational page the image will lead to upon a click,
What Section to insert after will allow you some organization in choosing where this new Game ID/Section is added,
and Boxart allows you to upload an image of specific size to the host so it has something to display in the box to the right.
What it looks like when you select a game from the list
It was fairly tricky to get both of these to work, but I'm very proud of it. You reach the Webtool by clicking that gear in the top-left ( You won't see it unless you change the $ipLock variable to your own IP, I did this to prevent potential disaster on my side ).
Now for the other feature I implemented into this project, the themes menu. You access this ( not IP locked ! ) by clicking the rounded box icon in the top-left.
The themes menu, only 3/18 themes available at the moment
This is the theme selection menu, the themes from first to third are Default, KH-1, and Heartless-1. There is space for 18 total themes, plus I could expand it later on if I wished to do so. All you do is click on the theme you want, and it will take you back with the chosen theme applied. Cookies are required for this feature to work though.
For those who want to check this out themselves, here is the link to the page,
again, you will be unable to access the Webtool on this copy since it is locked to my IP.
If you are interested in the source, how it works, or want a copy for yourself, I will eventually set up a package you can download and then configure yourself to fit your setup.
Thanks for reading, have a nice day !
This was all typed while listening to a 10 hour loop of the main theme of Beowulf ( 2007 )
↧
Something I made this past December, "DynMusic"
↧