Fix Music Player

2023-01-14 23:15:02 +08:00 · 2023-01-14 23:15:02 +08:00 · e7beed15cd
commit e7beed15cd
parent 6e416bfec0
6 changed files with 122 additions and 85 deletions
--- a/src/components/Footer/index.vue
+++ b/src/components/Footer/index.vue
@ -21,7 +21,9 @@
    </div>
    <div class="lrc" v-show="store.playerState">
      <music-one theme="filled" size="18" fill="#efefef" />
-      <span class="lrc-text">{{ store.getPlayerLrc }}</span>
+      <span class="lrc-text">
+        {{ store.getPlayerLrc ? store.getPlayerLrc : "这句没有歌词" }}
+      </span>
      <music-one theme="filled" size="18" fill="#efefef" />
    </div>
  </footer>
--- a/src/components/Music/test.vue
+++ b/src/components/Music/test.vue
@ -39,41 +39,37 @@
      />
    </div>
    <div class="menu">
-      <Transition name="fade">
-        <div class="name" v-show="!volumeShow">
-          <span>{{
-            store.getPlayerData.name
-              ? store.getPlayerData.name + " - " + store.getPlayerData.artist
-              : "未播放音乐"
-          }}</span>
-        </div>
-      </Transition>
-      <Transition name="fade">
-        <div class="volume" v-show="volumeShow">
-          <div class="icon">
-            <volume-mute
-              theme="filled"
-              size="24"
-              fill="#efefef"
-              v-if="volumeNum == 0"
-            />
-            <volume-small
-              theme="filled"
-              size="24"
-              fill="#efefef"
-              v-else-if="volumeNum > 0 && volumeNum < 0.7"
-            />
-            <volume-notice theme="filled" size="24" fill="#efefef" v-else />
-          </div>
-          <el-slider
-            v-model="volumeNum"
-            :show-tooltip="false"
-            :min="0"
-            :max="1"
-            :step="0.01"
+      <div class="name" v-show="!volumeShow">
+        <span>{{
+          store.getPlayerData.name
+            ? store.getPlayerData.name + " - " + store.getPlayerData.artist
+            : "未播放音乐"
+        }}</span>
+      </div>
+      <div class="volume" v-show="volumeShow">
+        <div class="icon">
+          <volume-mute
+            theme="filled"
+            size="24"
+            fill="#efefef"
+            v-if="volumeNum == 0"
          />
+          <volume-small
+            theme="filled"
+            size="24"
+            fill="#efefef"
+            v-else-if="volumeNum > 0 && volumeNum < 0.7"
+          />
+          <volume-notice theme="filled" size="24" fill="#efefef" v-else />
        </div>
-      </Transition>
+        <el-slider
+          v-model="volumeNum"
+          :show-tooltip="false"
+          :min="0"
+          :max="1"
+          :step="0.01"
+        />
+      </div>
    </div>
  </div>
  <!-- 音乐列表弹窗 -->
@ -97,6 +93,7 @@
            :songType="playerData.type"
            :songId="playerData.id"
            :volume="volumeNum"
+            :shuffle="true"
            ref="playerRef"
          />
        </div>
@ -106,7 +103,7 @@
 </template>

 <script setup>
