feat: add fetched event

Author: codeacme17

example/src/App.vue

@@ -17,7 +17,8 @@ const toggleDark = useToggle(isDark)
 const items = reactive<Props[]>([
   {
     id: nanoid(),
-    url: `${import.meta.env.BASE_URL}audios/loop-1.mp3`,
+    // url: `${import.meta.env.BASE_URL}audios/loop-1.mp3`,
+    url: 'https://wavesurfer-js.org/example/media/demo.wav',
   },
   {
     id: nanoid(),

example/src/components/Demo.vue

@@ -48,6 +48,7 @@ onMounted(() => {
 })
 
 const init = ref(false)
+const fetched = ref(false)
 const playing = ref(false)
 const finished = ref(false)
 const ready = ref(false)
@@ -58,6 +59,10 @@ const initHandler = (v: boolean) => {
   init.value = v
 }
 
+const fetchedHandler = (v: boolean) => {
+  fetched.value = v
+}
+
 const readyHandler = (v: boolean) => {
   ready.value = v
   getDuration()
@@ -103,6 +108,7 @@ const getDuration = () => {
         ref="waveformRef"
         v-bind="waveOptions"
         @on-init="initHandler"
+        @on-fetched="fetchedHandler"
         @on-ready="readyHandler"
         @on-play="(v: boolean) => (playing = v)"
         @on-pause="(v: boolean) => (playing = v)"
@@ -112,6 +118,30 @@ const getDuration = () => {
     </div>
 
     <div class="flex mt-2 items-end">
+      <div
+        class="flex items-center w-28"
+        :class="`${fetched ? '' : 'animate-pulse'}`"
+      >
+        <span
+          class="tag"
+          :class="`${
+            fetched ? 'bg-green-600 dark:bg-green-400' : 'bg-gray-400'
+          }`"
+        />
+        {{ fetched ? 'fetched' : 'fetching' }}
+      </div>
+
+      <div
+        class="flex items-center w-28"
+        :class="`${ready ? '' : 'animate-pulse'}`"
+      >
+        <span
+          class="tag"
+          :class="`${ready ? 'bg-green-600 dark:bg-green-400' : 'bg-gray-400'}`"
+        />
+        {{ ready ? 'ready' : 'rendering' }}
+      </div>
+
       <div class="ml-auto">
         <span class="text-neutral-400">{{ currentTime }}</span> /
         <strong>{{ durationTime }}</strong>
@@ -120,7 +150,7 @@ const getDuration = () => {
       <div class="ml-5">
         <button
           v-show="!playing && !finished"
-          class="btn text-[#3e6bff]"
+          class="text-[#3e6bff]"
           @click="play"
         >
           <PlayIcon />
@@ -129,14 +159,14 @@ const getDuration = () => {
 
         <button
           v-show="playing && !finished"
-          class="btn text-yellow-500"
+          class="text-yellow-500"
           @click="pause"
         >
           <PauseIcon />
           <div>PAUSE</div>
         </button>
 
-        <button v-show="finished" class="btn text-green-500" @click="replay">
+        <button v-show="finished" class="text-green-500" @click="replay">
           <ReplayIcon />
           <div>REPLAY</div>
         </button>
@@ -146,7 +176,11 @@ const getDuration = () => {
 </template>
 
 <style scoped lang="scss">
-.btn {
+.tag {
+  @apply inline-flex h-2 w-2 mr-2 rounded-full opacity-75;
+}
+
+button {
   @apply flex items-center bg-neutral-200 dark:bg-neutral-700 px-5 py-1 rounded-sm;
 
   & div {

src/components/IllestWaveform.vue

@@ -85,6 +85,8 @@ async function init(): Promise<void> {
 
 async function initAudioController(): Promise<void> {
   audioController = new AudioController(props)
+  await audioController.fetchAudioFile()
+  emits('onFetched', true)
   await audioController.setupAudio()
   watchIsFinish()
 }
@@ -177,6 +179,7 @@ function getDuration(): string {
 
 const emits = defineEmits([
   'onInit', // start init hook
+  'onFetched', // fetched audio file
   'onReady', // ready to play, rended
   'onPlay', // start play hook
   'onPause', // pause hook

src/modules/Audio.ts

@@ -12,6 +12,7 @@ export default class WebAudio {
   protected audioBuffer!: AudioBuffer
   protected audioBufferSourceNode!: AudioBufferSourceNode
   private filterData!: number[][]
+  private response!: Response
 
   constructor(props: IllestWaveformProps) {
     this.props = props
@@ -33,9 +34,16 @@ export default class WebAudio {
     this.createFilterData()
   }
 
+  public async fetchAudioFile(): Promise<void> {
+    try {
+      this.response = await fetch(this.props.url)
+    } catch (error) {
+      console.error(error)
+    }
+  }
+
   private async createAudioBuffer(): Promise<void> {
-    const response: Response = await fetch(this.props.url)
-    const arrayBuffer: ArrayBuffer = await response.arrayBuffer()
+    const arrayBuffer: ArrayBuffer = await this.response.arrayBuffer()
     this.audioBuffer = await this.audioCtx.decodeAudioData(arrayBuffer)
   }