diff --git a/src/model/api/music.ts b/src/model/api/music.ts
index 9642cbe..7e75a69 100644
--- a/src/model/api/music.ts
+++ b/src/model/api/music.ts
@@ -34,6 +34,7 @@ export interface MusicPlayerItem {
   src: string
   pic: string
   lrc?: string
+  lyricId?: string
 }
 
 export interface StatType {
diff --git a/src/views/api/Music.vue b/src/views/api/Music.vue
index 4e2b211..338ff3c 100644
--- a/src/views/api/Music.vue
+++ b/src/views/api/Music.vue
@@ -169,13 +169,13 @@
     </el-table>
   </el-drawer>
   <el-drawer v-model="musicPlaying" :close-on-click-modal="false" size="40%" title="播放音乐">
-    <a-player v-if="musicPlaying" ref="player" autoplay showLrc :list="musicList" v-model:music="currentMusic" @play="musicPlay"/>
+    <a-player v-if="musicPlaying && currentMusic" ref="player" autoplay showLrc :list="musicList" v-model:music="currentMusic" @play="musicPlay"/>
   </el-drawer>
 </div>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
 import { useStore } from 'vuex'
 import { useBaseList } from '@/model/baselist'
 import { MsgResult, Page } from '@/model/common.dto'
@@ -225,7 +225,7 @@ const musicList = ref<MusicPlayerItem[]>([])
 const currentMusic = ref<MusicPlayerItem>()
 const lyricForm = ref<VForm>()
 const musicUpload = ref<UploadInstance>()
-const player = ref<any>()
+const player = ref<InstanceType<typeof APlayer>>()
 const lyricLoading = ref(false)
 const libDrawerVisible = ref(false)
 const libTableData = ref<(MusicLibModel & { _isNew?: boolean })[]>([])
@@ -245,6 +245,13 @@ const lyricRuleValidate = {
 
 let selectedIds: string[] = []
 
+watch(() => currentMusic.value, async (newMusic) => {
+  if (newMusic && !newMusic.lrc) {
+    const { lyric } = await http.get<any, any>('/music/lyric/get', {params: {lyricId: newMusic.lyricId}})
+    newMusic.lrc = lyric
+  }
+})
+
 async function loadData() {
   loading.value = true
   const data = await http.get<MusicPage, any>('/music/list', {params: search})
@@ -273,9 +280,7 @@ async function playMusic() {
         album: item.album,
         src: `${apiBase}/common/music/load/${item._id}`,
         pic: `${apiBase}/common/music/album/${item._id}`,
-      }
-      if (item.lyricId) {
-        musicItem.lrc = `${apiBase}/common/music/lyric/${item.lyricId}`
+        lyricId: item.lyricId,
       }
       return musicItem
     })
@@ -373,23 +378,23 @@ function musicPlay() {
     artwork: [{src: location.origin + currentMusic.value.pic}]
   })
   navigator.mediaSession.setActionHandler('play', () => {
-    player.value.play()
+    void player.value?.play()
   })
   navigator.mediaSession.setActionHandler('pause', () => {
-    player.value.pause()
+    player.value?.pause()
   })
   navigator.mediaSession.setActionHandler('previoustrack', () => {
     if (currentId === 0) {
-      player.value.switch(musicList.value.length - 1)
+      player.value?.switch(musicList.value.length - 1)
     } else {
-      player.value.switch(currentId - 1)
+      player.value?.switch(currentId - 1)
     }
   })
   navigator.mediaSession.setActionHandler('nexttrack', () => {
     if (currentId === musicList.value.length - 1) {
-      player.value.switch(0)
+      player.value?.switch(0)
     } else {
-      player.value.switch(currentId + 1)
+      player.value?.switch(currentId + 1)
     }
   })
 }
diff --git a/src/views/api/aplayer/components/aplayer-controller-volume.vue b/src/views/api/aplayer/components/aplayer-controller-volume.vue
index dc22e8a..1a2e987 100644
--- a/src/views/api/aplayer/components/aplayer-controller-volume.vue
+++ b/src/views/api/aplayer/components/aplayer-controller-volume.vue
@@ -3,7 +3,7 @@
     <icon-button
       :class="`aplayer-icon-${volumeIcon}`"
       :icon="volumeIcon"
-      @click="$emit('togglemute')"
+      @click="emit('togglemute')"
     />
     <div
       class="aplayer-volume-bar-wrap"
@@ -33,7 +33,7 @@ const props = defineProps<{
   muted: boolean
   theme: string
 }>()
