docs: update pages base on #53

docs/en/hook/useOscilloscope.mdx

@@ -44,9 +44,9 @@ A hook for creating an oscilloscope, which can obtain real-time amplitude data.
 
   Calling this method initializes the `analyser`. After initialization, the `onReady` callback function will be called.
 
-- **analyser** : `Tone.Analyser`
+- **analyser** : `React.MutableRefObject<Tone.Analyser | null>`
 
-  After initialization, a `waveform` type analyzer [Tone.Analyser](https://tonejs.github.io/docs/14.7.77/Analyser) instance is constructed.
+  After initialization, a `waveform` type analyzer [Tone.Analyser](https://tonejs.github.io/docs/14.7.77/Analyser) instance is constructed. Need to use `.current` to obtain.
 
 - **data** : `SpectrogramDataPoint[]`
 

docs/en/hook/usePlayer.mdx

@@ -84,13 +84,13 @@ This hook enables the implementation of basic functions of a music player, inclu
 
     <CodeBlock code={`init(audioBuffer, [filter, analyzer])`} />
 
-- **player**: `Tone.Player`
+- **player**: `React.MutableRefObject<Tone.Player | null>`
 
-  The [Tone.Player](https://tonejs.github.io/docs/14.7.77/Player) instance created after initialization.
+  The [Tone.Player](https://tonejs.github.io/docs/14.7.77/Player) instance created after initialization. Need to use `.current` to obtain.
 
-- **audioDuration**: `number`
+- **audioDuration**: `React.MutableRefObject<number>`
 
-  The duration of the audio in seconds.
+  The duration of the audio in seconds. Need to use `.current` to obtain.
 
 - **isReady**: `boolean`
 

docs/en/hook/useSpectrogram.mdx

@@ -44,9 +44,9 @@ This hook can be used to generate a spectrogram for audio.
 
   Calling this method can initialize `analyser`, and the `onReady` callback function will be called after the initialization is completed.
 
-- **analyser** : `Tone.Analyser`
+- **analyser** : `React.MutableRefObject<Tone.Analyser | null>`
 
-  Instance of [Tone.Analyser](https://tonejs.github.io/docs/14.7.77/Analyser) constructed after initialization
+  Instance of [Tone.Analyser](https://tonejs.github.io/docs/14.7.77/Analyser) constructed after initialization. Need to use `.current` to obtain.
 
 - **data** : `SpectrogramDataPoint[]`
 

docs/en/hook/useVuMeter.mdx

@@ -44,9 +44,9 @@ A Hook for obtaining audio volume levels
 
   Calling this method can initialize `meter`. After the initialization is completed, the `onReady` callback function will be called.
 
-- **meter**: `Tone.Meter | Tone.Split`
+- **meter**: `React.MutableRefObject<Tone.Split | null> | React.MutableRefObject<Tone.Meter | null>`
 
-  Initially constructed [Tone.Meter](https://tonejs.github.io/docs/14.7.77/Meter)(Mono) or [Tone.Split](https://tonejs.github.io/docs/14.7.77/Split)(Stereo) instances
+  Initially constructed [Tone.Meter](https://tonejs.github.io/docs/14.7.77/Meter)(Mono) or [Tone.Split](https://tonejs.github.io/docs/14.7.77/Split)(Stereo) instances. Need to use `.current` to obtain.
 
 - **value**: `number | number[]`
 

docs/src/components/Example/OscilloscopeDefault.tsx

@@ -13,9 +13,9 @@ export const OscilloscopeDefault = () => {
   }, [])
 
   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 = () => {
     if (isPlaying) {

docs/src/components/Example/SliderUncontrolled.tsx

@@ -24,9 +24,9 @@ export const SliderUncontrolled = () => {
   }, [])
 
   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

docs/src/components/Example/SpectrogramDefault.tsx

@@ -29,9 +29,9 @@ export const SpectrogramDefault = () => {
   }, [])
 
   React.useEffect(() => {
-    if (!analyser) return
-    initPlayer(audioBuffer!, [analyser])
-  }, [audioBuffer, analyser])
+    if (!analyser.current) return
+    initPlayer(audioBuffer!, [analyser.current])
+  }, [audioBuffer, analyser.current])
 
   const handleTrigger = async () => {
     if (isPlaying) stop()

docs/src/components/Example/VuMeterColor.tsx

@@ -24,8 +24,8 @@ export const VuMeterColor = () => {
   }, [])
 
   React.useEffect(() => {
-    if (!audioBuffer || !meter) return
-    initPlayer(audioBuffer, [meter])
+    if (!audioBuffer || !meter.current) return
+    initPlayer(audioBuffer, [meter.current])
   }, [audioBuffer, meter])
 
   const handlePlay = () => {

docs/src/components/Example/VuMeterDefault.tsx

@@ -24,9 +24,9 @@ export const VuMeterDefault = () => {
   }, [])
 
   React.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

docs/src/components/Example/VuMeterStereo.tsx

@@ -30,9 +30,9 @@ export const VuMeterStereo = () => {
   }, [])
 
   React.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

docs/src/components/Example/WaveformDefault.tsx

@@ -58,7 +58,7 @@ export const WaveformDefault = () => {
     <section className="w-full flex flex-col justify-center items-center">
       <Waveform
         data={data}
-        audioDuration={audioDuration}
+        audioDuration={audioDuration.current}
         percentage={percentage}
         onClick={handleClick}
       />

docs/zh/hook/useOscilloscope.mdx

@@ -44,9 +44,9 @@ import { Github } from 'lucide-react'
 
   调用该方法可以初始化 `analyser`，在初始化完成后会调用 `onReady` 回调函数
 
-- **analyser** : `Tone.Analyser`
+- **analyser** : `React.MutableRefObject<Tone.Analyser | null>`
 
-  初始化后构建类型为 `waveform` 的分析器 [Tone.Analyser](https://tonejs.github.io/docs/14.7.77/Analyser) 实例
+  初始化后构建的类型为 `waveform` 的分析器 [Tone.Analyser](https://tonejs.github.io/docs/14.7.77/Analyser) 实例，需要使用 `.current` 进行获取
 
 - **data** : `SpectrogramDataPoint[]`
 

docs/zh/hook/usePlayer.mdx

@@ -84,13 +84,13 @@ import { Github } from 'lucide-react'
 
     <CodeBlock code={`init(audioBuffer, [filter, analyser])`} />
 
-- **player**: `Tone.Player`
+- **player**: `React.MutableRefObject<Tone.Player | null>`
 
-  初始化后构建的 [Tone.Player](https://tonejs.github.io/docs/14.7.77/Player) 实例
+  初始化后构建的 [Tone.Player](https://tonejs.github.io/docs/14.7.77/Player) 实例，需要使用 `.current` 获取
 
-- **audioDuration**: `number`
+- **audioDuration**: `React.MutableRefObject<number>`
 
-  音频的时长，单位为秒
+  音频的时长，单位为秒，需要使用 `.current` 获取
 
 - **isReady**: `boolean`
 

docs/zh/hook/useSpectrogram.mdx

@@ -44,9 +44,9 @@ import { Github } from 'lucide-react'
 
   调用该方法可以初始化 `analyser`，在初始化完成后会调用 `onReady` 回调函数
 
-- **analyser** : `Tone.Analyser`
+- **analyser** : `React.MutableRefObject<Tone.Analyser | null>`
 
-  初始化后构建类型为 `fft` 的分析器 [Tone.Analyser](https://tonejs.github.io/docs/14.7.77/Analyser) 实例
+  初始化后构建类型为 `fft` 的分析器 [Tone.Analyser](https://tonejs.github.io/docs/14.7.77/Analyser) 实例，需要使用 `.current` 获取
 
 - **data** : `SpectrogramDataPoint[]`
 

docs/zh/hook/useVuMeter.mdx

@@ -44,9 +44,9 @@ import { Github } from 'lucide-react'
 
   调用该方法可以初始化 `meter`，在初始化完成后会调用 `onReady` 回调函数
 
-- **meter**: `Tone.Meter | Tone.Split`
+- **meter**: `React.MutableRefObject<Tone.Split | null> | React.MutableRefObject<Tone.Meter | null>`
 
-  初始化后构建的 [Tone.Meter](https://tonejs.github.io/docs/14.7.77/Meter)(单声道时) 或 [Tone.Split](https://tonejs.github.io/docs/14.7.77/Split)(双声道时) 实例
+  初始化后构建的 [Tone.Meter](https://tonejs.github.io/docs/14.7.77/Meter)(单声道时) 或 [Tone.Split](https://tonejs.github.io/docs/14.7.77/Split)(双声道时) 实例，需要使用 `.current` 进行获取
 
 - **value**: `number | number[]`
 

packages/hooks/useOscilloscope.ts

@@ -36,7 +36,7 @@ export const useOscilloscope = (props: UseOscilloscopeProps = {}) => {
   const { fftSize = FFT_SIZE, onReady, onError } = props
 
   const observerId = useRef<number>(0)
-  const analyser = useRef<Tone.Analyser>()
+  const analyser = useRef<Tone.Analyser | null>(null)
   const [data, setData] = useState<OscilloscopeDataPoint[]>([])
   const [error, setError] = useState<boolean>(false)
   const [errorMessage, setErrorMessage] = useState<string>('')