diff --git a/docs/en/hook/useOscilloscope.mdx b/docs/en/hook/useOscilloscope.mdx index 84a3b0d9..593dc59e 100644 --- a/docs/en/hook/useOscilloscope.mdx +++ b/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` - 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[]` diff --git a/docs/en/hook/usePlayer.mdx b/docs/en/hook/usePlayer.mdx index 456e8bfc..3ee18754 100644 --- a/docs/en/hook/usePlayer.mdx +++ b/docs/en/hook/usePlayer.mdx @@ -84,13 +84,13 @@ This hook enables the implementation of basic functions of a music player, inclu -- **player**: `Tone.Player` +- **player**: `React.MutableRefObject` - 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` - The duration of the audio in seconds. + The duration of the audio in seconds. Need to use `.current` to obtain. - **isReady**: `boolean` diff --git a/docs/en/hook/useSpectrogram.mdx b/docs/en/hook/useSpectrogram.mdx index 0a6df6cc..2686eea5 100644 --- a/docs/en/hook/useSpectrogram.mdx +++ b/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` - 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[]` diff --git a/docs/en/hook/useVuMeter.mdx b/docs/en/hook/useVuMeter.mdx index a9c29926..92524cd8 100644 --- a/docs/en/hook/useVuMeter.mdx +++ b/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 | React.MutableRefObject` - 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[]` diff --git a/docs/src/components/Example/OscilloscopeDefault.tsx b/docs/src/components/Example/OscilloscopeDefault.tsx index 844c69c2..02722bdf 100644 --- a/docs/src/components/Example/OscilloscopeDefault.tsx +++ b/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) { diff --git a/docs/src/components/Example/SliderUncontrolled.tsx b/docs/src/components/Example/SliderUncontrolled.tsx index 9fe102be..6df84443 100644 --- a/docs/src/components/Example/SliderUncontrolled.tsx +++ b/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 diff --git a/docs/src/components/Example/SpectrogramDefault.tsx b/docs/src/components/Example/SpectrogramDefault.tsx index 11db954c..ab98fa86 100644 --- a/docs/src/components/Example/SpectrogramDefault.tsx +++ b/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() diff --git a/docs/src/components/Example/VuMeterColor.tsx b/docs/src/components/Example/VuMeterColor.tsx index a1887add..452ad76d 100644 --- a/docs/src/components/Example/VuMeterColor.tsx +++ b/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 = () => { diff --git a/docs/src/components/Example/VuMeterDefault.tsx b/docs/src/components/Example/VuMeterDefault.tsx index d93823d8..f6187700 100644 --- a/docs/src/components/Example/VuMeterDefault.tsx +++ b/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 diff --git a/docs/src/components/Example/VuMeterStereo.tsx b/docs/src/components/Example/VuMeterStereo.tsx index 4ada3b29..c4cfc44f 100644 --- a/docs/src/components/Example/VuMeterStereo.tsx +++ b/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 diff --git a/docs/src/components/Example/WaveformDefault.tsx b/docs/src/components/Example/WaveformDefault.tsx index 6b5c7943..006bfa60 100644 --- a/docs/src/components/Example/WaveformDefault.tsx +++ b/docs/src/components/Example/WaveformDefault.tsx @@ -58,7 +58,7 @@ export const WaveformDefault = () => {
diff --git a/docs/zh/hook/useOscilloscope.mdx b/docs/zh/hook/useOscilloscope.mdx index 5ba61f4c..0fc3355a 100644 --- a/docs/zh/hook/useOscilloscope.mdx +++ b/docs/zh/hook/useOscilloscope.mdx @@ -44,9 +44,9 @@ import { Github } from 'lucide-react' 调用该方法可以初始化 `analyser`，在初始化完成后会调用 `onReady` 回调函数 -- **analyser** : `Tone.Analyser` +- **analyser** : `React.MutableRefObject` - 初始化后构建类型为 `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[]` diff --git a/docs/zh/hook/usePlayer.mdx b/docs/zh/hook/usePlayer.mdx index 7c680ae9..edfe5bbf 100644 --- a/docs/zh/hook/usePlayer.mdx +++ b/docs/zh/hook/usePlayer.mdx @@ -84,13 +84,13 @@ import { Github } from 'lucide-react' -- **player**: `Tone.Player` +- **player**: `React.MutableRefObject` - 初始化后构建的 [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` - 音频的时长，单位为秒 + 音频的时长，单位为秒，需要使用 `.current` 获取 - **isReady**: `boolean` diff --git a/docs/zh/hook/useSpectrogram.mdx b/docs/zh/hook/useSpectrogram.mdx index e90619aa..64277c59 100644 --- a/docs/zh/hook/useSpectrogram.mdx +++ b/docs/zh/hook/useSpectrogram.mdx @@ -44,9 +44,9 @@ import { Github } from 'lucide-react' 调用该方法可以初始化 `analyser`，在初始化完成后会调用 `onReady` 回调函数 -- **analyser** : `Tone.Analyser` +- **analyser** : `React.MutableRefObject` - 初始化后构建类型为 `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[]` diff --git a/docs/zh/hook/useVuMeter.mdx b/docs/zh/hook/useVuMeter.mdx index 048a5b6e..47174408 100644 --- a/docs/zh/hook/useVuMeter.mdx +++ b/docs/zh/hook/useVuMeter.mdx @@ -44,9 +44,9 @@ import { Github } from 'lucide-react' 调用该方法可以初始化 `meter`，在初始化完成后会调用 `onReady` 回调函数 -- **meter**: `Tone.Meter | Tone.Split` +- **meter**: `React.MutableRefObject | React.MutableRefObject` - 初始化后构建的 [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[]` diff --git a/packages/hooks/useOscilloscope.ts b/packages/hooks/useOscilloscope.ts index 028d7866..c453aaea 100644 --- a/packages/hooks/useOscilloscope.ts +++ b/packages/hooks/useOscilloscope.ts @@ -36,7 +36,7 @@ export const useOscilloscope = (props: UseOscilloscopeProps = {}) => { const { fftSize = FFT_SIZE, onReady, onError } = props const observerId = useRef(0) - const analyser = useRef() + const analyser = useRef(null) const [data, setData] = useState([]) const [error, setError] = useState(false) const [errorMessage, setErrorMessage] = useState('')