Source
r/Monstercat•
Incept2ed

Looking for feedback on my 'Monstercat Visualizer Site Thing' (Incept.gq)

Hey Guys!

so it's been quite a while since the last time I posted about my 'Monstercat Visualizer Site Thing' (http://incept.gq/). I've been developing it a lot lately and I've also been helping u/caseif with his original source code (I'm just the experiment).

 

or at least... ^I ^like ^to ^think ^so, ^^even ^^though ^^all ^^I ^^do ^^^is ^^^talk ^^^^lmao ^^^^^plzloveme

 

So I guess I'm here to ask your opinions on the site...

Does it work fine for you? Is there anything missing? Any Suggestions?

I'd also like to just quickly add that this is all non-profit and just for fun so I'll never run ads :)

 

I'm just looking for things to either fix or improve. Off the top of my head for the next update, the code will be a lot cleaner soon and will probably move over to a real SQL Database (a lot faster because currently it's just a .csv file). That'll also open up user account possibilities because atm it's just a 'login with google' system that gets your ID (that I'm proud of shhh...) so its a lot harder to manage song entries and stuff.

 

so yeah. Hopefully you can enjoy it for what it is now and help me figure out what I should do in the future!

luv u fam <3

- Incept

 

TL;DR: do u like dis? http://incept.gq/ ok good, now how I improve?

^^^^^Also... ^^^^^for ^^^^^the ^^^^^love ^^^^^of ^^^^^Monstercat, ^^^^^please ^^^^^stop ^^^^^uploading ^^^^^weeaboo ^^^^^music ^^^^^I'm ^^^^^going ^^^^^insane

Posted Feb 26, 2016, 3:20 PM UTC · edited

1655
marco_rennmausKarma Fields•

Where can you change your username? lol

2
Incept2edOPRezonate•

The new system currently just uses the users google ID, so for now it's more Anonymous til we move over to the database system.

1
TehRealMrGooglesLaszlo•

s'good

2
Incept2edOPRezonate•

thank ye

1
MunscroftMitchell Claxton•

it's pretty laggy for me, but that's probably just my computers fault

1
Incept2edOPRezonate•

potentially, do you know if you are using a dedicated graphics card or just integrated graphics? (intel type stuff).

1
alfonsinboxRezonate•

Works really smooth on my computer, thought the sound seems to be about .5 seconds before the animation happens, you could look into that. Also, if possible, you could try to work on the responsive design. The visualizer pretty much has a fixed width with a center position, try to make it smaller for smaller windows. Otherwise, looks pretty good to me!

1
Incept2edOPRezonate•

Yeah I'm aware of that, not really sure how we can fix that one because the calculations are done live so even if we delayed the audio it would still calculate on that delayed audio. Could maybe clone the audio stream, delay it and mute the detection one.

responsiveness needs work yeah... it does scale down if you resize then refresh but still looks kinda weird.

1
tuba_jewbaFeint•

Really laggy on my MSI GE72 Apache, not sure what's causing it. I should have plenty of memory for this. I'll try switching to Nvidia graphics and see if that helps.

Edit: Works great running on the high-performance graphics, my integrated graphics couldn't handle it. Only complaint is that it doesn't fill out my screen on fullscreen mode, there's a sizable black bar at the bottom (My screen is 1920 x 1080 if that has anything to do with it). Also, switching out of the tab causes it to stutter a bit when switching back. Usually its hardly noticeable, but sometimes it goes on for more than a few seconds. Could just be my computer, idk. Other than that, its awesome! keep up the great work!

1
Incept2edOPRezonate•

I think this is to do with the Bokeh/particles and how they are displayed, I believe that they are scaled up so much and changing so often that only some graphics cards play nice with them.

 

Did you hit reload frame or F5 after you went fullscreen? it needs to recalculate for 1080p :)

 

Now that I know for a fact is just how chrome/most browsers handles memory, if you're not using a tab (no matter how much memory you have) it kinda 'pauses it' so the vis kinda freaks out and tries to catch up when you return to it lol.

1
tuba_jewbaFeint•

F5 did the trick! Thanks for the response, I'll definitely be using this visualizer a lot haha.

1
crupeople_musicKarma Fields•

whenever i upload a song, it won't work. dunno whether it's just me or what.

1
Incept2edOPRezonate•

Do you get some kinda of error pop up? Hit F12 and look in the console for anything red :)

1
crupeople_musicKarma Fields•

no, it just won't load. and the slight problem is that i have a mac...

1
Incept2edOPRezonate•

