Download it here: SorterRefactor.html (16.3 KB)
If you’re having trouble playing audio (it won’t load properly) try using Edge - it has a delay where it waits a bit for the sound to load and checks it, which Chrome doesn’t seem to do.
Wanted to learn a bit more javascript, and now that we’ve had this massive library of high-grade sounds released, I thought I’d make a web tool to help categorise them.
- You can sort songs by their genres, with the buttons at the top
- Clicking on the song gives you a popup, with details and a link to the catalog page
- Preview the sound in the browser (this is a bit buggy, try slowly entering and re-exiting the popup a few times until it loads)
- Get the songs assetId, a brief summary of it and how long since it was updated
Hope this comes in handy for a project, since I bet everyone is currently switching the music in their games over to this :3
Note: Please beware that after a long time with the page open gathering info on sounds, sorting by genre can take a while to process. This is normal, and is due to the massive volume of sounds Roblox has uploaded.
Libraries + Resources used:
- Bulma CSS
- Metafizzy isotope (+ packery library)
- CORS anywhere proxy (https://cors-anywhere.herokuapp.com/)
Details about my incredibly sloppy implementation
The code for this is in the body tag, very bottom of the page - if you wish to see the code, I’ve annotated it a bit, if that helps you figure it out better. (If you can, my code comments are horrible 0.o)
The tool works by requesting data from Roblox’s catalog API (https://search.roblox.com/catalog/json), with filters set up to only show audio. A function takes this data, checks that its a unique song that hasn’t been added to the page before, and then creates a tile for it.
The genre is grabbed from the audio’s description. Fortunately, the line specifying the genre is always on the same line, so I don’t have to do some annoying string search thingy. It also checks all of the genres, to see if that genre has been seen before. If it hasn’t, then a button is created at the top of the page for it.
For the popup / modal, each tile has a json object that is supplied by Roblox’s API. Whenever you click on a tile, it supplies that object to a function that shows the modal, and modifies its properties to show details about the audio in the form of a popup. As for the audio player, luckily a direct link to the mp3-format file on roblox’s CDN is included, so I just have to set an audio player’s reference to that. For some reason this is never guaranteed to work, but I can’t figure out how to fix it 
