fix:音频播放器在标签切换的时候报错的问题 (#27)

src/components/HbAdminAudio.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { useMessage, NSlider, useThemeVars } from 'naive-ui'
-import { onMounted, ref } from 'vue'
+import {nextTick, onBeforeUnmount, onMounted, ref} from 'vue'
 const themeVars = useThemeVars()
 const message = useMessage()
 
@@ -25,8 +25,11 @@ const nowDuration = ref(0)
 const progress = ref(0)
 
 function handleSlider (val) {
+  handlePause()
   progress.value = val
-  hbAudio.value.currentTime = duration.value * val / 100
+  nextTick(() => {
+    hbAudio.value.currentTime = duration.value * val / 100
+  })
 }
 
 function formatTooltip (val) {
@@ -39,12 +42,7 @@ function initialAudio () {
     nowDuration.value = 0
     hbAudio.value.oncanplay = () => {
       duration.value = Math.ceil(hbAudio.value.duration)
-      hbAudio.value.addEventListener('timeupdate', () => {
-        nowDuration.value = Math.ceil(hbAudio.value.currentTime)
-        if (duration.value > 0) {
-          progress.value = Math.floor(nowDuration.value / duration.value * 100)
-        }
-      })
+      hbAudio.value.addEventListener('timeupdate', timeupdateListener)
       hbAudio.value.addEventListener('ended', () => {
         if (!loop.value) {
           state.value = false
@@ -56,6 +54,13 @@ function initialAudio () {
   }
 }
 
+function timeupdateListener () {
+  nowDuration.value = Math.ceil(hbAudio.value.currentTime)
+  if (duration.value > 0) {
+    progress.value = Math.floor(nowDuration.value / duration.value * 100)
+  }
+}
+
 function formatTime (time = 0) {
   if (time > 60) {
     const m = Math.floor(time / 60)
@@ -92,6 +97,10 @@ onMounted(() => {
   initialAudio()
 })
 
+onBeforeUnmount(() => {
+  hbAudio.value.removeEventListener('timeupdate', timeupdateListener)
+})
+
 function handlePlay () {
   hbAudio.value.play()
   state.value = true