Merge pull request #55 from codeacme17/docs

docs: update pages base on #53

Author: codeacme17

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