Improved Winamp Visualizer by @x2nie #1260
Conversation
This contains work started by @x2nie and continued by me. There's a lot that's either broken and/or unfinished. The main goal of this PR is to improve the visualizer of Webamp, bringing improvements to the Oscilloscope and Spectrum analyzer rendering. Improving the Oscilloscope was achieved by taking the rendering code from the Equalizer and implanting it into the small visualizer box done by x2nie, improving the Spectrum Analyzer involved ditching the Web Audio API in favor of FFTNullsoft, providing a much more accurate representation of the audio. The spectrum analyzer code (at least for the thicker bands) was redone that makes use of reverse engineered code from Winamp 2.65, more specifically how the bar chunking is achieved as well as how the peaks are calculated (this is broken).
❌ Deploy Preview for vigorous-lalande-5190c2 failed.
|
|
Dunno why it says it failed when GitHub says it passed all checks 🤷 |
|
it says that it works, @0x5066 . see there: https://deploy-preview-1260--ecstatic-poincare-fe4c13.netlify.app/modern/ |
Various code comments explaining the purpose behind the new implementation Peaks are no longer visible at the bottom
Replaced old Visualizer in the Playlist Editor in favor of the new Visualizer
…happens in paintFrameWide()) Also removed paintWavSolid() since that too is now processed in paintWavLine Removed variables no longer in use Adjusted how the FFT data is first processed in Vis.tsx and how that affects the thin and wide modes (they should now be consistent in volume)
…oublesize too!) Proper color handling for the Spectrum Analyzer if in windowshade and double size mode Removed comemnts/functions no longer in use
Fixed "doubled" not being able to be used outside of Vis.tsx Set up base for eventual additional parameters that can be passed to the visualizer Consolidate paintWavDot into paintWavLine Remove dispose()
|
I realized that this does make "dummyVizData" unusable, this can be worked around by disabling |
Allowed "mode" to be modifiable Adjusted frequency scaling of the FFT
There was a problem hiding this comment.
Overall I'm super excited about this! The Visualizer being "off" has always annoyed me about Webamp and it would be so nice get it much closer to the real thing!
Most of my comments are about style. I'd love it if anyone reading the code of Webamp found this code stylistically indistinguishable from the rest of the code (within reason).
In terms of correctness, my main concern is with the global variables that are shared between Webamp/visualizer instances. Happy to help brainstorm if you're not sure how to encapsulate them better.
Thanks so much for working on this! Would love to be able to get it merged!
Attempt at addressing a few comments from the PR review
Finetuned the data going into timeToFrequencyDomain
Attempt at addressing more of the PR review
Added checking for the state of the Main Window so that the Playlist Editor visualizer no longer bugs out like it did (incorrectly showing the small visualizer, or showing the full capacity of it) Changed the global variable `i` to be `chunk` to avoid potential issues Ensure `y` is scaled down (in the y axis) correctly when in windowshade mode Skip rendering of the Oscilloscope in the windowshade mode to avoid it drawing out of bounds Missed a few variables that werent in camelCase (again)
…d line if x is 0 and if visualizer is small
Prevent saPeaks from going "out of bounds" when the main window is in windowshade mode
…kground if Main Window was not visible, in windowshade mode and not in double size
Fixes FFT being corrupted when multiple instances of Webamp exist and are playing at the same time Fixes multiple Webamp instances fighting over what the current state of the Main Window really is Moved a lot of global mutable variables to instead be owned by BarPaintHandler and PaintWavHandler Renamed visualizer functions since they now handle a lot of things
| } else { | ||
| canvasCtx.drawImage(bgCanvas, 0, 0); | ||
| } | ||
| painter.prepare(); |
There was a problem hiding this comment.
I think we need to find a way to pull this out. Maybe it could be called in a useEffect when the size changes?
| animationRequest = window.requestAnimationFrame(loop); | ||
| }; | ||
|
|
||
| if (audioStatus === MEDIA_STATUS.PLAYING) { |
There was a problem hiding this comment.
Okay, I can come back and try to refactor this after it lands.
| vis.colors[4], | ||
| ]; | ||
|
|
||
| this.logged; |
There was a problem hiding this comment.
Yeah, let's drop the console logging
VisPaintHandler is an abstract class (is that how you do it?) Instead of logging to console about paintBarLine reusing code from "Fire mode", it's been replaced with a code comment
|
The FFT broke somehow... I need to look into this |
It never had a place there anyway
There was a problem hiding this comment.
This is great. Thanks for your patient, detail oriented work on this. The visualizer has always been the weak spot in Webamp in terms of matching Webamp since it was just so hard to reverse engineer and match with the limited controls the web audio api gives us. This these changes we are whole lot closer. Thank you!
There are a few small type/lint errors but I'll fix those up after merging.
This contains work started by @x2nie and continued by me.
There's a lot that's either broken and/or unfinished.
The main goal of this PR is to improve the visualizer of Webamp, bringing improvements to the Oscilloscope and Spectrum analyzer rendering.
Improving the Oscilloscope was achieved by taking the rendering code from the Equalizer and implanting it into the small visualizer box done by x2nie, improving the Spectrum Analyzer involved ditching the Web Audio API in favor of FFTNullsoft, providing a much more accurate representation of the audio. The spectrum analyzer code (at least for the thicker bands) was redone that makes use of reverse engineered code from Winamp 2.65, more specifically how the bar chunking is achieved as well as how the peaks are calculated (this is broken).