🦄 refactor(lrc): 重构歌词展示逻辑 优化样式

src/hooks/MusicHook.ts

@@ -0,0 +1,104 @@
+import { getMusicLrc } from '@/api/music'
+import { ILyric } from '@/type/lyric'
+import { ref } from 'vue'
+
+interface ILrcData {
+  text: string
+  trText: string
+}
+
+const lrcData = ref<ILyric>()
+const newLrcIndex = ref<number>(0)
+const lrcArray = ref<Array<ILrcData>>([])
+const lrcTimeArray = ref<Array<Number>>([])
+
+const parseTime = (timeString: string) => {
+  const [minutes, seconds] = timeString.split(':')
+  return parseInt(minutes) * 60 + parseFloat(seconds)
+}
+
+const TIME_REGEX = /(\d{2}:\d{2}(\.\d*)?)/g
+const LRC_REGEX = /(\[(\d{2}):(\d{2})(\.(\d*))?\])/g
+
+function parseLyricLine(lyricLine: string) {
+  // [00:00.00] 作词 : 长友美知惠/
+  const timeText = lyricLine.match(TIME_REGEX)?.[0] || ''
+  const time = parseTime(timeText)
+  const text = lyricLine.replace(LRC_REGEX, '').trim()
+  return { time, text }
+}
+
+interface ILyricText {
+  text: string
+  trText: string
+}
+
+function parseLyrics(lyricsString: string) {
+  const lines = lyricsString.split('\n')
+  const lyrics: Array<ILyricText> = []
+  const times: number[] = []
+  lines.forEach((line) => {
+    const { time, text } = parseLyricLine(line)
+    times.push(time)
+    lyrics.push({ text, trText: '' })
+  })
+  return { lyrics, times }
+}
+
+const loadLrc = async (playMusicId: number): Promise<void> => {
+  try {
+    const { data } = await getMusicLrc(playMusicId)
+    const { lyrics, times } = parseLyrics(data.lrc.lyric)
+    lrcTimeArray.value = times
+    lrcArray.value = lyrics
+  } catch (err) {
+    console.error('err', err)
+  }
+}
+
+// 歌词矫正时间Correction time
+const correctionTime = ref(0)
+
+// 增加矫正时间
+const addCorrectionTime = (time: number) => {
+  correctionTime.value += time
+}
+
+// 减少矫正时间
+const reduceCorrectionTime = (time: number) => {
+  correctionTime.value -= time
+}
+
+const isCurrentLrc = (index: any, time: number) => {
+  const currentTime = Number(lrcTimeArray.value[index])
+  const nextTime = Number(lrcTimeArray.value[index + 1])
+  const nowTime = time + correctionTime.value
+  const isTrue = nowTime > currentTime && nowTime < nextTime
+  if (isTrue) {
+    newLrcIndex.value = index
+  }
+  return isTrue
+}
+
+const nowTime = ref(0)
+const allTime = ref(0)
+
+// 设置当前播放时间
+const setAudioTime = (index: any, audio: HTMLAudioElement) => {
+  audio.currentTime = lrcTimeArray.value[index] as number
+  audio.play()
+}
+
+export {
+  lrcData,
+  lrcArray,
+  lrcTimeArray,
+  newLrcIndex,
+  loadLrc,
+  isCurrentLrc,
+  addCorrectionTime,
+  reduceCorrectionTime,
+  setAudioTime,
+  nowTime,
+  allTime,
+}

src/index.css

@@ -5,10 +5,7 @@
 @tailwind components;
 @tailwind utilities;
 
-img{
-  @apply bg-gray-900;
-}
-
 .n-image img {
+  @apply bg-gray-900;
   width: 100%;
 }

src/layout/components/MusicFull.vue

@@ -1,188 +1,152 @@
-
 <template>
