docs: update example components

Author: codeacme17

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}
       />