search

bibekg / react-audio-viz

A simple yet impressively extendable audio visualization React hook
MIT License
24 stars 1 forks source link

Doesn't work in Firefox #2

Open tomByrer opened 4 years ago

tomByrer commented 4 years ago

Works fine in Chromium, but the music player doesn't work in Firefox Win10 unfortunately.

bibekg commented 4 years ago

Hm, seems like it's specific to Win10. It's working for me on Firefox 71.0 on macOS 10.15.4 Beta.

I suspect the issue has to do with Win10 Firefox support for the Web Audio API. What exactly do you mean when you say the music player doesn't work? Is it that everything is visually fine but there's no audio?

tomByrer commented 4 years ago

Now, pulse doesn't work, but other 2 (polar & horizontal) do work.

BTW, it is hard to find the player controls on a 4k screen ;)

Screenshot_2020-02-21 react-audio-viz

bibekg commented 4 years ago

If the other 2 are working, it's possible that the pulse model is just too subtle to tell that it's changing color intensity. Have you tried reducing the frequency range to see if that makes it more visible?

bibekg commented 4 years ago

Oh wow good point about the player controls being so small on a 4K screen. Didn't realize that'd happen. Not sure what the best way to address that would be. 🤔

tomByrer commented 4 years ago

reducing the frequency range to see if that makes it more visible

OK, that does work; I didn't realize the whole screen is supposed to flash, & seems a too big freq window doesn't have enough dynamics. Maybe figure out the moving average in a larger time window then the flashes correspond in relation to the current smaller time window? (I used to program DSP for VST plugins in ASM like 10 years ago.)

tomByrer commented 4 years ago

Oh wow good point about the player controls being so small on a 4K screen.

Really only an issue if the window is full width, thus the player is out of my view on the bottom. Maybe float the player to the page top if the veiwport is in 'desktop' mode could be a fast fix? (People tend to scan the top, then look at what is busy. Player is all alone.... forgotten ;) )

tomByrer commented 4 years ago

reducing the frequency range to see if that makes it more visible

OK, that does work

Maybe switch the default color for Pulse to Dark Green (Yellow on White will get you the WCAG contrast police knocking on your door ;) )? & bumping the default bottom range to 4k Hz helps.

Thought about trying to edit it myself, but if I have to listen to that demo song again, I'll have to.... pet some puppies or somethin'.

bibekg commented 4 years ago

Finding the moving average in a large time window would probably work for the most part but it sounds like it'd be too computationally expensive to work in this use case. The way it's built, it's super prone to lagging if there's any serious level of computation in the model's renderer function.

Thanks for the suggestions for fixing the pulse model though. Looks much better with a 4k Hz minimum and a darker color.

Also, moved the player controls to top of screen since I agree with your point that people will scan the top first.