-  <div id="drawer-target" v-show="isFull" :style="{backgroundImage:`url(${getImgUrl( playMusic?.picUrl, '300y300')})`}">
+   <n-drawer :show="musicFull" height="100vh" placement="bottom" drawer-class="music-drawer">
-    <div class="music-img">
+    <div id="drawer-target">
-      <n-image
+      <div class="music-img">
-        :src="getImgUrl( playMusic?.picUrl, '300y300')"
+        <n-image
-        class="img" 
+          :src="getImgUrl(playMusic?.picUrl, '300y300')"
-        lazy
+          class="img"
-        preview-disabled
+          lazy
-      />
+          preview-disabled
-    </div>
+        />
-    <div class="music-content">
+      </div>
-      <div class="music-content-name">{{ playMusic?.song.name }}</div>
+      <div class="music-content">
-      <div class="music-content-singer">
+        <div class="music-content-name">{{ playMusic.song.name }}</div>
-        <span
+        <div class="music-content-singer">
-          v-for="(item,index) in playMusic?.song.artists"
+          <span v-for="(item, index) in playMusic.song.artists" :key="index">
-          :key="index"
+            {{ item.name
-        >{{ item.name }}{{ index < playMusic?.song.artists.length - 1 ? ' / ' : '' }}</span>
+            }}{{ index < playMusic.song.artists.length - 1 ? ' / ' : '' }}
+          </span>
+        </div>
+        <n-layout
+          class="music-lrc"
+          style="height: 550px"
+          ref="lrcSider"
+          :native-scrollbar="false"
+          @mouseover="mouseOverLayout"
+          @mouseleave="mouseLeaveLayout"
+        >
+          <template v-for="(item, index) in lrcArray" :key="index">
+            <div
+              class="music-lrc-text"
+              :class="{ 'now-text': isCurrentLrc(index, nowTime) }"
+              @click="setAudioTime(index,audio)"
+            >
+              {{ item.text }}
+            </div>
+          </template>
+        </n-layout>
+        <!-- 时间矫正 -->
+        <div class="music-content-time"></div>
+        <n-button @click="reduceCorrectionTime(0.2)">-0.2</n-button>
+        <n-button @click="addCorrectionTime(0.2)">+0.2</n-button>
       </div>
-      <n-layout
-        class="music-lrc"
-        style="height: 550px;"
-        ref="lrcSider"
-        :native-scrollbar="false"
-        @mouseover="mouseOverLayout"
-        @mouseleave="mouseLeaveLayout"
-      >
-        <template v-for="(item,index) in lrcArray" :key="index">
-          <div
-            class="music-lrc-text"
-            :class="{ 'now-text': isCurrentLrc(index) }"
-            @click="setAudioTime(index)"
-          >{{ item.text }}</div>
-        </template>
-      </n-layout>
     </div>
-  </div>
+   </n-drawer>
 </template>
-<script lang="ts" setup>
-import { computed, ref } from 'vue'
-import type { SongResult } from "@/type/music";
-import type { ILyric } from "@/type/lyric";
-import { getMusicLrc } from "@/api/music"
-import { useStore } from 'vuex';
-import { getImgUrl } from '@/utils'
 
-const store = useStore();
+<script setup lang="ts">
+import type { SongResult } from '@/type/music'
+import { getImgUrl } from '@/utils'
+import { computed, ref } from 'vue'
+import { useStore } from 'vuex'
+import {
+  lrcArray,
+  newLrcIndex,
+  isCurrentLrc,
+  addCorrectionTime,
+  reduceCorrectionTime,
+  setAudioTime,
+  nowTime,
+  allTime,
+} from '@/hooks/MusicHook'
+
+const store = useStore()
+
 const props = defineProps({
-  isFull: {
+  musicFull: {
-    type: Boolean
+    type: Boolean,
+    default: false,
   },
   audio: {
-    type: Object,
+    type: HTMLAudioElement,
-    default: {}
+    default: null,
-  }
+  },
 })
 
+const emit = defineEmits(['update:musicFull'])
 
