Fix AudioPlayer.vue - import the audio file dynamically before mount

shiragold · Apr 30, 2024 · 80c8451 · 80c8451
1 parent 87527ad
commit 80c8451
Showing 1 changed file with 4 additions and 3 deletions.
diff --git a/src/components/content/AudioPlayer.vue b/src/components/content/AudioPlayer.vue
@@ -1,19 +1,20 @@
 <script setup>
-import { computed, onMounted } from 'vue'
+import { ref, onBeforeMount, onMounted } from 'vue'
 const props = defineProps({
   src: {
     type: String,
     required: true
   }
 })
-const srcFull = computed(() => '@media/' + props.src + '.mp3')
+let audioFile = ref(null)
+onBeforeMount(() => audioFile = import('@media/' + props.src + '.mp3'))
 
 onMounted(() => {
   document.getElementsByTagName('audio')[0].play()
 })
 </script>
 <template>
   <audio>
-    <source :src="srcFull" type="audio/mpeg" />
+    <source :src="audioFile" type="audio/mpeg" />
   </audio>
 </template>