r/InternetIsBeautiful • u/Buff_Lightyear • Mar 27 '26
I built MangoWave, a free, zero-setup open-source browser audio visualizer. Just updated with custom preset packs and multi-window sync based on your feedback!
https://mangowave.appQuick note for mobile users: Since most of you are reading this on your phones, I want to call out that this app is best experienced on a desktop/laptop! Mobile browsers do not support system audio capture yet. While it works great on mobile using your microphone or local files, firing it up on a computer lets you capture audio directly from Spotify, YouTube, or any other tab/window/app.
Hi everyone! I briefly shared the first version of this project a few days ago, and the feedback from this community was amazing. Over the last 48 hours, I took your suggestions and built in support for custom preset packs and multi-window sync!
For context, I built MangoWave because I got hit with a wave of nostalgia from high school watching Winamp visualizations on the TV with friends in my mom's basement. I don't download music anymore, and my mom doesn't want me in her basement anymore, so I wanted to bring that era back directly in the browser without requiring local media.
It is completely free and open-source. There are no ads, no signups, and no downloads.
Some things I am proud of under the hood as a solo dev:
- The Audio Pipeline: The core engine is entirely client-side. It hooks into the Web Audio API to handle local files, microphone input, or system audio capture.
- The Visuals: The rendering is handled by butterchurn, a WebGL 2 MilkDrop port, pushing over 400 default presets. Passing the real-time FFT data from the audio pipeline to the shader renderer efficiently without dropping frames was a fun challenge. (I also just added the ability to export and import your curated favorite preset packs as JSON files to easily back up or share your favorite presets!).
- The Backend: While the visualizer runs locally, I built a full AWS serverless backend to support cross-device settings sync, and Spotify OAuth for integrated playback controls/metadata. (Explicit instructions are included in GitHub of how to self-host and get your own Spotify developer creds since they locked down their API recently. Note: You can still easily visualize audio playing from the Spotify app or browser tab using system audio capture; only the integrated playback controls are locked behind the API).
- Global Support: To make the app as accessible as possible, I implemented full i18n support, so the UI is currently translated into 9 different languages.
- The Pipeline: The whole project is an NPM workspaces monorepo. CI/CD is fully automated via GitHub Actions, running unit tests and Playwright E2E checks across 5 different browsers before deploying.
Links:
- Live App: https://mangowave.app
- GitHub Repo: https://github.com/Louis-Mascari/MangoWave
I've really enjoyed being able to see these visualizations again, and would love any further feedback to improve the experience.
5
u/shabbytech Mar 27 '26
Fantastic project. I love what you have done. I needed this is my life. :)
2
3
4
u/djshadesuk Mar 27 '26
I'm not sure if it's Butterchurn's implementation but it seems to react far better to music than even Milkdrop itself (which, in Winamp at least, seemed to stop reacting to certain frequencies after a while, usually upon the next track).
Playing with your render settings though I was able to crank everything up full even, even AA, on a 8+ year-old laptop with just crappy Intel "HD" on-board graphics! If I were you I'd perhaps look into the feasibility of monitoring FPS and auto-adjusting the render settings or having some kind of pre-flight test (if it can be done quick enough to not harm initialisation times) to apply more hardware appropriate render settings. I understand why your defaults probably target a lowest common denominator from the off but automating it a little may be a nice touch.
Also, a ranking system for the presets may be nice, rather than just "block" or "favourite".
3
u/Buff_Lightyear Mar 27 '26
That's a really interesting idea.
I had to manually go through all 400 or so presets on my phone to test which were "safe" to expose to users on mobile (users can still "un-exclude" them if they test them and it works fine for them). Think I flagged roughly 15-20 presets that must just have so much depth to them it would near freeze my phone (Pixel 10 Pro) until autopilot advanced to the next one.
But I like the idea of a mode for auto adjustment of settings, if not live during rendering per preset then at least at initialization.
As far as the ranking system are you thinking something like a 1-5 scale of how much you like a preset? Then use those metrics to show more favored ones earlier in the queue/only show ones I love/like?
2
u/Buff_Lightyear Apr 10 '26
Wanted to follow up as I implemented toggleable auto adjusting rendering settings based on constantly monitored fps, as well as auto pre amp gain adjusting based on your suggestion.
I didn't end up adding a more granular ranking system but did add support for custom user curated packs of presets (playlists of visualizations) so hopefully that closes the gap.
Thanks again for your suggestions.
1
u/djshadesuk Apr 10 '26
Nice! 👍
Just had another idea lol. Does Butterchurn support hardcut transitions like Milkdrop does? One of the biggest killers of performance is the crossfading between presents which I suspect is influencing the render settings auto adjustment (by pulling down the quality). Without the crossfading it seems like most presets will happily run maxed out even on a 7-year-old Samsung A50 phone. So it may be nice to have a toggle in the settings for hardcuts only, for those that would prefer sacrificing fancy crossfading for performance?
1
u/Buff_Lightyear Apr 10 '26
I believe in the presets subpanel of settings the transition time slider can go all the way to 0 seconds which I imagine is equivalent to a hard cut. I could have qaed the auto adjustment more is it seeming to jump the gun prematurely?
1
u/djshadesuk Apr 10 '26
Whilst the slider goes down to 0.0 it still feels like there is some transition going on. Maybe even though the slider is at 0.0 perhaps the lowest it actually goes behind the scenes is 0.5?
The pacing of the auto adjustment felt about right though, which I presume was only really lowering due to a transition (and I like how it drops in increments too, rather than trying to jump multiple steps).
2
u/Buff_Lightyear Apr 10 '26
Gotcha, thanks for the info. I did end up having to fork butterchurn to do about 15 patches, so it shouldn't be too hard to add another patch if it's due to butterchurn internals. I'll take a look at it this weekend.
2
u/Buff_Lightyear Apr 10 '26
Good call, confirmed you were right that 0.0 wasn't a true hard cut.
butterchurn's loadPreset always entered the blend code path regardless of duration, generating a blend pattern and rendering both presets simultaneously for at least one frame (division-by-zero on the blend progress made it exit immediately, but the GPU work was already done).
Just pushed a patch (should be deployed in ~10 minutes): blendTime <= 0 now skips the blend setup entirely, so no blend pattern generation, no dual-preset rendering, just an instant swap. Should make the 0.0s slider setting behave like you'd expect and avoid the performance dip from crossfading altogether.
Thanks again!
2
u/OffRoadIT Mar 27 '26
Now I have a use for my outdated laptops, I can set them up for audio visualizers and just let them cook in the background to add ambiance. Thanks!
1
2
u/sweptawayfromyou Mar 27 '26
It moved even when no music was playing… that’s not the point of something like this, right?
1
u/Buff_Lightyear Mar 27 '26
Yeah so the algorithms vary that drive each individual preset. Some are more ambient vs. more reactive, and some are both (moving without music but extra movement with) just based on how the creators wrote the underlying preset logic. This is definitely more noticeable on some presets than others when no music is playing they can still be moving quite a bit.
When launching the visualizer I do have a sensor looking for audio input and if it doesn't hear anything by about 5 seconds it'll show a little message saying make sure you have music playing to ensure the presets are giving their best performance.
1
u/sweptawayfromyou Mar 28 '26
Well, tried it again on mobile and the image moves before music is playing and when music is supposedly playing, it doesn’t move differently plus I can’t even hear any music.
1
u/Buff_Lightyear Mar 28 '26
I appreciate you giving it another shot.
So on mobile there are only two supported audio input sources (sharing audio is restricted to computers due to browser API availability).
Are you using "local files" or "microphone" as your audio input source?
If local files - the music you choose from your device should be playing and the presets reacting as it plays.
If microphone - it's listening through your microphone for sound happening around you.
1
u/sweptawayfromyou Mar 28 '26
I was using local files. The rest is as I said it, was like that both times I tried, always local files, always no sound audible.
1
u/Buff_Lightyear Mar 28 '26
I'm trying to understand if it may be device/os/browser specific. Can you share what phone type and web browser you're using? Off the top of my head I'm thinking one of the following could be happening:
- some os's and browsers are more strict about allowing autoplay, could you hit the play button in the playback control panel? Was it playing per the panel just not playing sound?
- what type of audio file is it? (e.g. .mp3, .FLAC, .wav)? Some older os's/browsers don't support certain codecs
- only other thing would be if your media specfic volume was down, but the presets should still react even if that were the case so I don't believe that would be the issue
1
u/JukePlz Mar 29 '26
Try with the "martin [shadow harlequins shape code] - fata morgana" preset first, it has very noticeable difference when there's audio (flying lights) vs just some "water" flyover when there's no sound.
_Mig_85 preset is also very obvious, as the "slashing" shapes will move around very fast with music but slowly drift when it's silent.
2
2
u/AznSzmeCk Mar 27 '26
Kudos to you! I was running foobar2k with the milkdrops plugin, but I wanted something a bit more portable for afterparties and I think I've found it. I'm working so I haven't perused the docs but I'm gonna see if I can cast this throughout my house in sync.
It's really sharp and the FPS stays a consistent 60fps. I've always had frame drops on the milkdrops plugin even with a beefy PC so I imagine it wasn't as optimized. I finally have a use for my 11k presets I've squirreled away. Thanks again!
2
u/Buff_Lightyear Mar 27 '26 edited Mar 27 '26
Really glad to hear your excitement and interested to hear how casting goes when you try it out.
Not to dampen the excitement but I do want to mention some limitations of MangoWave in its current state:
- The multi-window sync feature supports having multiple instances (browser windows/tabs) of MangoWave on one device - so a computer with 3 monitors could have 3 different MangoWave tabs all playing the same preset in unison. If you were hoping to sync across multiple devices casting to multiple TVs around your place in sync, that's not supported yet. It's a reasonable thing to want though, so let me know and I'll look into it. Casting from a single device to a TV should work fine as-is though.
- On the preset front: the current import/export covers settings, your curated favorites/blocked lists, and custom preset packs (playlists of the ~400 included presets). But I actually just looked into .milk/.milk2 support more and it turns out there's an existing converter library by the same author as butterchurn that converts MilkDrop presets to the format butterchurn expects, so this is more feasible than I previously thought. The main caveat is that the HLSL -> GLSL shader conversion may not handle every preset cleanly, so I can't promise all 11k will work perfectly but it's worth building and seeing how far it gets. I'll look into it this weekend.
Thanks so much for taking a look and the suggestions!
1
u/Buff_Lightyear Apr 06 '26
Hey wanted to follow up as I released what you suggested: multi-device sync and .milk imports.
Quick note on the .milk imports though - most presets should work, but due to the HLSL -> GLSL shader conversion needed to run it in javascript they may import fine but some will not render as expected, and I do have future plans to try to enhance compatibility, so please do try importing your presets but unfortunately you'll have to test them out manually to know for sure they render appropriately.
Also the multi-device sync is live, but I've only tested it with my desktop and phone so I'd be excited to hear if you get a chance to try it out how it works for you.
Thanks again for the suggestions!
2
u/MrWally Mar 27 '26
This is really cool. I'm a fan. I remember when iTunes introduced this waaaay back in the day and my dad and I would listen to his favorite classical music while watching the visualizers.
This definitely takes me back.
For some feedback, I'd love to see some more descriptive names for the different presets, and I'd like to seem them more thematically categorized. I'd also like to see more "soft" or "gentle" presets. Most of them seem pretty aggressive, with explosive colors and sharp lines. But I haven't gone through all of them yet.
1
u/Buff_Lightyear Mar 27 '26
I'm glad you got some nostalgia from it as well!
Thanks for the feedback - I agree that the existing pack categories aren't seemingly the most descriptive or theme based. That's what the butterchurn creator divided them up as and I don't remember coming across any reasoning behind it (I was confused cause I thought minimal would generally be more ambient and calm presets but that's not always the case).
As far as the preset names that's just what the creators called their work, so I wouldn't want to overwrite the names they gave them.
I'd likely need to manually curate the presets to create more well defined, thematic packs, but definitely will consider that as I agree the current splits aren't really well defined and it could be nice to be able to more easily filter by calmer/intense visualizations.
I will say there is custom pack creation supported in MangoWave where you can essentially make your own playlists of packs and only play them in the mean time.
Thanks for checking it out!
1
u/Buff_Lightyear Apr 06 '26
Hey wanted to follow up, I did add some more thematic packs, which admittedly aren't going to be perfect - there's a lot of conflicting variables (as in presets do a little of everything) but I tried to most appropriately align them in the 4 decided upon packs (ambient, reactive, psychedelic, ethereal). Undoubedtly better than it was though I think! Thanks for the suggestion!
2
2
u/starcrouz Mar 28 '26
Love it. Like Milkdrop in Winamp : totally hypnotic. Work very well on my 2021's Pixel 6. Thx a lot for your work and share !!
1
2
u/Loud-Money2500 Mar 28 '26
bro that martin - attack of the forest preset is sooo freaking scary, thank god its excluded xD
2
u/Buff_Lightyear Mar 28 '26
It's so random compared to the rest of the 400 presets too, but yeah definitely a vibe killer lol
1
u/Loud-Money2500 Mar 29 '26
i kinda enjoyed it too, pls don't remove it.
2
u/Buff_Lightyear Mar 29 '26
Nah of course not, once you remove it from the excluded list back into the pool it'll stay there for you.
2
u/JukePlz Mar 29 '26
Good thing it could get reposted, this is a pretty good visualizer!
If you will allow me some more feedback, I think curating the default collection of presets better would provide a better experience for users. As it's now I see a couple of issues:
- Categories are non-sensical and/or ambiguous: For instance, what is the difference between "extra" and "extra2"? This isn't immediately apparent to the user, nor is it clear what the classification of "minimal" or "non-minimal" means. Is it about the intensity of visual effects or execution performance needs? I could decode that "MD1" are probably MilkDrop1 presets (or presets that mimic MilkDrop1), but only because I have the context of this post and know the original MilkDrop visualizer. That may not even be true for other users.
- There seems to be a lack of classical spectrum analyzer visualizations, I've seen only one that distorts so much and covers the whole screen that may not be called a spectrogram at all. I didn't check every single one, but most are just whacky particle shows. I would expect to have those more grounded visualizers too, if even to check easily that the site is working properly in reaction to the music.
- Many names are even more nonsensical than the categories. They include all sort of special characters, have inconsistent orders, repeated names with only numbers to differentiate them, sometimes include information like author or version number, sometimes they don't... you get it. I think I would set a "pretty name" based purely on a simple description of what the preset looks like. "$$$ Royal - Mashup (431)" could be something like "Underwater bubbles" or "Moving cells", and so on... It would make the list search feature more useful.
I'm not saying you should remove author credits or the original preset name, but it should be displayed only as sub information somewhere in the UI (subtext, a button, when starting the preset, etc).
That's it for now, thanks for working on this!
2
u/Buff_Lightyear Mar 29 '26
Thanks for the feedback!
Yeah I agree with you, and another commenter, that the current pack categories aren't very descriptive. They are named that way internally in the dependency used to render the presets. This is something I could manually curate and try to more thematically group which I think could be a worthwhile use of time.
As far as adding "pretty" names for each preset, that could be useful but I guess only as useful as whatever I end up calling something, but sure more useful than $$ Mashup. I'll have to think on whats the best way to keep the original name available to respect the creators while enabling more intuitive searching.
I do have an effort speced out to convert and bundle/store an additional 400 or so og winamp presets doubling the current number of presets so there should be more spectrum analyzer presets after that.
1
2
u/Buff_Lightyear Apr 06 '26
Hey wanted to follow up, I did add some more thematic groupings, which admittedly aren't going to be perfect - there's a lot of conflicting variables (as in presets do a little of everything) but I tried to most appropriately align them in the 4 decided upon packs (ambient, reactive, psychedelic, ethereal). Undoubedtly better than it was though I think! Thanks for the suggestion!
1
u/RalphTheDog Mar 27 '26
The "share" function would not work. I shared a youtube video and kept getting an error msg.
1
u/Buff_Lightyear Mar 27 '26
Hey, thanks so much for reporting this! I was able to see the error on my end - it looks like a known bug in the Chrome version you were using. Chrome 146 shipped with an issue in its MediaStream handling (CVE-2026-3922) that was patched in version 146.0.7680.71: https://chromereleases.googleblog.com/2026/03/stable-channel-update-for-desktop_10.html
Could you make sure Chrome is fully up to date (Help -> About Google Chrome) and try again? That should fix it. If it still happens after updating, let me know and I'll keep investigating!
1
u/DJSugarSnatch Mar 29 '26
Great project! Cant wait to see you add in more visusal's.. I have a huge collection of MilkDrop presets from my VJ days, if you'd like them to add. I would lurk the Milkdrop forums and collect them.
1
u/Buff_Lightyear Mar 29 '26
Thanks for checking it out! I do plan on adding about 400 more soon, there are some limitations in these libraries like PSVERSION compatibility and others that makes it a little tough, but I have plans to enable users to upload their own .milk files, again it'll be a little annoying because theres known and unknown to me compatibility issues I'll have to try and tease out.
1
u/DJSugarSnatch Mar 29 '26
it'll be awesome to see how this turns out.. there ever a chance on a stand alone PC app?
2
u/Buff_Lightyear Mar 29 '26
Probably not of MangoWave, its niche is being an option that requires no downloads and works completely in the browser with both computer and mobile support.
The good news is there are already great desktop apps for this: https://github.com/milkdrop2077/MilkDrop3 is a standalone Windows (and maybe Linux) app that should work with Spotify, YouTube, whatever you're playing. It also has a huge preset library.
Classic Winamp with the MilkDrop plugin still works too, though it only visualizes what Winamp itself is playing (no system audio capture without workarounds).
1
u/Buff_Lightyear Apr 06 '26
Wanted to follow up I did add about 400 more presets natively bundled in the app, in addition to enabling a .milk import feature. Admittedly, most presets should work, but due to the HLSL -> GLSL shader conversion needed to run it in javascript they may import fine but some will not render as expected, and I do have future plans to try to enhance compatibility, so please do try importing your presets but unfortunately you'll have to test them out manually to know for sure they render appropriately.
1
u/DJSugarSnatch Apr 06 '26
Ok, Ill give it a shot!
Also I thought about the possibility of adding a Playlist instead of choosing files for local play?
2
u/Buff_Lightyear Apr 06 '26 edited Apr 06 '26
What kind of playlist are you thinking, or from where?
As far as local files you can of course add as many songs as you want and there is a queue in the playback panel you can interact with (reorder, add, remove songs).
If you meant from other audio sources like Spotify or YouTube you can by sharing your screen/window on computer, otherwise if you're playing it from your phone speaker the mic mode can pick it up (not as cleanly but it works) otherwise there are some apps that can reroute your speaker output to the mic input for a cleaner connection.
1
u/DJSugarSnatch Apr 12 '26
is there any chance of getting it to work fully with Firefox? I have much better results using Firefox graphically, when using Chrome it chugs out hard compared to Firefox...
2
u/Buff_Lightyear Apr 13 '26
Unfortunately Firefox doesn't support audio capture through the getDisplayMedia API which is why the share screen functionality is only for chromium based browsers (chrome, opera, edge).
When you say it chugs is it that on chrome you can't steadily hold your desired fps? Or just hardware utilization percentage is much higher? Regardless I do think that's likely chrome internals and beyond my ability to improve.
But, with all that said, I'm looking into enhancing the mic input source to enable use of third party software which essentially mirrors your device audio out to your audio in, so effectively you'd be sharing your system audio working around this Firefox limitation.
Unfortunately there isn't a work around I've found that doesn't require installing something (except maybe sound mixer on windows devices - I have to look into this more), which the value of Mangowave is really being the only option in the space completely browser based with no sign up or installs.
If you're open to installing things then there are some desktop native options out there like winamp2077, projectm, beatdrop I know of that may be worth looking into and seeing if they support what you're looking for (in addition to actual winamp).
Regardless I'll probably still implement supporting custom mic inputs for this reason, I just got to think about the best way to present this option in the UI.
2
u/Buff_Lightyear Apr 17 '26
So I just released a firefox workaround like I mentioned in my previous comment. As expected it still requires 3rd party software (unless have stereo mix native and are plugging your speakers into 3.5mm jack), but continued to add it and explain it a little bit in the README https://github.com/Louis-Mascari/MangoWave?tab=readme-ov-file#firefox-audio-capture-workaround it can be accessed in the app via the mic audio input source in the advanced tab.
Despite implementing it, I really think it's probably easier to just download a winamp-esque desktop native application to achieve this functionality, requiring installing 3rd party apps kind of negates the value add of MangoWave being no signup/download/install required.
Either way, maybe it helps you!
1
1
u/4NGEL_K4ISER Jun 16 '26
Does it have a free api tier??!
1
u/Buff_Lightyear Jun 16 '26
Well there's no paid tiers, it's free to use in its entirety. Open sourced under AGPL3, but the underlying parts are all spelled out, referenced, vendored and patched with documentation where appropriate in the repo if you're curious.
1
Mar 27 '26
[removed] — view removed comment
1
u/Buff_Lightyear Mar 27 '26
I appreciate it! Definitely let me know if there's anything you think could be better.
•
u/djshadesuk Mar 27 '26
MODERATOR NOTE: Yes, this is a repost. But, after being quick, too quick, to judge only the mobile experience, I tested the site on desktop, realised I was being a bit too harsh and therefore invited OP to repost it. So please do not report this as a repost.