+
+// 播放的音乐信息
 const playMusic = computed(() => store.state.playMusic as SongResult)
-
-
-const lrcData = ref<ILyric>()
-
-interface ILrcData {
-  text: string;
-  trText: string;
-}
-const lrcArray = ref<Array<ILrcData>>()
-const lrcTimeArray = ref<Array<Number>>([])
-// 加载歌词
-const loadLrc = async () => {
-  const { data } = await getMusicLrc(playMusic.value.id)
-  lrcData.value = data
-
-  try {
-
-    let musicText = data.lrc.lyric
-    //歌词时间
-    let timeArray = musicText.match(/(\d{2}):(\d{2})(\.(\d*))?/g)
-    let timeArrayNum: Array<Number> = []
-    timeArray?.forEach(function (item, index) {
-      if (item.length < 9) {
-        item = item + "0"
-      }
-      timeArrayNum.push(parseInt(item.split(':')[0]) * 60 + parseFloat(item.split(':')[1]));
-    })
-    lrcTimeArray.value = timeArrayNum
-    //歌词
-    let musicTextArray = musicText.replace(/(\[(\d{2}):(\d{2})(\.(\d*))?\])/g, '').split('\n')
-    let text = []
-
-    try {
-      let trMusicText = data.tlyric.lyric
-      let trMusicTextArray = trMusicText.replace(/(\[(\d{2}):(\d{2})(\.(\d*))?\])/g, '').split('\n')
-      for (let i = 0; i < musicTextArray.length - 1; i++) {
-        text.push({
-          text: musicTextArray[i],
-          trText: trMusicTextArray[i]
-        })
-      }
-      lrcArray.value = text
-
-    } catch (err) {
-      text = []
-    }
-  } catch (err) {
-    console.log(err)
-  }
-}
-
-
-const newLrcIndex = ref(0)
-const isMouse = ref(false)
 // 获取歌词滚动dom
 const lrcSider = ref<any>(null)
+const isMouse = ref(false)
 // 歌词滚动方法
 const lrcScroll = () => {
-  if (props.isFull && !isMouse.value) {
+  if (props.musicFull && !isMouse.value) {
-    let top = newLrcIndex.value * 50 - 225;
+    let top = newLrcIndex.value * 50 - 225
     lrcSider.value.scrollTo({ top: top, behavior: 'smooth' })
   }
 }
-
-const nowTime = ref(0)
-const allTime = ref(0)
-// 计算属性  获取当前播放时间的进度
-const timeSlider = computed({
-  get: () => nowTime.value / allTime.value * 100,
-  set: (value) => {
-    props.audio.value.currentTime = value * allTime.value / 100
-    props.audio.value.play()
-    store.commit("setPlayMusic", true);
-  }
-})
-
-// 是否是当前正在播放的歌词
-const isCurrentLrc = (index: any) => {
-  let isTrue = !(nowTime.value <= lrcTimeArray.value[index] || nowTime.value >= lrcTimeArray.value[index + 1])
-  if (isTrue) {
-    newLrcIndex.value = index
-  }
-  return isTrue
-}
-
-
 const mouseOverLayout = () => {
   isMouse.value = true
 }
 const mouseLeaveLayout = () => {
   setTimeout(() => {
     isMouse.value = false
-  }, 3000);
+  }, 3000)
 }
+
+defineExpose({
+  lrcScroll
+})
+
+
 </script>
 
-<style lang="scss" scoped>
+<style scoped lang="scss">
+.music-drawer {
+  @apply bg-transparent;
+  box-shadow: none;
+}
 #drawer-target {
   @apply top-0 left-0 absolute w-full h-full overflow-hidden rounded px-24 pt-24 pb-48 flex items-center;
-  // background-color: #333333;
+  backdrop-filter: blur(20px);
-  backdrop-filter: saturate(180%) blur(20px);
+  background-color: rgba(0, 0, 0, 0.747);
   animation-duration: 300ms;