I don't own any apple products so I haven't been able to test on Safari, unless you're using Chrome then I'm not sure.. errors should just pop up on the page now.

1
crupeople_musicKarma Fields•

i did it on opera and it's not working, maybe i'll try safari

1
manint71Karma Fields•
  • Make it so you can delete the songs you've uploaded.

Also, could you please remove all songs made by Meevs (me) because they are low quality and I wanna reupload them with better quality

1
Incept2edOPRezonate•

oh yeah that's totally something I forgot to re-add haha. I'll put that as a priority thing to add.

1
C_Mill24Karma Fields•

Not sure if it's possible to make the visualizer a little more accurate in detecting individual sounds, but overall it's pretty solid.

1
Incept2edOPRezonate•

It's really not, first thing I looked in to, not possible, I cry every time.

1
C_Mill24Karma Fields•

It's okay bby [hugs]

1
jnj213Haywyre•

oMG the baRS aRe outtA sYNC and THe treble is 2 hiGH MONSTERCAT PLZ FIX!!!!

1
Incept2edOPRezonate•

OMMGsOOOrrRrrYYYYyyY we don't use the same spectrum analyser as them cos its a frickin browser :P

1
Evilsnowman4Haywyre•

Took this for me to notice that in all the MC visualizers that the particles move when the bass spikes more :S.

I also think the ability to pause/skip/move to certain parts would be great and if Karma Fields wasnt a listed genre in upload

1
Incept2edOPRezonate•

Yeah this one moves more when the bass spikes too, should I increase the speed then?

You can pause with P (might add space to that list lol). Moving would be extremely difficult because the way we are playing the audio is through a very limited API.

Yeahh you're right I'll remove it and just do it manually if I want to.

1
Evilsnowman4Haywyre•

I think its fine how it is. Although, some bass doesnt get picked up on the visualizer, such as in this song

1
Incept2edOPRezonate•

That's not actually in the bass range technically just a very nice synth :p

You'll notice snares are actually in the middle of the visualizer which is so wrong its not funny.

1
OfficialProwerVirtual Riot•

It's way too intensive on older laptops and computers... Otherwise it's pretty good.

1
Incept2edOPRezonate•

yeahhhh its doing a lot of calculations live so there's not a lot I can do about that sorry D:

1
IkitoGamingEden•

First of all I need to say - this is fantastic! It's really fun to listen to some new songs and share some of your own favorites with others. Definately going to use it for a while. I can see there is a lot of work behind it, you did an amazing job with the animations and the upload function. :) Keep it up!

Still, there are some little things I would improve (if I could, heh). For instance, the very left 3-5 bars are rarely moving unfortunately. Also it would be great if the vizualizer reacted better to more quiet sounds. And finally, like someone already pointed out, the fullscreen isn't actually fullscreen. :P

