feat(hook): added audioDuration return value for useWaveform

Author: codeacme17

example/src/components/visualizaion/EchoWaveform.tsx

@@ -10,17 +10,16 @@ import { useEffect } from 'react'
 import { Play, Square, Pause, Repeat, VolumeX } from 'lucide-react'
 
 export const EchoWaveform = () => {
-  const url = 'https://codeacme17.github.io/1llest-waveform-vue/audios/loop-6.mp3'
+  const url = 'https://codeacme17.github.io/1llest-waveform-vue/audios/loop-3.mp3'
 
   const { pending, error, audioBuffer, fetchAudio } = useFetchAudio({ url })
-  const { data } = useWaveform({ audioBuffer })
+  const { data, audioDuration } = useWaveform({ audioBuffer })
   const {
     isReady,
     isPlaying,
     loop,
     mute,
     percentage,
-    audioDuration,
     init,
     setMute,
     setLoop,
@@ -62,7 +61,6 @@ export const EchoWaveform = () => {
         percentage={percentage}
         onClick={handleClick}
         waveHeight={100}
-        hideCursorLabel
         className="w-full"
       />
 

packages/hooks/useWaveform.ts

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { logger } from '../lib/log'
 
 export interface UseWaveformProps {
@@ -32,18 +32,31 @@ export const useWaveform = (props: UseWaveformProps) => {
   const { audioBuffer, channel = CHANNEL, samples = SAMPLES } = props
 
   const [data, setData] = useState<number[][] | number[]>([])
+  const audioDuration = useRef(0)
   const [error, setError] = useState(false)
   const [errorMessage, setErrorMessage] = useState('')
 
   useEffect(() => {
     if (data.length) return
     loadAndDecodeAudio()
+    getAudioDuration()
   }, [channel, samples, audioBuffer])
 
   useEffect(() => {
     if (error) logger.error(errorMessage)
   }, [error])
 
+  const getAudioDuration = () => {
+    if (error || !audioBuffer) return
+
+    try {
+      audioDuration.current = audioBuffer.duration
+    } catch (err) {
+      setError(true)
+      setErrorMessage(err as string)
+    }
+  }
+
   const loadAndDecodeAudio = async () => {
     if (error || !audioBuffer) return
 
@@ -80,5 +93,5 @@ export const useWaveform = (props: UseWaveformProps) => {
     }
   }
 
-  return { data, error, errorMessage }
+  return { data, audioDuration, error, errorMessage }
 }