+
   .music-img {
-    @apply flex-1;
+    @apply flex-1 flex justify-center mr-24;
+
     .img {
+      width: 450px;
+      height: 450px;
       @apply rounded-xl;
     }
   }
 
   .music-content {
     @apply flex flex-col justify-center items-center;
+
     &-name {
       @apply font-bold text-3xl py-2;
     }
+
     &-singer {
       @apply text-base py-2;
     }
   }
+
   .music-lrc {
-    background-color: #333333;
+    background-color: inherit;
     width: 800px;
     height: 550px;
+
     &-text {
       @apply text-white text-lg flex justify-center items-center cursor-pointer;
       height: 50px;
       transition: all 0.2s ease-out;
+
       &:hover {
         @apply font-bold text-xl text-red-500;
       }

src/layout/components/PlayBar.vue

@@ -1,41 +1,10 @@
 <template>
   <!-- 展开全屏 -->
-  <transition name="musicPage">
+  <music-full ref="MusicFullRef" v-model:musicFull="musicFull" :audio="(audio as HTMLAudioElement)" />
-      <div id="drawer-target" v-show="musicFull">
-      <div class="music-img">
-        <n-image :src="getImgUrl( playMusic?.picUrl, '300y300')" class="img" lazy preview-disabled />
-      </div>
-      <div class="music-content">
-        <div class="music-content-name">{{ playMusic.song.name }}</div>
-        <div class="music-content-singer">
-          <span v-for="(item, index) in playMusic.song.artists" :key="index">
-            {{ item.name
-            }}{{ index < playMusic.song.artists.length - 1 ? ' / ' : '' }}
-          </span>
-        </div>
-        <n-layout
-          class="music-lrc"
-          style="height: 550px"
-          ref="lrcSider"
-          :native-scrollbar="false"
-          @mouseover="mouseOverLayout"
-          @mouseleave="mouseLeaveLayout"
-        >
-          <template v-for="(item, index) in lrcArray" :key="index">
-            <div
-              class="music-lrc-text"
-              :class="{ 'now-text': isCurrentLrc(index) }"
-              @click="setAudioTime(index)"
-            >{{ item.text }}</div>
-          </template>
-        </n-layout>
-      </div>
-    </div>
-  </transition>
   <!-- 底部播放栏 -->
   <div class="music-play-bar" :class="setAnimationClass('animate__bounceInUp')">
     <n-image
-      :src="getImgUrl( playMusic?.picUrl, '300y300')"
+      :src="getImgUrl(playMusic?.picUrl, '300y300')"
       class="play-bar-img"
       lazy
       preview-disabled
@@ -44,9 +13,7 @@
     <div class="music-content">
       <div class="music-content-title">
         <n-ellipsis class="text-ellipsis" line-clamp="1">
-          {{
+          {{ playMusic.name }}
-          playMusic.name
-          }}
         </n-ellipsis>
       </div>
       <div class="music-content-name">
@@ -71,14 +38,22 @@
     </div>
     <div class="music-time">
       <div class="time">{{ getNowTime }}</div>
-      <n-slider v-model:value="timeSlider" :step="0.05" :tooltip="false"></n-slider>
+      <n-slider
+        v-model:value="timeSlider"
+        :step="0.05"
+        :tooltip="false"
+      ></n-slider>
       <div class="time">{{ getAllTime }}</div>
     </div>
     <div class="audio-volume">
       <div>
         <i class="iconfont icon-notificationfill"></i>
       </div>
-      <n-slider v-model:value="volumeSlider" :step="0.01" :tooltip="false"></n-slider>
+      <n-slider
+        v-model:value="volumeSlider"
+        :step="0.01"
+        :tooltip="false"
+      ></n-slider>
     </div>
     <div class="audio-button">
       <n-tooltip trigger="hover">
@@ -106,40 +81,43 @@
 </template>
 
 <script lang="ts" setup>
-import type { SongResult } from "@/type/music";
+import type { SongResult } from '@/type/music'
-import type { ILyric } from "@/type/lyric";
+import { secondToMinute, getImgUrl } from '@/utils'
-import { secondToMinute, getImgUrl } from "@/utils";
+import { computed, onMounted, ref, watch } from 'vue'
-import { computed, nextTick, onMounted, ref, watch } from "vue";
+import { useStore } from 'vuex'
-import { useStore } from "vuex";
+import { setAnimationClass } from '@/utils'
-import { setAnimationClass } from "@/utils";
+import { getParsingMusicUrl } from '@/api/music'
-import { getMusicLrc, getParsingMusicUrl } from "@/api/music";
+import {
-import axios from "axios";
+  loadLrc,
+  nowTime,
+  allTime,
+} from '@/hooks/MusicHook'
+import MusicFull from './MusicFull.vue'
 
-const store = useStore();
+const store = useStore()
-const audio = ref<any>(null);
 
 // 播放的音乐信息
-const playMusic = computed(() => store.state.playMusic as SongResult);
+const playMusic = computed(() => store.state.playMusic as SongResult)
 // 是否播放
-const play = computed(() => store.state.play as boolean);
+const play = computed(() => store.state.play as boolean)
 // 播放链接
 const ProxyUrl =
-  import.meta.env.VITE_API_PROXY + "" || "http://110.42.251.190:9856";
+  import.meta.env.VITE_API_PROXY + '' || 'http://110.42.251.190:9856'
-const playMusicUrl = ref("");
+const playMusicUrl = ref('')
 watch(
   () => store.state.playMusicUrl,
   async (value, oldValue) => {
-    const isUrlHasMc = location.href.includes("mc.");
+    const isUrlHasMc = location.href.includes('mc.')
     if (value && isUrlHasMc) {
-      let playMusicUrl1 = value as string;
+      let playMusicUrl1 = value as string
       if (!ProxyUrl) {
-        playMusicUrl.value = playMusicUrl1;
+        playMusicUrl.value = playMusicUrl1
-        return;
+        return
       }
-      const url = new URL(playMusicUrl1);
+      const url = new URL(playMusicUrl1)
-      const pathname = url.pathname;
+      const pathname = url.pathname
-      const subdomain = url.origin.split(".")[0].split("//")[1];
+      const subdomain = url.origin.split('.')[0].split('//')[1]
-      playMusicUrl1 = `${ProxyUrl}/mc?m=${subdomain}&url=${pathname}`;
+      playMusicUrl1 = `${ProxyUrl}/mc?m=${subdomain}&url=${pathname}`
       // console.log('playMusicUrl1', playMusicUrl1)
       // // 获取音频文件
       // const { data } = await axios.get(playMusicUrl1, {
@@ -148,238 +126,163 @@ watch(
       // const musicUrl = URL.createObjectURL(data)
       // console.log('musicUrl', musicUrl)
       // playMusicUrl.value = musicUrl
-      playMusicUrl.value = playMusicUrl1;
+      playMusicUrl.value = playMusicUrl1
-      console.log("playMusicUrl1", playMusicUrl1);
+      console.log('playMusicUrl1', playMusicUrl1)
       setTimeout(() => {
-        onAudio(audio.value);
+        onAudio()
-        store.commit("setPlayMusic", true);
+        store.commit('setPlayMusic', true)
-      }, 100);
+      }, 100)
     } else {
-      playMusicUrl.value = value;
+      playMusicUrl.value = value
     }
+    loadLrc(playMusic.value.id)
   },
   { immediate: true }
-);
+)
 // 获取音乐播放Dom
 
