src/model/api/music.ts

@@ -34,7 +34,6 @@ export interface MusicPlayerItem {
   src: string
   pic: string
   lrc?: string
-  lyricId?: string
 }
 
 export interface StatType {

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 && currentMusic" ref="player" autoplay showLrc :list="musicList" v-model:music="currentMusic" @play="musicPlay"/>
+    <a-player v-if="musicPlaying" ref="player" autoplay showLrc :list="musicList" v-model:music="currentMusic" @play="musicPlay"/>
   </el-drawer>
 </div>
 </template>
 
 <script setup lang="ts">
-import { ref, watch } from 'vue'
+import { ref } 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<InstanceType<typeof APlayer>>()
+const player = ref<any>()
 const lyricLoading = ref(false)
 const libDrawerVisible = ref(false)
 const libTableData = ref<(MusicLibModel & { _isNew?: boolean })[]>([])
@@ -245,13 +245,6 @@ 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})
@@ -280,7 +273,9 @@ async function playMusic() {
         album: item.album,
         src: `${apiBase}/common/music/load/${item._id}`,
         pic: `${apiBase}/common/music/album/${item._id}`,
-        lyricId: item.lyricId,
+      }
+      if (item.lyricId) {
+        musicItem.lrc = `${apiBase}/common/music/lyric/${item.lyricId}`
       }
       return musicItem
     })
@@ -378,23 +373,23 @@ function musicPlay() {
     artwork: [{src: location.origin + currentMusic.value.pic}]
   })
   navigator.mediaSession.setActionHandler('play', () => {
-    void player.value?.play()
+    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)
     }
   })
 }

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', 'togglemute'])
+const emit = defineEmits(['setvolume'])
 const barHeight = 40
 
 const volumeIcon = computed(() => {

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,7 +60,6 @@ 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

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,7 +34,6 @@ const props = defineProps<{
   theme?: string
   listMaxHeight?: string
 }>()
-const emit = defineEmits(['selectsong'])
 const listHeightStyle = computed(() => {
   return {
     height: `${33 * props.musicList.length - 1}px`,

src/views/api/aplayer/components/aplayer-lrc.vue

@@ -25,9 +25,10 @@ const props = defineProps<{
   playStat: StatType
 }>()
 
+const displayLrc = ref('')
 const currentLineIndex = ref(0)
 
-const lrcLines = computed(() => parseLrc(props.lrcSource))
+const lrcLines = computed(() => parseLrc(displayLrc.value))
 
 const transformStyle = computed(() => {
   return {
@@ -36,6 +37,17 @@ 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]