fix(hook): modify the export object of the instance in the hook

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 = () => {

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()

example/src/components/visualizaion/EchoWaveform.tsx

@@ -66,7 +66,7 @@ export const EchoWaveform = () => {
       {tab === 'a' ? (
         <Waveform
           data={data}
-          audioDuration={audioDuration}
+          audioDuration={audioDuration.current}
           percentage={percentage}
           onClick={handleClick}
           waveHeight={100}

example/src/components/visualizaion/VuMeter/EchoMono.tsx

@@ -33,22 +33,22 @@ export const VuMeterMono = () => {
   }, [])
 
   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()
   }

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()

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<Tone.Analyser>()
   const observerId = useRef<number>(0)
+  const analyser = useRef<Tone.Analyser>()
   const [data, setData] = useState<OscilloscopeDataPoint[]>([])
   const [error, setError] = useState<boolean>(false)
   const [errorMessage, setErrorMessage] = useState<string>('')
@@ -95,7 +95,7 @@ export const useOscilloscope = (props: UseOscilloscopeProps = {}) => {
 
   return {
     init,
-    analyser: analyser.current,
+    analyser,
     data,
     getData,
     observer,

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,

packages/hooks/useSpectrogram.ts

@@ -102,7 +102,7 @@ export const useSpectrogram = (props: UseSpectrogramProps = {}) => {
   }, [error])
 
   return {
-    analyser: analyser.current,
+    analyser,
     data,
     init,
     getData,

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,