+
+
 onMounted(() => {
   // 监听音乐是否播放
   watch(
     () => play.value,
     (value, oldValue) => {
-      if (value) {
+      if (value && audio.value) {
-        audio.value.play();
+        audioPlay()
-        onAudio(audio.value);
+        onAudio()
       } else {
-        audio.value.pause();
+        audioPause()
       }
     }
-  );
+  )
 
   watch(
     () => playMusicUrl.value,
     (value, oldValue) => {
       if (!value) {
-        parsingMusic();
+        parsingMusic()
       }
     }
-  );
+  )
 
   // 抬起键盘按钮监听
   document.onkeyup = (e) => {
     switch (e.code) {
-      case "Space":
+      case 'Space':
-        playMusicEvent();
+        playMusicEvent()
     }
-  };
+  }
 
   // 按下键盘按钮监听
   document.onkeydown = (e) => {
     switch (e.code) {
-      case "Space":
+      case 'Space':
-        return false;
+        return false
     }
-  };
+  }
-});
+})
+
+const audio = ref<HTMLAudioElement | null>(null)
+
+
+const audioPlay = () => {
+  if (audio.value) {
+    audio.value.play()
+  }
+}
+
+const audioPause = () => {
+  if (audio.value) {
+    audio.value.pause()
+  }
+}
 
