From 550c041f9140f5c488f2b83a8e3eedf145de4e09 Mon Sep 17 00:00:00 2001 From: Bowen7 Date: Sat, 21 Sep 2024 14:49:10 +0800 Subject: [PATCH] Add style prop to LiveAudioVisualizer --- README.md | 1 + src/AudioVisualizer/AudioVisualizer.tsx | 2 +- src/LiveAudioVisualizer/LiveAudioVisualizer.tsx | 6 ++++++ 3 files changed, 8 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 837fb6f..069301f 100644 --- a/README.md +++ b/README.md @@ -96,6 +96,7 @@ const Visualizer = () => { | **`maxDecibels`** | A double, representing the maximum decibel value for scaling the FFT analysis data. For more [details](https://developer.mozilla.org/en-US/docs/Web/API/AnalyserNode/maxDecibels) | `-10` | Yes | | **`minDecibels`** | A double, representing the minimum decibel value for scaling the FFT analysis data, where 0 dB is the loudest possible sound. For more [details](https://developer.mozilla.org/en-US/docs/Web/API/AnalyserNode/minDecibels) | `-90` | Yes | | **`smoothingTimeConstant`** | A double within the range 0 to 1 (0 meaning no time averaging). For more [details](https://developer.mozilla.org/en-US/docs/Web/API/AnalyserNode/smoothingTimeConstant) | `0.4` | Yes | +| **`style`** | Custom styles that can be passed to the visualization canvas | N/A | Yes | diff --git a/src/AudioVisualizer/AudioVisualizer.tsx b/src/AudioVisualizer/AudioVisualizer.tsx index e795223..25dc4bf 100644 --- a/src/AudioVisualizer/AudioVisualizer.tsx +++ b/src/AudioVisualizer/AudioVisualizer.tsx @@ -50,7 +50,7 @@ interface Props { */ currentTime?: number; /** - * Custome styles that can be passed to the visualization canvas + * Custom styles that can be passed to the visualization canvas */ style?: React.CSSProperties; /** diff --git a/src/LiveAudioVisualizer/LiveAudioVisualizer.tsx b/src/LiveAudioVisualizer/LiveAudioVisualizer.tsx index c694ea6..33df1ea 100644 --- a/src/LiveAudioVisualizer/LiveAudioVisualizer.tsx +++ b/src/LiveAudioVisualizer/LiveAudioVisualizer.tsx @@ -74,6 +74,10 @@ export interface Props { * Default: `0.4` */ smoothingTimeConstant?: number; + /** + * Custom styles that can be passed to the visualization canvas + */ + style?: React.CSSProperties; } const LiveAudioVisualizer: (props: Props) => ReactElement = ({ @@ -88,6 +92,7 @@ const LiveAudioVisualizer: (props: Props) => ReactElement = ({ maxDecibels = -10, minDecibels = -90, smoothingTimeConstant = 0.4, + style, }: Props) => { const [context, setContext] = useState(); const [audioSource, setAudioSource] = useState(); @@ -177,6 +182,7 @@ const LiveAudioVisualizer: (props: Props) => ReactElement = ({ height={height} style={{ aspectRatio: "unset", + ...style, }} /> );