From e7beed15cdd7c8e756c39bb2ef6c0b50f2ab18db Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=BA=95=E5=B1=82=E7=94=A8=E6=88=B7?= Date: Sat, 14 Jan 2023 23:15:02 +0800 Subject: [PATCH] Fix Music Player --- src/components/Footer/index.vue | 4 +- src/components/Music/test.vue | 89 +++++++++++++-------------- src/components/Player/Beta.vue | 103 +++++++++++++++++++++----------- src/store/index.js | 3 +- src/style/style.scss | 6 +- src/views/Func/index.vue | 2 +- 6 files changed, 122 insertions(+), 85 deletions(-) diff --git a/src/components/Footer/index.vue b/src/components/Footer/index.vue index 7d15df9..c948f35 100644 --- a/src/components/Footer/index.vue +++ b/src/components/Footer/index.vue @@ -21,7 +21,9 @@
- {{ store.getPlayerLrc }} + + {{ store.getPlayerLrc ? store.getPlayerLrc : "这句没有歌词" }} +
diff --git a/src/components/Music/test.vue b/src/components/Music/test.vue index e5a7c7c..31922e6 100644 --- a/src/components/Music/test.vue +++ b/src/components/Music/test.vue @@ -39,41 +39,37 @@ />
- -
- {{ - store.getPlayerData.name - ? store.getPlayerData.name + " - " + store.getPlayerData.artist - : "未播放音乐" - }} -
- - -
-
- - - -
- + {{ + store.getPlayerData.name + ? store.getPlayerData.name + " - " + store.getPlayerData.artist + : "未播放音乐" + }} +
+
+
+ + +
- + +
@@ -97,6 +93,7 @@ :songType="playerData.type" :songId="playerData.id" :volume="volumeNum" + :shuffle="true" ref="playerRef" /> @@ -106,7 +103,7 @@ @@ -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; } diff --git a/src/components/Player/Beta.vue b/src/components/Player/Beta.vue index 500285f..6bd7ce9 100644 --- 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" /> @@ -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); - } -);