A couple of ideas you might wanna work on in the future: -A little fade in to the vizualizer like the original one (doens't have to be that precise tough. :) ) -The ability to customise the single/album art -If the song is taken from an album/LP, it would be really cool if you could add the other songnames of the EP/LP/whatever

I hope this helped you out a bit. I'd be very greatful if you could continue working on it. :) Cheers!

1
Incept2edOPRezonate•

Thanks man!

The front few bars I know don't do much, unfortunately we can't use Trapcode SoundKeys in a web browser so its a completely different way of detecting frequencies. Trust me if I knew how soundkeys works It would have been done already :P Only thing I can do is maybe reduce the rolloff so it goes up a bit but it helps create the illusion with the main bass frequencies so not sure.

 

Fullscreen should be fullscreen, just have to toggle it and then hit reload frame. If not please elaborate.

 

Yesssss an intro/outro animation would defiantly be cool. I think i know how I can do that so I'll add that to the planner features list!

The art thing is pretty much already possible because there's a div that can hold artwork already so I would just need to implement some kinda system for that :) As for song lists... mmmmm... could be difficult, already struggling with the text layout.

 

You havveee thanks for using the site! :D

2
i077Haywyre•

If I were able to extract keyframe data from SoundKeys and give it to you as an array of ints (maybe in JSON or something, I'd probably be able to easily automate it in Python) for each bar height per frame, would you be able to integrate that to make it look more similar to the real thing?

1
Incept2edOPRezonate•

Paging Dr./u/caseif

My understanding of the vis is it analyses the decibels from certain frequencies (or bins in the fft) and then it is just smoothed.

Are you talking about pre-rendering data here? because that's not the real aim, it has to be done live. I could get Soundkeys data myself honestly, it's just how Soundkeys analyses the song is what would be good to know.

1
i077Haywyre•

Obviously SoundKeys does some post-processing to smooth out the sound data, so yes I am talking about non-live data. I had assumed you were doing for accuracy here, so you could have had the script read values from a JSON file and display each bar at a certain height accordingly. Those values would have been generated beforehand via Soundkeys, the keyframes converted to an XML or JSON file (some sort of parse-able format), then read into your vis script.

I understand if you guys don't want to do this, it's just something fun to do and see (as it'd be more accurate than using FFT audio analyzers).

1
Incept2edOPRezonate•

Yeah I mean maybe it could be like a second option,

'if song has data then load that instead' type thing.

1
caseifRameses B•

vis.js works by taking the raw audio data from the JavaScript audio node API and applying some transformations to it to make it look closer to the actual visualizer (this includes basically an exponential transform and a smoothing algorithm). I've developed these basically by trial and error, so it's just a visual reconstruction of what it's based on.

This being said: what may really help is if you could generate a spectrum for a test audio clip (basically some tones and stuff) so I could see more precisely what SoundKeys is doing. PM me if you're up for it and I'll send you the MP3.

1
i077Haywyre•

Remind me to get back to this next weekend, I'm really busy this weekend (writing a 14 page paper for history).

1
caseifRameses B•

Incept has the template as well, so he offered to render it out.

1
i077Haywyre•

Ah, right. There might be a plugin of some sort to export the keyframes as an XML file or something. I could help use Python to parse it and write values to a file that JS can read.

1
44DiamondsGrabbitz is life•

Late reply to your post, I know, but a few little things stuck out to me about this. There needs to be a bit more action on the very left side of the visualizer (maybe shift the frequency or whatever to play more to the left?). The bars should go a bit higher up, I think. And there's a slight lag between the music and the visualizer, about half a second. Aside from that, everything looks great! You did an awesome job recreating this and I think I'll definitely keep using it!

1
Incept2edOPRezonate•

  1. Yes, well aware :P We're trying to figure out how to get it like the original, but that uses SoundKeys in AE so we have to somehow come up with a different way of analyzing bars and averaging them.

  2. edit: you're right I'll look into that.

  3. fixed, see below.

1
Incept2edOPRezonate•

Update:

  • Added the delay thing so now the audio is .4 seconds behind, looks much better! :)

  • A few style tweaks to make it a bit darker and reduce the pressure on the left side.

1
bgiesing•

u/Incept2ed With the new update that just went live with the Dashboard, I added this song (http://incept.gq/visualizer/?song=key_56e869d6cf8e8) and it's only showing up as ??? - ??? and won't play

EDIT: I looked at the songs.csv file at http://incept.gq/visualizer/songs.csv and my entry wasn't added even though it shows up in the dashboard?

EDIT 2: Seems to be fixed now!

1
Incept2edOPRezonate•

I forgot to add the song list to the purge list with cloudflare (under new folder as you can see) It would have updated in 2 hours because of caching, sorry bout that :P

In simpler terms the site was being stupid and giving you the older song list when you loaded the visualizer.

2
bgiesing•

No need to give me simple terms LOL I use Cloudflare for my websites and I forked your version of the site on GitHub (well the last updated in 2015 version)

Figured it was a caching issue (I tried to force reload and clear the cache but that doesn't work as Cloudflare is enabled.)

1
Incept2edOPRezonate•

oh all good, just never know yanno haha. It was like 5am for me so I wasn't thinking that great. Also never heard of that site but thanks I guess heh.

1
bgiesing•

Well just be warned that if they feature it on the homepage, your site will probably go down instantly (almost every website that get's featured gets so much traffic that it almost instantly DDoS's their server.)

1
bgiesing•

BTW I submitted the site to Product Hunt: https://www.producthunt.com/tech/incept-gq

1
C_Mill24Karma Fields•

Pretty neat to see picture backgrounds being applied. I wonder if there is a possibility to edit the box in the visualizer where the logo is, for additions of an artist's logo or artwork for the track. Kind of sounds like that isn't possible the more I think about it. :/

1
Incept2edOPRezonate•

Certainly is possible!

It's done with the joke genre: http://incept.gq/visualizer/?song=key_56e7f8751a163

Just need to implement it into the upload process :)

Also sorry about the removal of the new ones that was a complete accident lmao.

1
C_Mill24Karma Fields•

Ah. Also, I'm not sure if this is fixed yet, but labeling a song as "Electronic" puts it under the Electro visualizer as opposed to the correct one.

1
Incept2edOPRezonate•

Fixed a bit back yeah, use the contact page if anything else goes wrong I don't really check reddit much haha

1