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 @@
/>
@@ -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);
- }
-);