-const randomPercent = () => {
-  const percent = Math.floor(Math.random() * 201) - 100;
-  return ` ${percent}%`;
-};
 
-const nowTime = ref(0);
-const allTime = ref(0);
 // 计算属性  获取当前播放时间的进度
 const timeSlider = computed({
   get: () => (nowTime.value / allTime.value) * 100,
   set: (value) => {
-    audio.value.currentTime = (value * allTime.value) / 100;
+    if (!audio.value) return
-    audio.value.play();
+    audio.value.currentTime = (value * allTime.value) / 100
-    store.commit("setPlayMusic", true);
+    audioPlay()
+    store.commit('setPlayMusic', true)
   },
-});
+})
 
 // 音量条
-const audioVolume = ref(1);
+const audioVolume = ref(1)
 const volumeSlider = computed({
   get: () => audioVolume.value * 100,
   set: (value) => {
-    audio.value.volume = value / 100;
+    if(!audio.value) return
+    audio.value.volume = value / 100
   },
-});
+})
 // 获取当前播放时间
 const getNowTime = computed(() => {
-  return secondToMinute(nowTime.value);
+  return secondToMinute(nowTime.value)
-});
+})
 
 // 获取总时间
 const getAllTime = computed(() => {
-  return secondToMinute(allTime.value);
+  return secondToMinute(allTime.value)
-});
+})
-
-// 获取歌词滚动dom
-const lrcSider = ref<any>(null);
-// 当前播放的是哪一句歌词
-const newLrcIndex = ref(0);
-const isMouse = ref(false);
-// 歌词滚动方法
-const lrcScroll = () => {
-  if (musicFull.value && !isMouse.value) {
-    let top = newLrcIndex.value * 50 - 225;
-    lrcSider.value.scrollTo({ top: top, behavior: "smooth" });
-  }
-};
-const mouseOverLayout = () => {
-  isMouse.value = true;
-};
-const mouseLeaveLayout = () => {
-  setTimeout(() => {
-    isMouse.value = false;
-  }, 3000);
-};
 
 // 监听音乐播放 获取时间
-const onAudio = (audio: HTMLAudioElement) => {
+const onAudio = () => {
-  audio.removeEventListener("timeupdate", handleGetAudioTime);
+  if(audio.value){
-  audio.removeEventListener("ended", handleEnded);
+    audio.value.removeEventListener('timeupdate', handleGetAudioTime)
-  audio.addEventListener("timeupdate", handleGetAudioTime);
+    audio.value.removeEventListener('ended', handleEnded)
-  audio.addEventListener("ended", handleEnded);
+    audio.value.addEventListener('timeupdate', handleGetAudioTime)
-};
+    audio.value.addEventListener('ended', handleEnded)
+  }
+}
 
 function handleEnded() {
-  store.commit("nextPlay");
+  store.commit('nextPlay')
 }
 
 function handlePrev() {
-  store.commit("prevPlay");
+  store.commit('prevPlay')
 }
 
