From b3ac2271cfe10faacbbf6f7d2748264d24c4ed4b Mon Sep 17 00:00:00 2001 From: leyoonafr Date: Wed, 31 Jan 2024 15:04:34 +0800 Subject: [PATCH] fix(hook): modify the export object of the instance in the hook --- example/src/components/visualizaion/EchoOsci.tsx | 4 ++-- .../components/visualizaion/EchoSpectrogram.tsx | 15 ++++++++++----- .../src/components/visualizaion/EchoWaveform.tsx | 2 +- .../components/visualizaion/VuMeter/EchoMono.tsx | 12 ++++++------ .../visualizaion/VuMeter/EchoStereo.tsx | 6 +++--- packages/hooks/useOscilloscope.ts | 4 ++-- packages/hooks/usePlayer.ts | 4 ++-- packages/hooks/useSpectrogram.ts | 2 +- packages/hooks/useVuMeter.ts | 2 +- 9 files changed, 28 insertions(+), 23 deletions(-) diff --git a/example/src/components/visualizaion/EchoOsci.tsx b/example/src/components/visualizaion/EchoOsci.tsx index d8e6723c..6fe3bf4f 100644 --- a/example/src/components/visualizaion/EchoOsci.tsx +++ b/example/src/components/visualizaion/EchoOsci.tsx @@ -13,8 +13,8 @@ export const EchoOsci = () => { }, []) useEffect(() => { - if (!audioBuffer || !analyser) return - initPlayer(audioBuffer, [analyser]) + if (!audioBuffer || !analyser.current) return + initPlayer(audioBuffer, [analyser.current]) }, [audioBuffer, analyser]) const handleTrigger = () => { diff --git a/example/src/components/visualizaion/EchoSpectrogram.tsx b/example/src/components/visualizaion/EchoSpectrogram.tsx index f403232f..3243d5c4 100644 --- a/example/src/components/visualizaion/EchoSpectrogram.tsx +++ b/example/src/components/visualizaion/EchoSpectrogram.tsx @@ -39,8 +39,13 @@ export const EchoSpectrogram = () => { }, []) React.useEffect(() => { - if (!analyser || !filterLow.current || !filterMid.current || !filterHigh.current) return - initPlayer(audioBuffer!, [filterLow.current, filterMid.current, filterHigh.current, analyser]) + if (!analyser.current || !filterLow.current || !filterMid.current || !filterHigh.current) return + initPlayer(audioBuffer!, [ + filterLow.current, + filterMid.current, + filterHigh.current, + analyser.current, + ]) }, [audioBuffer, analyser, filterLow.current, filterMid.current, filterHigh.current]) React.useEffect(() => { @@ -101,9 +106,9 @@ export const SpectrogramDefault = () => { }, []) React.useEffect(() => { - if (!audioBuffer || !analyser) return - initPlayer(audioBuffer!, [analyser]) - }, [audioBuffer, analyser]) + if (!audioBuffer || !analyser.current) return + initPlayer(audioBuffer!, [analyser.current]) + }, [audioBuffer, analyser.current]) const handleTrigger = async () => { if (isPlaying) stop() diff --git a/example/src/components/visualizaion/EchoWaveform.tsx b/example/src/components/visualizaion/EchoWaveform.tsx index fd7fa24b..0a148ec3 100644 --- a/example/src/components/visualizaion/EchoWaveform.tsx +++ b/example/src/components/visualizaion/EchoWaveform.tsx @@ -66,7 +66,7 @@ export const EchoWaveform = () => { {tab === 'a' ? ( { }, []) useEffect(() => { - if (!audioBuffer || !meter) return - initPlayer(audioBuffer, [meter]) - }, [audioBuffer, meter]) + if (!audioBuffer || !meter.current) return + initPlayer(audioBuffer, [meter.current]) + }, [audioBuffer, meter.current]) const handlePlay = () => { - if (!player) return + if (!player.current) return observe() } const handleStop = () => { - if (!player) return + if (!player.current) return cancelObserve() } const handleTriggerPlay = () => { - if (!player) return + if (!player.current) return if (isPlaying) pause() else play() } diff --git a/example/src/components/visualizaion/VuMeter/EchoStereo.tsx b/example/src/components/visualizaion/VuMeter/EchoStereo.tsx index 13a67aac..38ee2394 100644 --- a/example/src/components/visualizaion/VuMeter/EchoStereo.tsx +++ b/example/src/components/visualizaion/VuMeter/EchoStereo.tsx @@ -28,9 +28,9 @@ export const VueMeterStereo = () => { }, []) React.useEffect(() => { - if (!audioBuffer || !meter) return - initPlayer(audioBuffer, [meter]) - }, [audioBuffer, meter]) + if (!audioBuffer || !meter.current) return + initPlayer(audioBuffer, [meter.current]) + }, [audioBuffer, meter.current]) const handleClick = () => { if (isPlaying) pause() diff --git a/packages/hooks/useOscilloscope.ts b/packages/hooks/useOscilloscope.ts index 32c77a1d..028d7866 100644 --- a/packages/hooks/useOscilloscope.ts +++ b/packages/hooks/useOscilloscope.ts @@ -35,8 +35,8 @@ const FFT_SIZE = 1024 export const useOscilloscope = (props: UseOscilloscopeProps = {}) => { const { fftSize = FFT_SIZE, onReady, onError } = props - const analyser = useRef() const observerId = useRef(0) + const analyser = useRef() const [data, setData] = useState([]) const [error, setError] = useState(false) const [errorMessage, setErrorMessage] = useState('') @@ -95,7 +95,7 @@ export const useOscilloscope = (props: UseOscilloscopeProps = {}) => { return { init, - analyser: analyser.current, + analyser, data, getData, observer, diff --git a/packages/hooks/usePlayer.ts b/packages/hooks/usePlayer.ts index f2d27bc4..73258f57 100644 --- a/packages/hooks/usePlayer.ts +++ b/packages/hooks/usePlayer.ts @@ -266,8 +266,8 @@ export const usePlayer = (props: UsePlayerProps = {}) => { } return { - player: player.current, - audioDuration: audioDuration.current, + player, + audioDuration, isReady, isPlaying, isFinish, diff --git a/packages/hooks/useSpectrogram.ts b/packages/hooks/useSpectrogram.ts index dfcce309..30c3e90b 100644 --- a/packages/hooks/useSpectrogram.ts +++ b/packages/hooks/useSpectrogram.ts @@ -102,7 +102,7 @@ export const useSpectrogram = (props: UseSpectrogramProps = {}) => { }, [error]) return { - analyser: analyser.current, + analyser, data, init, getData, diff --git a/packages/hooks/useVuMeter.ts b/packages/hooks/useVuMeter.ts index 437efab6..64806fcc 100644 --- a/packages/hooks/useVuMeter.ts +++ b/packages/hooks/useVuMeter.ts @@ -115,7 +115,7 @@ export const useVuMeter = (props: UseVuMeterProps) => { }, [_value]) return { - meter: isStereo ? split.current! : meter.current!, + meter: isStereo ? split : meter, value, init, getValue,