-import { ref, reactive, watch, onMounted } from "vue";
+import { ref, reactive, watch, onMounted, nextTick } from "vue";
 import {
  GoStart,
  PlayOne,
@ -117,17 +114,13 @@ import {
  VolumeSmall,
  VolumeNotice,
 } from "@icon-park/vue-next";
-import Player from "@/components/Player/beta.vue";
+import Player from "@/components/Player/Beta.vue";
 import { mainStore } from "@/store";
 const store = mainStore();

 // 音量条数据
 let volumeShow = ref(false);
-let volumeNum = ref(
-  localStorage.getItem("aplayer-volume")
-    ? JSON.parse(localStorage.getItem("aplayer-volume"))
-    : 0.7
-);
+let volumeNum = ref(store.musicVolume ? store.musicVolume : 0.7);

 // 播放列表数据
 let musicListShow = ref(false);
@ -162,9 +155,8 @@ onMounted(() => {
 watch(
  () => volumeNum.value,
  (value) => {
-    console.log(value);
-    localStorage.setItem("aplayer-volume", value);
-    playerRef.value.changeVolume(value);
+    store.musicVolume = value;
+    playerRef.value.changeVolume(store.musicVolume);
  }
 );
 </script>
@ -244,7 +236,8 @@ watch(
      text-overflow: ellipsis;
      overflow-x: hidden;
      white-space: nowrap;
-      // font-size: 1.1rem;
+      animation: fade;
+      -webkit-animation: fade 0.3s;
    }
    .volume {
      width: 100%;
@ -252,6 +245,8 @@ watch(
      display: flex;
      align-items: center;
      flex-direction: row;
+      animation: fade;
+      -webkit-animation: fade 0.3s;
      .icon {
        margin-right: 12px;
        span {
@ -315,6 +310,12 @@ watch(
 }

 // 弹窗动画
+.fade-enter-active {
+  animation: fade 0.3s ease-in-out;
+}
+.fade-leave-active {
+  animation: fade 0.3s ease-in-out reverse;
+}
 .zoom-enter-active {
  animation: zoom 0.4s ease-in-out;
 }
--- a/src/components/Player/Beta.vue
+++ b/src/components/Player/Beta.vue
@ -11,9 +11,11 @@
    :shuffle="shuffle"
    :listMaxHeight="listMaxHeight"
    :listFolded="listFolded"
+    :volume="volume"
    @play="onPlay"
    @pause="onPause"
    @timeupdate="onTimeUp"
+    @onSelectSong="onSelectSong"
  />
 </template>
 
@ -31,9 +33,10 @@ import {
 } from "vue";
 import { getPlayerList } from "@/api";
 import { mainStore } from "@/store";
+
 const store = mainStore();

-// 获取播放器DOM
+// 获取播放器 DOM
 const player = ref(null);

 // 歌曲播放列表
@ -64,7 +67,7 @@ const props = defineProps({
  // 随机播放
  shuffle: {
    type: Boolean,
-    default: true,
+    default: false,
  },
  // 默认音量
  volume: {
@ -108,10 +111,16 @@ onMounted(() => {
      .then((res) => {
        // 生成歌单信息
        playIndex.value = Math.floor(Math.random() * res.length);
-        playListCount.value = res.length - 1;
+        playListCount.value = res.length;
        // 更改播放器加载状态
        store.musicIsOk = true;
-        console.log("音乐加载完成");
+        console.log(
+          "音乐加载完成",
+          res,
+          playIndex.value,
+          playListCount.value,
+          props.volume
+        );
        // 生成歌单
        res.forEach((v) => {
          playList.value.push({
@ -124,6 +133,7 @@ onMounted(() => {
        });
      })
      .catch(() => {
+        store.musicIsOk = false;
        ElMessage({
          message: "播放器加载失败",
          grouping: true,
@ -162,9 +172,12 @@ const onPause = () => {
 // 音频时间更新事件
 const onTimeUp = () => {
  let playerRef = player.value.$.vnode.el;
-  playerLrc.value = playerRef.getElementsByClassName(
-    "aplayer-lrc-current"
-  )[0].innerHTML;
+  if (playerRef) {
+    playerLrc.value = playerRef.getElementsByClassName(
+      "aplayer-lrc-current"
+    )[0].innerHTML;
+    store.setPlayerLrc(playerLrc.value);
+  }
 };

 // 切换播放暂停事件
@ -177,21 +190,21 @@ const changeVolume = (value) => {
  player.value.audio.volume = value;
 };

+const onSelectSong = (val) => {
+  console.log(val);
+};
+
 // 切换上下曲
 const changeSong = (type) => {
-  if (type) {
-    console.log("下一曲");
-    playIndex.value < playListCount.value
-      ? playIndex.value++
-      : (playIndex.value = 0);
-  } else {
-    console.log("上一曲");
-    console.log(playIndex.value);
-    playIndex.value > 0
-      ? playIndex.value--
-      : (playIndex.value = playListCount.value);
+  playIndex.value = player.value.playIndex;
+  playIndex.value += type ? 1 : -1;
+  // 判断是否处于最后/第一首
+  if (playIndex.value < 0) {
+    playIndex.value = playListCount.value - 1;
+  } else if (playIndex.value >= playListCount.value) {
+    playIndex.value = 0;
  }
-  console.log(playList.value[playIndex.value]);
+  // console.log(playIndex.value, playList.value[playIndex.value]);
  nextTick(() => {
    player.value.play();
  });
@ -199,16 +212,6 @@ const changeSong = (type) => {

 // 暴露子组件方法
 defineExpose({ playToggle, changeVolume, changeSong });
-
-// 监听歌词变化
-watch(
-  () => playerLrc.value,
-  (value) => {
-    console.log(value);
-    // 储存至 pinia
-    store.setPlayerLrc(value);
-  }
-);
 </script>
 
 <style lang='scss' scoped>
@ -224,22 +227,47 @@ watch(
      margin-left: 0;
      background-color: #ffffff40;
      border-color: transparent;
-      .aplayer-title {
-        font-size: 16px;
-      }
-      .aplayer-author {
-        color: #efefef;
+      .aplayer-music {
+        flex-grow: initial;
+        margin-bottom: 2px;
+        overflow: initial;
+        .aplayer-title {
+          font-size: 16px;
+          margin-right: 6px;
+        }
+        .aplayer-author {
+          color: #efefef;
+        }
      }
      .aplayer-lrc {
        text-align: left;
-        margin: 4px 0 0 6px;
-        height: 38px;
+        margin: 4px 0 6px 6px;
+        height: 100%;
+        mask: linear-gradient(
+          180deg,
+          hsla(0, 0%, 100%, 0) 0,
+          hsla(0, 0%, 100%, 0.6) 10%,
+          #fff 15%,
+          #fff 85%,
+          hsla(0, 0%, 100%, 0.6) 90%,
+          hsla(0, 0%, 100%, 0)
+        );
+        -webkit-mask: linear-gradient(
+          180deg,
+          hsla(0, 0%, 100%, 0) 0,
+          hsla(0, 0%, 100%, 0.6) 10%,
+          #fff 15%,
+          #fff 85%,
+          hsla(0, 0%, 100%, 0.6) 90%,
+          hsla(0, 0%, 100%, 0)
+        );
        &::before,
        &::after {
          display: none;
        }
        p {
          color: #efefef;
+          margin: 2px 0;
        }
        .aplayer-lrc-current {
          font-size: 0.95rem;
@ -254,6 +282,9 @@ watch(
  :deep(.aplayer-list) {
    margin-top: 6px;
    ol {
+      &::-webkit-scrollbar-track{
+        background-color: transparent;
+      }
      li {
        border-color: transparent;
        &.aplayer-list-light {
--- a/src/store/index.js
+++ b/src/store/index.js
@ -8,6 +8,7 @@ export const mainStore = defineStore("main", {
            innerWidth: null, // 当前窗口宽度
            coverType: "0", // 壁纸种类
            musicIsOk: false, // 音乐是否加载完成
+            musicVolume: 0, // 音乐音量;
            musicOpenState: false, // 音乐面板开启状态
            backgroundShow: false, // 壁纸展示状态
            boxOpenState: false, // 盒子开启状态
@ -62,6 +63,6 @@ export const mainStore = defineStore("main", {
    persist: {
        key: 'data',
        storage: window.localStorage,
-        paths: ['coverType'],
+        paths: ['coverType', 'musicVolume'],
    },
 })
--- a/src/style/style.scss
+++ b/src/style/style.scss
@ -179,13 +179,15 @@ p {
 }

 // 滚动条样式
-::-webkit-scrollbar {
+::-webkit-scrollbar,
+scrollbar {
    width: 6px;
    height: 6px;
    background-color: transparent;
 }

-::-webkit-scrollbar-thumb {
+::-webkit-scrollbar-thumb,
+scrollbar-thumb {
    border-radius: 10px;
    background-color: #eeeeee;
 }
--- a/src/views/Func/index.vue
+++ b/src/views/Func/index.vue
@ -34,7 +34,7 @@

 <script setup>
 import { ref, onMounted, onBeforeUnmount } from "vue";
-import Music from "@/components/Music/index.vue";
+import Music from "@/components/Music/test.vue";
 import Hitokoto from "@/components/Hitokoto/index.vue";
 import Weather from "@/components/Weather/index.vue";
 import { getCurrentTime } from "@/utils/getTime";