+const MusicFullRef = ref<any>(null)
+
 function handleGetAudioTime(this: any) {
   // 监听音频播放的实时时间事件
-  const audio = this as HTMLAudioElement;
+  const audio = this as HTMLAudioElement
   // 获取当前播放时间
-  nowTime.value = Math.floor(audio.currentTime);
+  nowTime.value = Math.floor(audio.currentTime)
   // 获取总时间
-  allTime.value = audio.duration;
+  allTime.value = audio.duration
   // 获取音量
-  audioVolume.value = audio.volume;
+  audioVolume.value = audio.volume
-  lrcScroll();
+  MusicFullRef.value?.lrcScroll()
 }
 
 // 播放暂停按钮事件
 const playMusicEvent = async () => {
   if (play.value) {
-    store.commit("setPlayMusic", false);
+    store.commit('setPlayMusic', false)
   } else {
-    store.commit("setPlayMusic", true);
+    store.commit('setPlayMusic', true)
   }
-};
+}
 
-const musicFull = ref(false);
+const musicFull = ref(false)
 
 // 设置musicFull
 const setMusicFull = () => {
-  musicFull.value = !musicFull.value;
+  musicFull.value = !musicFull.value
-  if (musicFull.value) {
+}
-    loadLrc();
-  }
-};
 
 // 解析音乐
 const parsingMusic = async () => {
-  const { data } = await getParsingMusicUrl(playMusic.value.id);
+  const { data } = await getParsingMusicUrl(playMusic.value.id)
-  store.state.playMusicUrl = data.data.url;
+  store.state.playMusicUrl = data.data.url
-};
-
-const lrcData = ref<ILyric>();
-
-interface ILrcData {
-  text: string;
-  trText: string;
 }
-const lrcArray = ref<Array<ILrcData>>();
-const lrcTimeArray = ref<Array<Number>>([]);
-// 加载歌词
-const loadLrc = async () => {
-  const { data } = await getMusicLrc(playMusic.value.id);
-  lrcData.value = data;
 
-  try {
-    let musicText = data.lrc.lyric;
-    //歌词时间
-    let timeArray = musicText.match(/(\d{2}):(\d{2})(\.(\d*))?/g);
-    let timeArrayNum: Array<Number> = [];
-    timeArray?.forEach(function (item, index) {
-      if (item.length < 9) {
-        item = item + "0";
-      }
-      timeArrayNum.push(
-        parseInt(item.split(":")[0]) * 60 + parseFloat(item.split(":")[1])
-      );
-    });
-    lrcTimeArray.value = timeArrayNum;
-    //歌词
-    let musicTextArray = musicText
-      .replace(/(\[(\d{2}):(\d{2})(\.(\d*))?\])/g, "")
-      .split("\n");
-    let text = [];
-
-    try {
-      let trMusicText = data.tlyric.lyric;
-      let trMusicTextArray = trMusicText
-        .replace(/(\[(\d{2}):(\d{2})(\.(\d*))?\])/g, "")
-        .split("\n");
-      for (let i = 0; i < musicTextArray.length - 1; i++) {
-        text.push({
-          text: musicTextArray[i],
-          trText: trMusicTextArray[i],
-        });
-      }
-      lrcArray.value = text;
-    } catch (err) {
-      text = [];
-    }
-  } catch (err) {
-    console.log(err);
-  }
-};
-
-// 是否是当前正在播放的歌词
-const isCurrentLrc = (index: any) => {
-  let isTrue = !(
-    nowTime.value <= lrcTimeArray.value[index] ||
-    nowTime.value >= lrcTimeArray.value[index + 1]
-  );
-  if (isTrue) {
-    newLrcIndex.value = index;
-  }
-  return isTrue;
-};
-// 设置当前播放时间
-const setAudioTime = (index: any) => {
-  audio.value.currentTime = lrcTimeArray.value[index];
-  audio.value.play();
-};
 </script>
 
 <style lang="scss" scoped>