-const emit = defineEmits(['setvolume'])
+const emit = defineEmits(['setvolume', 'togglemute'])
 const barHeight = 40
 
 const volumeIcon = computed(() => {
diff --git a/src/views/api/aplayer/components/aplayer-controller.vue b/src/views/api/aplayer/components/aplayer-controller.vue
index 4065463..a3f0903 100644
--- a/src/views/api/aplayer/components/aplayer-controller.vue
+++ b/src/views/api/aplayer/components/aplayer-controller.vue
@@ -4,9 +4,9 @@
       :loadProgress="loadProgress"
       :playProgress="playProgress"
       :theme="theme"
-      @dragbegin="val => $emit('dragbegin', val)"
-      @dragend="val => $emit('dragend', val)"
-      @dragging="val => $emit('dragging', val)"
+      @dragbegin="val => emit('dragbegin', val)"
+      @dragend="val => emit('dragend', val)"
+      @dragging="val => emit('dragging', val)"
     />
     <div class="aplayer-time">
       <div class="aplayer-time-inner">
@@ -18,26 +18,26 @@
         :volume="volume"
         :theme="theme"
         :muted="muted"
-        @togglemute="$emit('togglemute')"
-        @setvolume="(v: number) => $emit('setvolume', v)"
+        @togglemute="emit('togglemute')"
+        @setvolume="(v: number) => emit('setvolume', v)"
       />
       <icon-button
         class="aplayer-icon-mode"
         icon="shuffle"
         :class="{ 'inactive': !shuffle }"
-        @click="$emit('toggleshuffle')"
+        @click="emit('toggleshuffle')"
       />
       <icon-button
         class="aplayer-icon-mode"
         :icon="repeat === 'repeat_one' ? 'repeat_one' : 'repeat_all'"
         :class="{ 'inactive': repeat === 'no_repeat'}"
-        @click="$emit('nextmode')"
+        @click="emit('nextmode')"
       />
       <icon-button
         class="aplayer-icon-menu"
         icon="menu"
         :class="{ 'inactive': !showList }"
-        @click="$emit('togglelist')"
+        @click="emit('togglelist')"
       />
     </div>
   </div>
@@ -60,6 +60,7 @@ const props = defineProps<{
   showList: boolean
   isMobile: boolean
 }>()
+const emit = defineEmits(['dragbegin', 'dragend', 'dragging', 'togglemute', 'setvolume', 'toggleshuffle', 'nextmode', 'togglelist'])
 const loadProgress = computed(() => {
   if (props.stat.duration === 0) return 0
   return props.stat.loadedTime / props.stat.duration
diff --git a/src/views/api/aplayer/components/aplayer-list.vue b/src/views/api/aplayer/components/aplayer-list.vue
index 655b659..0fc80a2 100644
--- a/src/views/api/aplayer/components/aplayer-list.vue
+++ b/src/views/api/aplayer/components/aplayer-list.vue
@@ -11,7 +11,7 @@
           v-for="(aMusic, index) of musicList"
           :key="index"
           :class="{'aplayer-list-light': aMusic === currentMusic}"
-          @click="$emit('selectsong', aMusic)"
+          @click="emit('selectsong', aMusic)"
         >
           <span class="aplayer-list-cur" :style="{background: theme}"></span>
           <span class="aplayer-list-index">{{ index + 1}}</span>
@@ -34,6 +34,7 @@ const props = defineProps<{
   theme?: string
   listMaxHeight?: string
 }>()
+const emit = defineEmits(['selectsong'])
 const listHeightStyle = computed(() => {
   return {
     height: `${33 * props.musicList.length - 1}px`,
diff --git a/src/views/api/aplayer/components/aplayer-lrc.vue b/src/views/api/aplayer/components/aplayer-lrc.vue
index 6d6be57..5a10d5e 100644
--- a/src/views/api/aplayer/components/aplayer-lrc.vue
+++ b/src/views/api/aplayer/components/aplayer-lrc.vue
@@ -25,10 +25,9 @@ const props = defineProps<{
   playStat: StatType
 }>()
 
-const displayLrc = ref('')
 const currentLineIndex = ref(0)
 
-const lrcLines = computed(() => parseLrc(displayLrc.value))
+const lrcLines = computed(() => parseLrc(props.lrcSource))
 
 const transformStyle = computed(() => {
   return {
@@ -37,17 +36,6 @@ const transformStyle = computed(() => {
   }
 })
 
-watch(() => props.lrcSource, (lrcSource: string) => {
-  currentLineIndex.value = 0
-  if (/^https?:\/\//.test(lrcSource)) {
-    fetch(lrcSource)
-      .then(response => response.text())
-      .then(lrc => displayLrc.value = lrc)
-  } else {
-    displayLrc.value = lrcSource
-  }
-}, { immediate: true })
-
 watch(() => props.playStat.playedTime, (playedTime: number) => {
   for (let i = 0; i < lrcLines.value.length; i++) {
     const line = lrcLines.value[i]
diff --git a/src/views/api/aplayer/vue-aplayer.vue b/src/views/api/aplayer/vue-aplayer.vue
index 9123a2f..dd574b1 100644
--- a/src/views/api/aplayer/vue-aplayer.vue
+++ b/src/views/api/aplayer/vue-aplayer.vue
@@ -61,680 +61,618 @@
     />
   </div>
 </template>
-<script>
-  import Thumbnail from './components/aplayer-thumbnail.vue'
-  import MusicList from './components/aplayer-list.vue'
-  import Controls from './components/aplayer-controller.vue'
-  import Lyrics from './components/aplayer-lrc.vue'
-  import Hls from 'hls.js'
-  import { warn } from './utils'
-
-  // mutex playing instance
-  let activeMutex = null
-
-
-  const REPEAT = {
-    NONE: 'none',
-    MUSIC: 'music',
-    LIST: 'list',
-    NO_REPEAT: 'no_repeat',
-    REPEAT_ONE: 'repeat_one',
-    REPEAT_ALL: 'repeat_all',
-  };
-
-  const VueAPlayer = {
-    name: 'APlayer',
-    disableVersionBadge: false,
-    components: {
-      Thumbnail,
-      Controls,
-      MusicList,
-      Lyrics,
-    },
-    props: {
-      music: {
-        type: Object,
-        required: true,
-        validator (song) {
-          return song.src
-        },
-      },
-      list: {
-        type: Array,
-        default () {
-          return []
-        },
-      },
-      mini: {
-        type: Boolean,
-        default: false,
-      },
-      showLrc: {
-        type: Boolean,
-        default: false,
-      },
-      mutex: {
-        type: Boolean,
-        default: true,
-      },
-      theme: {
-        type: String,
-        default: '#41b883',
-      },
-
-      listMaxHeight: String,
-      /**
-       * @since 1.4.1
-       * Fold playlist initially
-       */
-      listFolded: {
-        type: Boolean,
-        default: false,
-      },
-
-      /**
-       * @since 1.2.0 Float mode
-       */
-      float: {
-        type: Boolean,
-        default: false,
-      },
-
-      // Audio attributes as props
-      // since 1.4.0
-      // autoplay muted preload volume
-      // autoplay is not observable
-
-      /**
-       * @since 1.4.0
-       * not observable
-       */
-      autoplay: {
-        type: Boolean,
-        default: false,
-      },
-
-      /**
-       * @since 1.4.0
-       * observable, sync
-       */
-      muted: {
-        type: Boolean,
-        default: false,
-      },
-      /**
-       * @since 1.4.0
-       * observable
-       */
-      preload: {
-        type: String,
-        default: 'none'
-      },
-
-      /**
-       * @since 1.4.0
-       * observable, sync
-       */
-      volume: {
-        type: Number,
-        default: 0.5,
-        validator (value) {
-          return value >= 0 && value <= 1
-        },
-      },
-
-      // play order control
-      // since 1.5.0
-
-      /**
-       * @since 1.5.0
-       * @see https://support.apple.com/en-us/HT207230
-       * twoWay
-       */
-      shuffle: {
-        type: Boolean,
-        default: false,
-      },
-      /**
-       * @since 1.5.0
-       * @see https://support.apple.com/en-us/HT207230
-       * twoWay
-       */
-      repeat: {
-        type: String,
-        default: REPEAT.NO_REPEAT,
-      }
-    },
-    data () {
-      return {
-        internalMusic: this.music,
-        isPlaying: false,
-        isSeeking: false,
-        wasPlayingBeforeSeeking: false,
-        isMobile: /mobile/i.test(window.navigator.userAgent),
-        playStat: {
-          duration: 0,
-          loadedTime: 0,
-          playedTime: 0,
-        },
-        showList: !this.listFolded,
-
-        // handle Promise returned from audio.play()
-        // @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/play
-        audioPlayPromise: Promise.resolve(),
-        rejectPlayPromise: Promise.reject(),
-
-        // @since 1.2.0 float mode
-
-        floatOriginX: 0,
-        floatOriginY: 0,
-        floatOffsetLeft: 0,
-        floatOffsetTop: 0,
-
-
-        // @since 1.3.0 self adapting theme
-        selfAdaptingTheme: null,
-
-
-        // @since 1.4.0
-        // sync muted, volume
-
-        internalMuted: this.muted,
-        internalVolume: this.volume,
-
-        // @since 1.4.1
-        // Loading indicator
-        isLoading: false,
-
-
-        // @since 1.5.1
-        // sync shuffle, repeat
-        internalShuffle: this.shuffle,
-        internalRepeat: this.repeat,
-        // for shuffling
-        shuffledList: [],
-        hls: null
-      }
-    },
-    computed: {
-      // alias for $refs.audio
-      audio () {
-        return this.$refs.audio
-      },
-
-      // sync music
-      currentMusic: {
-        get () {
-          return this.internalMusic
-        },
-        set (val) {
-          this.$emit('update:music', val)
-          this.internalMusic = val
-        },
-      },
-      // props wrappers
-
-      currentTheme () {
-        return this.selfAdaptingTheme || this.currentMusic.theme || this.theme
-      },
-      isFloatMode () {
-        return this.float && !this.isMobile
-      },
-      shouldAutoplay () {
-        if (this.isMobile) return false
-        return this.autoplay
-      },
-
-      // useful
-
-      floatStyleObj () {
-        // transform: translate(floatOffsetLeft, floatOffsetY)
-        return {
-          transform: `translate(${this.floatOffsetLeft}px, ${this.floatOffsetTop}px)`,
-          webkitTransform: `translate(${this.floatOffsetLeft}px, ${this.floatOffsetTop}px)`,
-        }
-      },
-      currentPicStyleObj () {
-        if (this.currentMusic && this.currentMusic.pic) {
-          return {
-            backgroundImage: `url(${this.currentMusic.pic})`,
-          }
-        }
-        return {}
-      },
-      loadProgress () {
-        if (this.playStat.duration === 0) return 0
-        return this.playStat.loadedTime / this.playStat.duration
-      },
-      playProgress () {
-        if (this.playStat.duration === 0) return 0
-        return this.playStat.playedTime / this.playStat.duration
-      },
-      playIndex: {
-        get () {
-          return this.shuffledList.indexOf(this.currentMusic)
-        },
-        set (val) {
-          this.currentMusic = this.shuffledList[val % this.shuffledList.length]
-        },
-      },
-
-      // since 1.4.0
-      // sync muted, volume
-
-      isAudioMuted: {
-        get () {
-          return this.internalMuted
-        },
-        set (val) {
-          this.$emit('update:muted', val)
-          this.internalMuted = val
-        },
-      },
-      audioVolume: {
-        get () {
-          return this.internalVolume
-        },
-        set (val) {
-          this.$emit('update:volume', val)
-          this.internalVolume = val
-        },
-      },
-
-
-      // since 1.5.0
-      // sync shuffle, repeat
-      shouldShuffle: {
-        get () {
-          return this.internalShuffle
-        },
-        set (val) {
-          this.$emit('update:shuffle', val)
-          this.internalShuffle = val
-        },
-      },
-      repeatMode: {
-        get () {
-          switch (this.internalRepeat) {
-            case REPEAT.NONE:
-            case REPEAT.NO_REPEAT:
-              return REPEAT.NO_REPEAT
-            case REPEAT.MUSIC:
-            case REPEAT.REPEAT_ONE:
-              return REPEAT.REPEAT_ONE
-            default:
-              return REPEAT.REPEAT_ALL
-          }
-        },
-        set (val) {
-          this.$emit('update:repeat', val)
-          this.internalRepeat = val
-        },
-      },
-    },
-    methods: {
-      // Float mode
-
-      onDragBegin () {
-        this.floatOriginX = this.floatOffsetLeft
-        this.floatOriginY = this.floatOffsetTop
-      },
-      onDragAround ({ offsetLeft, offsetTop }) {
-        this.floatOffsetLeft = this.floatOriginX + offsetLeft
-        this.floatOffsetTop = this.floatOriginY + offsetTop
-      },
-
-      // functions
-
-      setNextMode () {
-        if (this.repeatMode === REPEAT.REPEAT_ALL) {
-          this.repeatMode = REPEAT.REPEAT_ONE
-        } else if (this.repeatMode === REPEAT.REPEAT_ONE) {
-          this.repeatMode = REPEAT.NO_REPEAT
-        } else {
-          this.repeatMode = REPEAT.REPEAT_ALL
-        }
-      },
-      thenPlay () {
-        this.$nextTick(() => {
-          this.play()
-        })
-      },
-
-      toggle () {
-        if (!this.audio.paused) {
-          this.pause()
-        } else {
-          this.play()
-        }
-      },
-      play () {
-        if (this.mutex) {
-          if (activeMutex && activeMutex !== this) {
-            activeMutex.pause()
-          }
-          activeMutex = this
-        }
-        // handle .play() Promise
-        const audioPlayPromise = this.audio.play()
-        if (audioPlayPromise) {
-          return this.audioPlayPromise = new Promise((resolve, reject) => {
-            // rejectPlayPromise is to force reject audioPlayPromise if it's still pending when pause() is called
-            this.rejectPlayPromise = reject
-            audioPlayPromise.then((res) => {
-              this.rejectPlayPromise = null
-              resolve(res)
-            }).catch(warn)
-          })
-        }
-      },
-      pause () {
-        this.audioPlayPromise
-          .then(() => {
-            this.audio.pause()
-          })
-          // Avoid force rejection throws Uncaught
-          .catch(() => {
-            this.audio.pause()
-          })
-
-        // audioPlayPromise is still pending
-        if (this.rejectPlayPromise) {
-          // force reject playPromise
-          this.rejectPlayPromise()
-          this.rejectPlayPromise = null
-        }
-      },
-      switch(index) {
-        this.playIndex = index
-        this.thenPlay()
-      },
-      // progress bar
-
-      onProgressDragBegin (val) {
-        this.wasPlayingBeforeSeeking = this.isPlaying
-        this.pause()
-        this.isSeeking = true
-
-        // handle load failures
-        if (!isNaN(this.audio.duration)) {
-          this.audio.currentTime = this.audio.duration * val
-        }
-      },
-      onProgressDragging (val) {
-        if (isNaN(this.audio.duration)) {
-          this.playStat.playedTime = 0
-        } else {
-          this.audio.currentTime = this.audio.duration * val
-        }
-      },
-      onProgressDragEnd (val) {
-        this.isSeeking = false
-        if (this.wasPlayingBeforeSeeking) {
-          this.thenPlay()
-        }
-      },
-
-      // volume
-
-      toggleMute () {
-        this.setAudioMuted(!this.audio.muted)
-      },
-      setAudioMuted (val) {
-        this.audio.muted = val
-      },
-      setAudioVolume (val) {
-        this.audio.volume = val
-        if (val > 0) {
-          this.setAudioMuted(false)
-        }
-      },
-
-      // playlist
-
-      getShuffledList () {
-        if (!this.list.length) {
-          return [this.internalMusic]
-        }
-        let unshuffled = [...this.list]
-        if (!this.internalShuffle || unshuffled.length <= 1) {
-          return unshuffled
-        }
-
-        let indexOfCurrentMusic = unshuffled.indexOf(this.internalMusic)
-        if (unshuffled.length === 2 && indexOfCurrentMusic !== -1) {
-          if (indexOfCurrentMusic === 0) {
-            return unshuffled
-          } else {
-            return [this.internalMusic, unshuffled[0]]
-          }
-        }
-        // shuffle list
-        // @see https://stackoverflow.com/questions/6274339/how-can-i-shuffle-an-array
-        for (let i = unshuffled.length - 1; i > 0; i--) {
-          const j = Math.floor(Math.random() * (i + 1))
-          const tmp = unshuffled[i]
-          unshuffled[i] = unshuffled[j]
-          unshuffled[j] = tmp
-        }
-
-        // take currentMusic to first
-        if (indexOfCurrentMusic !== -1) {
-          indexOfCurrentMusic = unshuffled.indexOf(this.internalMusic)
-          if (indexOfCurrentMusic !== 0) {
-            [unshuffled[0], unshuffled[indexOfCurrentMusic]] = [unshuffled[indexOfCurrentMusic], unshuffled[0]]
-          }
-        }
-
-        return unshuffled
-      },
-
-      onSelectSong (song) {
-        if (this.currentMusic === song) {
-          this.toggle()
-        } else {
-          this.currentMusic = song
-          this.thenPlay()
-        }
-      },
-
-      // event handlers
-      // for keeping up with audio states
-
-      onAudioPlay () {
-        this.isPlaying = true
-      },
-      onAudioPause () {
-        this.isPlaying = false
-      },
-      onAudioWaiting () {
-        this.isLoading = true
-      },
-      onAudioCanplay () {
-        this.isLoading = false
-      },
-      onAudioDurationChange () {
-        if (this.audio.duration !== 1) {
-          this.playStat.duration = this.audio.duration
-        }
-      },
-      onAudioProgress () {
-        if (this.audio.buffered.length) {
-          this.playStat.loadedTime = this.audio.buffered.end(this.audio.buffered.length - 1)
-        } else {
-          this.playStat.loadedTime = 0
-        }
-      },
-      onAudioTimeUpdate () {
-        this.playStat.playedTime = this.audio.currentTime
-      },
-      onAudioSeeking () {
-        this.playStat.playedTime = this.audio.currentTime
-      },
-      onAudioSeeked () {
-        this.playStat.playedTime = this.audio.currentTime
-      },
-      onAudioVolumeChange () {
-        this.audioVolume = this.audio.volume
-        this.isAudioMuted = this.audio.muted
-      },
-      onAudioEnded () {
-        // determine next song according to shuffle and repeat
-        if (this.repeatMode === REPEAT.REPEAT_ALL) {
-          if (this.shouldShuffle && this.playIndex === this.shuffledList.length - 1) {
-            this.shuffledList = this.getShuffledList()
-          }
-          this.playIndex++
-          this.thenPlay()
-        } else if (this.repeatMode === REPEAT.REPEAT_ONE) {
-          this.thenPlay()
-        } else {
-          this.playIndex++
-          if (this.playIndex !== 0) {
-            this.thenPlay()
-          } else if (this.shuffledList.length === 1) {
-            this.audio.currentTime = 0
-          }
-        }
-      },
-
-      initAudio () {
-
-        // since 1.4.0 Audio attributes as props
-
-        this.audio.muted = this.muted
-        this.audio.preload = this.preload
-        this.audio.volume = this.volume
-
-
-        // since 1.4.0 Emit as many native audio events
-        // @see https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Media_events
-
-        const mediaEvents = [
-          'abort',
-          'canplay', 'canplaythrough',
-          'durationchange',
-          'emptied', 'encrypted', 'ended', 'error',
-          'interruptbegin', 'interruptend',
-          'loadeddata', 'loadedmetadata', 'loadstart',
-          'mozaudioavailable',
-          'pause', 'play', 'playing', 'progress',
-          'ratechange',
-          'seeked', 'seeking', 'stalled', 'suspend',
-          'timeupdate',
-          'volumechange',
-          'waiting',
-        ]
-        mediaEvents.forEach(event => {
-          this.audio.addEventListener(event, e => this.$emit(event, e))
-        })
-
-
-        // event handlers
-        // they don't emit native media events
-
-        this.audio.addEventListener('play', this.onAudioPlay)
-        this.audio.addEventListener('pause', this.onAudioPause)
-        this.audio.addEventListener('abort', this.onAudioPause)
-        this.audio.addEventListener('waiting', this.onAudioWaiting)
-        this.audio.addEventListener('canplay', this.onAudioCanplay)
-        this.audio.addEventListener('progress', this.onAudioProgress)
-        this.audio.addEventListener('durationchange', this.onAudioDurationChange)
-        this.audio.addEventListener('seeking', this.onAudioSeeking)
-        this.audio.addEventListener('seeked', this.onAudioSeeked)
-        this.audio.addEventListener('timeupdate', this.onAudioTimeUpdate)
-        this.audio.addEventListener('volumechange', this.onAudioVolumeChange)
-        this.audio.addEventListener('ended', this.onAudioEnded)
-
-
-        if (this.currentMusic) {
-          this.audio.src = this.currentMusic.src || this.currentMusic.url
-        }
-      },
-      setSelfAdaptingTheme (color) {
-        this.selfAdaptingTheme = color
-      }
-    },
-    watch: {
-      music (music) {
-        this.internalMusic = music
-      },
-
-      currentMusic: {
-        handler (music) {
-          const src = music.src || music.url
-          // HLS support
-          if (/\.m3u8(?=(#|\?|$))/.test(src)) {
-            if (this.audio.canPlayType('application/x-mpegURL') || this.audio.canPlayType('application/vnd.apple.mpegURL')) {
-              this.audio.src = src
-            } else {
-              if (Hls.isSupported()) {
-                if (!this.hls) {
-                  this.hls = new Hls()
-                }
-                this.hls.loadSource(src)
-                this.hls.attachMedia(this.audio)
-              } else {
-                warn('HLS is not supported on your browser')
-                this.audio.src = src
-              }
-            }
-          } else {
-            this.audio.src = src
-          }
-          // self-adapting theme color
-        },
-      },
-
-      // since 1.4.0
-      // observe muted, preload, volume
-      isAudioMuted (val) {
-        this.audio.muted = val
-      },
-      preload (val) {
-        this.audio.preload = val
-      },
-      audioVolume (val) {
-        this.audio.volume = val
-      },
-
-      // sync muted, volume
-
-      muted (val) {
-        this.internalMuted = val
-      },
-      volume (val) {
-        this.internalVolume = val
-      },
-
-
-      // sync shuffle, repeat
-      shuffle (val) {
-        this.internalShuffle = val
-      },
-      repeat (val) {
-        this.internalRepeat = val
-      },
-    },
-    created () {
-      this.shuffledList = this.getShuffledList()
-    },
-    mounted () {
-      this.initAudio()
-      if (this.autoplay) this.play()
-    },
-    beforeDestroy () {
-      if (activeMutex === this) {
-        activeMutex = null
-      }
-      if (this.hls) {
-        this.hls.destroy()
-      }
-    },
+<script setup lang="ts">
+import { computed, nextTick, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue'
+import type { PropType } from 'vue'
+import Hls from 'hls.js'
+import type { MusicPlayerItem, StatType } from '@/model/api/music'
+import Thumbnail from './components/aplayer-thumbnail.vue'
+import MusicList from './components/aplayer-list.vue'
+import Controls from './components/aplayer-controller.vue'
+import Lyrics from './components/aplayer-lrc.vue'
+import { warn } from './utils'
+
+defineOptions({
+  name: 'APlayer',
+})
+
+interface PlayerMusicItem extends MusicPlayerItem {
+  author?: string
+  theme?: string
+  url?: string
+}
+
+interface DragOffset {
+  offsetLeft: number
+  offsetTop: number
+}
+
+interface PlayerExpose {
+  play: () => Promise<void> | undefined
+  pause: () => void
+  toggle: () => void
+  switch: (index: number) => void
+}
+
+const REPEAT = {
+  NONE: 'none',
+  MUSIC: 'music',
+  LIST: 'list',
+  NO_REPEAT: 'no_repeat',
+  REPEAT_ONE: 'repeat_one',
+  REPEAT_ALL: 'repeat_all',
+} as const
+
+type RepeatValue = typeof REPEAT[keyof typeof REPEAT]
+type NormalizedRepeatValue = typeof REPEAT.NO_REPEAT | typeof REPEAT.REPEAT_ONE | typeof REPEAT.REPEAT_ALL
+
+const MEDIA_EVENTS = [
+  'abort',
+  'canplay', 'canplaythrough',
+  'durationchange',
+  'emptied', 'encrypted', 'ended', 'error',
+  'interruptbegin', 'interruptend',
+  'loadeddata', 'loadedmetadata', 'loadstart',
+  'mozaudioavailable',
+  'pause', 'play', 'playing', 'progress',
+  'ratechange',
+  'seeked', 'seeking', 'stalled', 'suspend',
+  'timeupdate',
+  'volumechange',
+  'waiting',
+] as const
+
+let activeMutex: PlayerExpose | null = null
+
+const props = defineProps({
+  music: {
+    type: Object as PropType<PlayerMusicItem>,
+    required: true,
+    validator: (song: PlayerMusicItem) => Boolean(song?.src),
+  },
+  list: {
+    type: Array as PropType<PlayerMusicItem[]>,
+    default: () => [],
+  },
+  mini: {
+    type: Boolean,
+    default: false,
+  },
+  showLrc: {
+    type: Boolean,
+    default: false,
+  },
+  mutex: {
+    type: Boolean,
+    default: true,
+  },
+  theme: {
+    type: String,
+    default: '#41b883',
+  },
+  listMaxHeight: String,
+  listFolded: {
+    type: Boolean,
+    default: false,
+  },
+  float: {
+    type: Boolean,
+    default: false,
+  },
+  autoplay: {
+    type: Boolean,
+    default: false,
+  },
+  muted: {
+    type: Boolean,
+    default: false,
+  },
+  preload: {
+    type: String as PropType<HTMLMediaElement['preload']>,
+    default: 'none',
+  },
+  volume: {
+    type: Number,
+    default: 0.5,
+    validator: (value: number) => value >= 0 && value <= 1,
+  },
+  shuffle: {
+    type: Boolean,
+    default: false,
+  },
+  repeat: {
+    type: String as PropType<RepeatValue>,
+    default: 'no_repeat',
+  },
+})
+
+const emit = defineEmits<{
+  (event: 'update:music', value: PlayerMusicItem): void
+  (event: 'update:muted', value: boolean): void
+  (event: 'update:volume', value: number): void
+  (event: 'update:shuffle', value: boolean): void
+  (event: 'update:repeat', value: RepeatValue): void
+  (event: string, payload?: Event): void
+}>()
+
+const audio = ref<HTMLAudioElement | null>(null)
+const internalMusic = ref<PlayerMusicItem>(props.music)
+const isPlaying = ref(false)
+const wasPlayingBeforeSeeking = ref(false)
+const isMobile = /mobile/i.test(window.navigator.userAgent)
+const playStat = reactive<StatType>({
+  duration: 0,
+  loadedTime: 0,
+  playedTime: 0,
+})
+const showList = ref(!props.listFolded)
+const audioPlayPromise = ref<Promise<void>>(Promise.resolve())
+const rejectPlayPromise = ref<((reason?: unknown) => void) | null>(null)
+const floatOriginX = ref(0)
+const floatOriginY = ref(0)
+const floatOffsetLeft = ref(0)
+const floatOffsetTop = ref(0)
+const selfAdaptingTheme = ref<string | null>(null)
+const internalMuted = ref(props.muted)
+const internalVolume = ref(props.volume)
+const isLoading = ref(false)
+const internalShuffle = ref(props.shuffle)
+const internalRepeat = ref<RepeatValue>(props.repeat)
+const shuffledList = ref<PlayerMusicItem[]>([])
+const hls = ref<Hls | null>(null)
+
+const currentMusic = computed({
+  get: () => internalMusic.value,
+  set: (value: PlayerMusicItem) => {
+    emit('update:music', value)
+    internalMusic.value = value
+  },
+})
+
+const currentTheme = computed(() => selfAdaptingTheme.value || currentMusic.value.theme || props.theme)
+const isFloatMode = computed(() => props.float && !isMobile)
+const floatStyleObj = computed(() => {
+  return {
+    transform: `translate(${floatOffsetLeft.value}px, ${floatOffsetTop.value}px)`,
+    webkitTransform: `translate(${floatOffsetLeft.value}px, ${floatOffsetTop.value}px)`,
+  }
+})
+
+const playIndex = computed({
+  get: () => shuffledList.value.indexOf(currentMusic.value),
+  set: (value: number) => {
+    if (!shuffledList.value.length) return
+    const normalizedIndex = value % shuffledList.value.length
+    currentMusic.value = shuffledList.value[normalizedIndex < 0 ? normalizedIndex + shuffledList.value.length : normalizedIndex]
+  },
+})
+
+const isAudioMuted = computed({
+  get: () => internalMuted.value,
+  set: (value: boolean) => {
+    emit('update:muted', value)
+    internalMuted.value = value
+  },
+})
+
+const audioVolume = computed({
+  get: () => internalVolume.value,
+  set: (value: number) => {
+    emit('update:volume', value)
+    internalVolume.value = value
+  },
+})
+
+const shouldShuffle = computed({
+  get: () => internalShuffle.value,
+  set: (value: boolean) => {
+    emit('update:shuffle', value)
+    internalShuffle.value = value
+  },
+})
+
+const repeatMode = computed<NormalizedRepeatValue>({
+  get: () => {
+    switch (internalRepeat.value) {
+      case REPEAT.NONE:
+      case REPEAT.NO_REPEAT:
+        return REPEAT.NO_REPEAT
+      case REPEAT.MUSIC:
+      case REPEAT.REPEAT_ONE:
+        return REPEAT.REPEAT_ONE
+      default:
+        return REPEAT.REPEAT_ALL
+    }
+  },
+  set: (value) => {
+    emit('update:repeat', value)
+    internalRepeat.value = value
+  },
+})
+
+function onDragBegin() {
+  floatOriginX.value = floatOffsetLeft.value
+  floatOriginY.value = floatOffsetTop.value
+}
+
+function onDragAround({ offsetLeft, offsetTop }: DragOffset) {
+  floatOffsetLeft.value = floatOriginX.value + offsetLeft
+  floatOffsetTop.value = floatOriginY.value + offsetTop
+}
+
+function setNextMode() {
+  if (repeatMode.value === REPEAT.REPEAT_ALL) {
+    repeatMode.value = REPEAT.REPEAT_ONE
+  } else if (repeatMode.value === REPEAT.REPEAT_ONE) {
+    repeatMode.value = REPEAT.NO_REPEAT
+  } else {
+    repeatMode.value = REPEAT.REPEAT_ALL
+  }
+}
+
+function thenPlay() {
+  nextTick(() => {
+    void play()
+  })
+}
+
+function toggle() {
+  const media = audio.value
+  if (!media) return
+
+  if (!media.paused) {
+    pause()
+  } else {
+    void play()
+  }
+}
+
+function play() {
+  const media = audio.value
+  if (!media) return
+
+  if (props.mutex) {
+    if (activeMutex && activeMutex !== playerExpose) {
+      activeMutex.pause()
+    }
+    activeMutex = playerExpose
   }
 
-  export default VueAPlayer
+  const mediaPlayPromise = media.play()
+  if (mediaPlayPromise) {
+    audioPlayPromise.value = new Promise<void>((resolve, reject) => {
+      rejectPlayPromise.value = reject
+      mediaPlayPromise.then(() => {
+        rejectPlayPromise.value = null
+        resolve()
+      }).catch((error) => {
+        warn(String(error))
+      })
+    })
+    return audioPlayPromise.value
+  }
+}
 
+function pause() {
+  const media = audio.value
+  if (!media) return
+
+  audioPlayPromise.value
+    .then(() => {
+      media.pause()
+    })
+    .catch(() => {
+      media.pause()
+    })
+
+  if (rejectPlayPromise.value) {
+    rejectPlayPromise.value()
+    rejectPlayPromise.value = null
+  }
+}
+
+function switchTrack(index: number) {
+  playIndex.value = index
+  thenPlay()
+}
+
+function onProgressDragBegin(value: number) {
+  const media = audio.value
+  if (!media) return
+
+  wasPlayingBeforeSeeking.value = isPlaying.value
+  pause()
+
+  if (!isNaN(media.duration)) {
+    media.currentTime = media.duration * value
+  }
+}
+
+function onProgressDragging(value: number) {
+  const media = audio.value
+  if (!media) return
+
+  if (isNaN(media.duration)) {
+    playStat.playedTime = 0
+  } else {
+    media.currentTime = media.duration * value
+  }
+}
+
+function onProgressDragEnd() {
+  if (wasPlayingBeforeSeeking.value) {
+    thenPlay()
+  }
+}
+
+function toggleMute() {
+  const media = audio.value
+  if (!media) return
+
+  setAudioMuted(!media.muted)
+}
+
+function setAudioMuted(value: boolean) {
+  const media = audio.value
+  if (!media) return
+
+  media.muted = value
+}
+
+function setAudioVolume(value: number) {
+  const media = audio.value
+  if (!media) return
+
+  media.volume = value
+  if (value > 0) {
+    setAudioMuted(false)
+  }
+}
+
+function getShuffledList() {
+  if (!props.list.length) {
+    return [internalMusic.value]
+  }
+
+  const unshuffled = [...props.list]
+  if (!internalShuffle.value || unshuffled.length <= 1) {
+    return unshuffled
+  }
+
+  let indexOfCurrentMusic = unshuffled.indexOf(internalMusic.value)
+  if (unshuffled.length === 2 && indexOfCurrentMusic !== -1) {
+    if (indexOfCurrentMusic === 0) {
+      return unshuffled
+    }
+    return [internalMusic.value, unshuffled[0]]
+  }
+
+  for (let index = unshuffled.length - 1; index > 0; index--) {
+    const randomIndex = Math.floor(Math.random() * (index + 1))
+    const tmp = unshuffled[index]
+    unshuffled[index] = unshuffled[randomIndex]
+    unshuffled[randomIndex] = tmp
+  }
+
+  if (indexOfCurrentMusic !== -1) {
+    indexOfCurrentMusic = unshuffled.indexOf(internalMusic.value)
+    if (indexOfCurrentMusic !== 0) {
+      [unshuffled[0], unshuffled[indexOfCurrentMusic]] = [unshuffled[indexOfCurrentMusic], unshuffled[0]]
+    }
+  }
+
+  return unshuffled
+}
+
+function onSelectSong(song: PlayerMusicItem) {
+  if (currentMusic.value === song) {
+    toggle()
+  } else {
+    currentMusic.value = song
+    thenPlay()
+  }
+}
+
+function onAudioPlay() {
+  isPlaying.value = true
+}
+
+function onAudioPause() {
+  isPlaying.value = false
+}
+
+function onAudioWaiting() {
+  isLoading.value = true
+}
+
+function onAudioCanplay() {
+  isLoading.value = false
+}
+
+function onAudioDurationChange() {
+  const media = audio.value
+  if (!media) return
+
+  if (media.duration !== 1) {
+    playStat.duration = media.duration
+  }
+}
+
+function onAudioProgress() {
+  const media = audio.value
+  if (!media) return
+
+  if (media.buffered.length) {
+    playStat.loadedTime = media.buffered.end(media.buffered.length - 1)
+  } else {
+    playStat.loadedTime = 0
+  }
+}
+
+function onAudioTimeUpdate() {
+  if (!audio.value) return
+  playStat.playedTime = audio.value.currentTime
+}
+
+function onAudioSeeking() {
+  if (!audio.value) return
+  playStat.playedTime = audio.value.currentTime
+}
+
+function onAudioSeeked() {
+  if (!audio.value) return
+  playStat.playedTime = audio.value.currentTime
+}
+
+function onAudioVolumeChange() {
+  const media = audio.value
+  if (!media) return
+
+  audioVolume.value = media.volume
+  isAudioMuted.value = media.muted
+}
+
+function onAudioEnded() {
+  const media = audio.value
+
+  if (repeatMode.value === REPEAT.REPEAT_ALL) {
+    if (shouldShuffle.value && playIndex.value === shuffledList.value.length - 1) {
+      shuffledList.value = getShuffledList()
+    }
+    playIndex.value += 1
+    thenPlay()
+  } else if (repeatMode.value === REPEAT.REPEAT_ONE) {
+    thenPlay()
+  } else {
+    playIndex.value += 1
+    if (playIndex.value !== 0) {
+      thenPlay()
+    } else if (shuffledList.value.length === 1 && media) {
+      media.currentTime = 0
+    }
+  }
+}
+
+function initAudio() {
+  const media = audio.value
+  if (!media) return
+
+  media.muted = props.muted
+  media.preload = props.preload
+  media.volume = props.volume
+
+  MEDIA_EVENTS.forEach((eventName) => {
+    media.addEventListener(eventName, (event) => emit(eventName, event))
+  })
+
+  media.addEventListener('play', onAudioPlay)
+  media.addEventListener('pause', onAudioPause)
+  media.addEventListener('abort', onAudioPause)
+  media.addEventListener('waiting', onAudioWaiting)
+  media.addEventListener('canplay', onAudioCanplay)
+  media.addEventListener('progress', onAudioProgress)
+  media.addEventListener('durationchange', onAudioDurationChange)
+  media.addEventListener('seeking', onAudioSeeking)
+  media.addEventListener('seeked', onAudioSeeked)
+  media.addEventListener('timeupdate', onAudioTimeUpdate)
+  media.addEventListener('volumechange', onAudioVolumeChange)
+  media.addEventListener('ended', onAudioEnded)
+
+  media.src = currentMusic.value.src || currentMusic.value.url || ''
+}
+
+function setSelfAdaptingTheme(color: string | null) {
+  selfAdaptingTheme.value = color
+}
+
+watch(() => props.music, (music) => {
+  internalMusic.value = music
+})
+
+watch(currentMusic, (music) => {
+  const media = audio.value
+  const src = music.src || music.url
+  if (!media || !src) return
+
+  if (/\.m3u8(?=(#|\?|$))/.test(src)) {
+    if (media.canPlayType('application/x-mpegURL') || media.canPlayType('application/vnd.apple.mpegURL')) {
+      media.src = src
+    } else if (Hls.isSupported()) {
+      if (!hls.value) {
+        hls.value = new Hls()
+      }
+      hls.value.loadSource(src)
+      hls.value.attachMedia(media)
+    } else {
+      warn('HLS is not supported on your browser')
+      media.src = src
+    }
+  } else {
+    media.src = src
+  }
+})
+
+watch(isAudioMuted, (value) => {
+  if (!audio.value) return
+  audio.value.muted = value
+})
+
+watch(() => props.preload, (value) => {
+  if (!audio.value) return
+  audio.value.preload = value
+})
+
+watch(audioVolume, (value) => {
+  if (!audio.value) return
+  audio.value.volume = value
+})
+
+watch(() => props.muted, (value) => {
+  internalMuted.value = value
+})
+
+watch(() => props.volume, (value) => {
+  internalVolume.value = value
+})
+
+watch(() => props.shuffle, (value) => {
+  internalShuffle.value = value
+})
+
+watch(() => props.repeat, (value) => {
+  internalRepeat.value = value
+})
+
+shuffledList.value = getShuffledList()
+
+onMounted(() => {
+  initAudio()
+  if (props.autoplay) {
+    void play()
+  }
+})
+
+const playerExpose: PlayerExpose = {
+  play,
+  pause,
+  toggle,
+  switch: switchTrack,
+}
+
+defineExpose({
+  audio,
+  currentMusic,
+  isPlaying,
+  playStat,
+  ...playerExpose,
+})
+
+onBeforeUnmount(() => {
+  if (activeMutex === playerExpose) {
+    activeMutex = null
+  }
+  hls.value?.destroy()
+})
 </script>
 
 <style lang="less" scoped>