Song Picker for the new Roblox Sounds


#1

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:


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 :confused:


Upcoming Music Changes and Copyright Related Action
#2

pray


#3

This is an amazing service, I’m so glad it’s been made. Thank you so much for making Roblox’s gift to us 1000x better and easier to access!

One feature that would be nice would be the ability to search by length or range of length, other than that I think you’ve ticked all the boxes.


#4

Thank you senpai!

Edit: Omg I actually checked this, dude, you’re a life saver!


#5

Yep! This’d be a good feature, will probably do that next.

When they finally stop uploading new audios, I’ll make a v2 of this with a massive list of the audios already embed in the webpage, and that should have everything in there (sort by length, name, date added, search feature?).

2 days later it’s still going strong though, so it’ll probably be another few days 'til I can start working on that :stuck_out_tongue:


#6

Cool website - one suggestion I have is that you can try change the URL (without reloading the page) when visitors clicks to view details about an audio - that way I can share the link with other people easily instead of them having to look through your page to find it :wink:

Depending on your server software, you can use things like Apache Web Server’s .htaccess files to map your fancy-looking URLs into the index.html URL with some query parameters.


#7

I barely know any html / javascript, afraid that’s way out of my league :stuck_out_tongue:
Hopefully an official solution for sorting the songs will come out soon!


#8

Oh dang! We really appreciate this!


#9

high five


#10

awesome


#11

This is quite useful since roblox’s searching system sucks


#12

I Have Uploaded This To My Website For Easier Access.

You can find it here: http://www.grilme99.xyz/songsorter/
Just added it to my site so you can just bookmark it and go to it whenever you need to.
If the site stops working or @Mighty_Loopy updated this then just DM me.

Updates: (I will update this with updates as they come.)

  • Basic Optimisation
  • Waiting for @Mighty_Loopy’s permission before doing any more optimisation changes and/or redesigning.

#13

Hey, I’ll be making a version two of this soon!
It should be coming out this week and will have searching, sorting by album and tags.

Most importantly it will be hosted on my own site, so you won’t have to download it. I’ll link it here when it’s finished.


#14

I tweeted about this a little while back, but you can use the official APM Music website too. You just have to apply some filters to only search the libraries that Roblox have licence for and have uploaded. I spent a bit of time compiling the list of libraries so here’s a picture of the ones included in the Roblox library (selected in white):

And here’s a link to my tweet which has the libraries already selected on the search tool (it’s a super long link which is why I’m not posting it directly): https://twitter.com/BanTechRBLX/status/1003592628880007169

Might help a few of you creating these song pickers, or it might negate the need for them ¯\_(ツ)_/¯ Either way, this is what I use to pick songs from the new library.

Edit: you do have to copy the song name and paste it in the search bar in the Roblox library after finding a track you like, so an elegant solution like yours will still help a lot.


#15

It fails loading the files. It gives the error “Failed to decode file”
However, I am able to listen to these tracks on @grilme99 site.