Lack of customizability

YZarytskyi / react-voice-visualizer

React library for audio recording and visualization using the Web Audio API

https://www.npmjs.com/package/react-voice-visualizer

MIT License

112 stars 22 forks source link

Lack of customizability #8

Closed Johnrobmiller closed 7 months ago

Johnrobmiller commented 7 months ago

The docs tout high customizability as a benefit of this library. Quote, The library is absolutely customizable, allowing you to tailor the audio recording and visualization components to fit your project's unique requirements.

...but my experience is that this is untrue. For example,

you cannot change the icon on the mic button.
the controlButtonsClassName clumps together UI components that ought to be styled separately.
there is no way to control the layout of the UI elements.

Disabling controls to make custom UI also disables the waveform visualization. So for most people, that is not an option, as the waveform visualization is probably the reason they're using the lib. This might be a separate bug, I am unsure.

YZarytskyi commented 7 months ago

If you wanna build custom UI for control panel you shouldn't use built in UI. Just use methods that will help you to built any UI according to the project requirements

Johnrobmiller commented 7 months ago

Thank you for responding. Unfortunately, when I disable the built in UI via isControlPanelShown, the waveform visualization disappears. Is this a separate bug?

YZarytskyi commented 7 months ago

Yes, I use custom UI in my projects and I have never faced this issue. Please report a bug and provide more details and code snippet if possible.

Johnrobmiller commented 7 months ago

So as it turned out, when I set the width/height to 100% in chrome dev tools, the waveform visualizer would not appear. But when I set it to 100% in mainContainerClassName, the visualization reappeared. Maybe The width of the canvas was getting set to the original container's width, so when I set it in Chrome dev tools, the canvas never resized.

Johnrobmiller commented 7 months ago

With that said, I think there is a genuine bug here, but it wasn't what I initially imagined it to be. Does the mainContainer have a onResize event which resizes the canvas when the mainContainer width changes?

Johnrobmiller commented 7 months ago

I'll just open a new issue

YZarytskyi commented 7 months ago

Yes, you are right, you should manipulate in the code, not in the dev tools

Johnrobmiller commented 7 months ago

My apologies for giving you a hard time, now that I know what the true issue is I see that customizability has nothing to do with it

MeetDevSimform commented 3 months ago

How to trigger start recording on custom button