@@ -391,62 +294,15 @@ const setAudioTime = (index: any) => {
   animation: fadeOutDown 0.4s ease-in-out;
 }
 
-#drawer-target {
-  @apply top-0 left-0 absolute w-full h-full overflow-hidden rounded px-24 pt-24 pb-48 flex items-center;
-  backdrop-filter: saturate(180%) blur(50px);
-  background-color: rgba(51, 51, 51, 0.747);
-  animation-duration: 300ms;
-
-  .music-img {
-    @apply flex-1 flex justify-center mr-24;
-
-    .img {
-      width: 450px;
-      height: 450px;
-      @apply rounded-xl;
-    }
-  }
-
-  .music-content {
-    @apply flex flex-col justify-center items-center;
-
-    &-name {
-      @apply font-bold text-3xl py-2;
-    }
-
-    &-singer {
-      @apply text-base py-2;
-    }
-  }
-
-  .music-lrc {
-    background-color: inherit;
-    width: 800px;
-    height: 550px;
-
-    &-text {
-      @apply text-white text-lg flex justify-center items-center cursor-pointer;
-      height: 50px;
-      transition: all 0.2s ease-out;
-
-      &:hover {
-        @apply font-bold text-xl text-red-500;
-      }
-    }
-
-    .now-text {
-      @apply font-bold text-xl text-red-500;
-    }
-  }
-}
-
 .text-ellipsis {
   width: 100%;
 }
 
 .music-play-bar {
   @apply h-20 w-full absolute bottom-0 left-0 flex items-center rounded-t-2xl overflow-hidden box-border px-6 py-2;
-  background-color: #212121;
+  z-index: 99999999;
+  backdrop-filter: blur(20px);
+  background-color: rgba(0, 0, 0, 0.747);
 
   .music-content {
     width: 200px;

src/layout/components/lrcFull.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="lrc-full">
+    {{ lrcIndex }}
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineProps } from 'vue'
+
+const props = defineProps({
+  lrcList: {
+    type: Array,
+    default: () => []
+  },
+  lrcIndex: {
+    type: Number,
+    default: 0
+  },
+  lrcTime: {
+    type: Number,
+    default: 0
+  },
+})
+</script>
+
+<style scoped lang="scss"></style>

src/views/home/index.vue

@@ -15,35 +15,10 @@
 
 <script lang="ts" setup>
 import { defineAsyncComponent } from 'vue';
-// import RecommendSinger from "@/components/RecommendSinger.vue";
-// import PlaylistType from "@/components/PlaylistType.vue";
-// import RecommendSonglist from "@/components/RecommendSonglist.vue";
-// import RecommendAlbum from "@/components/RecommendAlbum.vue";
 const RecommendSinger = defineAsyncComponent(() => import("@/components/RecommendSinger.vue"));
 const PlaylistType = defineAsyncComponent(() => import("@/components/PlaylistType.vue"));
 const RecommendSonglist = defineAsyncComponent(() => import("@/components/RecommendSonglist.vue"));
 const RecommendAlbum = defineAsyncComponent(() => import("@/components/RecommendAlbum.vue"));
-/* 
-  异步组件的定义方式
-  const asyncComponents  = defineAsyncComponent({
-  // 异步组件的路径
-  loader: () => import("@/components/RecommendSinger.vue"),
-  // 异步组件的占位
-  loadingComponent:aaa,
-  // 异步组件的错误
-  errorComponent:bbb,
-  // 在显示loading组件之前，等待多长时间
-  delay:1000,
-  // 监听错误
-  // error 错误信息  retry 再次请求 attempts 当前重试次数
-  onError:(err,retry,attempts)=>{
-    console.log("错误")
-  }
- })
-*/
-
-
-
 </script>
 
 <style lang="scss" scoped>