Fix Music Player

This commit is contained in:
底层用户 2023-01-14 23:15:02 +08:00
parent 6e416bfec0
commit e7beed15cd
6 changed files with 122 additions and 85 deletions

View File

@ -21,7 +21,9 @@
</div> </div>
<div class="lrc" v-show="store.playerState"> <div class="lrc" v-show="store.playerState">
<music-one theme="filled" size="18" fill="#efefef" /> <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" /> <music-one theme="filled" size="18" fill="#efefef" />
</div> </div>
</footer> </footer>

View File

@ -39,41 +39,37 @@
/> />
</div> </div>
<div class="menu"> <div class="menu">
<Transition name="fade"> <div class="name" v-show="!volumeShow">
<div class="name" v-show="!volumeShow"> <span>{{
<span>{{ store.getPlayerData.name
store.getPlayerData.name ? store.getPlayerData.name + " - " + store.getPlayerData.artist
? store.getPlayerData.name + " - " + store.getPlayerData.artist : "未播放音乐"
: "未播放音乐" }}</span>
}}</span> </div>
</div> <div class="volume" v-show="volumeShow">
</Transition> <div class="icon">
<Transition name="fade"> <volume-mute
<div class="volume" v-show="volumeShow"> theme="filled"
<div class="icon"> size="24"
<volume-mute fill="#efefef"
theme="filled" v-if="volumeNum == 0"
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"
/> />
<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> </div>
</Transition> <el-slider
v-model="volumeNum"
:show-tooltip="false"
:min="0"
:max="1"
:step="0.01"
/>
</div>
</div> </div>
</div> </div>
<!-- 音乐列表弹窗 --> <!-- 音乐列表弹窗 -->
@ -97,6 +93,7 @@
:songType="playerData.type" :songType="playerData.type"
:songId="playerData.id" :songId="playerData.id"
:volume="volumeNum" :volume="volumeNum"
:shuffle="true"
ref="playerRef" ref="playerRef"
/> />
</div> </div>
@ -106,7 +103,7 @@
</template> </template>
<script setup> <script setup>
import { ref, reactive, watch, onMounted } from "vue"; import { ref, reactive, watch, onMounted, nextTick } from "vue";
import { import {
GoStart, GoStart,
PlayOne, PlayOne,
@ -117,17 +114,13 @@ import {
VolumeSmall, VolumeSmall,
VolumeNotice, VolumeNotice,
} from "@icon-park/vue-next"; } from "@icon-park/vue-next";
import Player from "@/components/Player/beta.vue"; import Player from "@/components/Player/Beta.vue";
import { mainStore } from "@/store"; import { mainStore } from "@/store";
const store = mainStore(); const store = mainStore();
// //
let volumeShow = ref(false); let volumeShow = ref(false);
let volumeNum = ref( let volumeNum = ref(store.musicVolume ? store.musicVolume : 0.7);
localStorage.getItem("aplayer-volume")
? JSON.parse(localStorage.getItem("aplayer-volume"))
: 0.7
);
// //
let musicListShow = ref(false); let musicListShow = ref(false);
@ -162,9 +155,8 @@ onMounted(() => {
watch( watch(
() => volumeNum.value, () => volumeNum.value,
(value) => { (value) => {
console.log(value); store.musicVolume = value;
localStorage.setItem("aplayer-volume", value); playerRef.value.changeVolume(store.musicVolume);
playerRef.value.changeVolume(value);
} }
); );
</script> </script>
@ -244,7 +236,8 @@ watch(
text-overflow: ellipsis; text-overflow: ellipsis;
overflow-x: hidden; overflow-x: hidden;
white-space: nowrap; white-space: nowrap;
// font-size: 1.1rem; animation: fade;
-webkit-animation: fade 0.3s;
} }
.volume { .volume {
width: 100%; width: 100%;
@ -252,6 +245,8 @@ watch(
display: flex; display: flex;
align-items: center; align-items: center;
flex-direction: row; flex-direction: row;
animation: fade;
-webkit-animation: fade 0.3s;
.icon { .icon {
margin-right: 12px; margin-right: 12px;
span { 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 { .zoom-enter-active {
animation: zoom 0.4s ease-in-out; animation: zoom 0.4s ease-in-out;
} }

View File

@ -11,9 +11,11 @@
:shuffle="shuffle" :shuffle="shuffle"
:listMaxHeight="listMaxHeight" :listMaxHeight="listMaxHeight"
:listFolded="listFolded" :listFolded="listFolded"
:volume="volume"
@play="onPlay" @play="onPlay"
@pause="onPause" @pause="onPause"
@timeupdate="onTimeUp" @timeupdate="onTimeUp"
@onSelectSong="onSelectSong"
/> />
</template> </template>
@ -31,9 +33,10 @@ import {
} from "vue"; } from "vue";
import { getPlayerList } from "@/api"; import { getPlayerList } from "@/api";
import { mainStore } from "@/store"; import { mainStore } from "@/store";
const store = mainStore(); const store = mainStore();
// DOM // DOM
const player = ref(null); const player = ref(null);
// //
@ -64,7 +67,7 @@ const props = defineProps({
// //
shuffle: { shuffle: {
type: Boolean, type: Boolean,
default: true, default: false,
}, },
// //
volume: { volume: {
@ -108,10 +111,16 @@ onMounted(() => {
.then((res) => { .then((res) => {
// //
playIndex.value = Math.floor(Math.random() * res.length); playIndex.value = Math.floor(Math.random() * res.length);
playListCount.value = res.length - 1; playListCount.value = res.length;
// //
store.musicIsOk = true; store.musicIsOk = true;
console.log("音乐加载完成"); console.log(
"音乐加载完成",
res,
playIndex.value,
playListCount.value,
props.volume
);
// //
res.forEach((v) => { res.forEach((v) => {
playList.value.push({ playList.value.push({
@ -124,6 +133,7 @@ onMounted(() => {
}); });
}) })
.catch(() => { .catch(() => {
store.musicIsOk = false;
ElMessage({ ElMessage({
message: "播放器加载失败", message: "播放器加载失败",
grouping: true, grouping: true,
@ -162,9 +172,12 @@ const onPause = () => {
// //
const onTimeUp = () => { const onTimeUp = () => {
let playerRef = player.value.$.vnode.el; let playerRef = player.value.$.vnode.el;
playerLrc.value = playerRef.getElementsByClassName( if (playerRef) {
"aplayer-lrc-current" playerLrc.value = playerRef.getElementsByClassName(
)[0].innerHTML; "aplayer-lrc-current"
)[0].innerHTML;
store.setPlayerLrc(playerLrc.value);
}
}; };
// //
@ -177,21 +190,21 @@ const changeVolume = (value) => {
player.value.audio.volume = value; player.value.audio.volume = value;
}; };
const onSelectSong = (val) => {
console.log(val);
};
// //
const changeSong = (type) => { const changeSong = (type) => {
if (type) { playIndex.value = player.value.playIndex;
console.log("下一曲"); playIndex.value += type ? 1 : -1;
playIndex.value < playListCount.value // /
? playIndex.value++ if (playIndex.value < 0) {
: (playIndex.value = 0); playIndex.value = playListCount.value - 1;
} else { } else if (playIndex.value >= playListCount.value) {
console.log("上一曲"); playIndex.value = 0;
console.log(playIndex.value);
playIndex.value > 0
? playIndex.value--
: (playIndex.value = playListCount.value);
} }
console.log(playList.value[playIndex.value]); // console.log(playIndex.value, playList.value[playIndex.value]);
nextTick(() => { nextTick(() => {
player.value.play(); player.value.play();
}); });
@ -199,16 +212,6 @@ const changeSong = (type) => {
// //
defineExpose({ playToggle, changeVolume, changeSong }); defineExpose({ playToggle, changeVolume, changeSong });
//
watch(
() => playerLrc.value,
(value) => {
console.log(value);
// pinia
store.setPlayerLrc(value);
}
);
</script> </script>
<style lang='scss' scoped> <style lang='scss' scoped>
@ -224,22 +227,47 @@ watch(
margin-left: 0; margin-left: 0;
background-color: #ffffff40; background-color: #ffffff40;
border-color: transparent; border-color: transparent;
.aplayer-title { .aplayer-music {
font-size: 16px; flex-grow: initial;
} margin-bottom: 2px;
.aplayer-author { overflow: initial;
color: #efefef; .aplayer-title {
font-size: 16px;
margin-right: 6px;
}
.aplayer-author {
color: #efefef;
}
} }
.aplayer-lrc { .aplayer-lrc {
text-align: left; text-align: left;
margin: 4px 0 0 6px; margin: 4px 0 6px 6px;
height: 38px; 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, &::before,
&::after { &::after {
display: none; display: none;
} }
p { p {
color: #efefef; color: #efefef;
margin: 2px 0;
} }
.aplayer-lrc-current { .aplayer-lrc-current {
font-size: 0.95rem; font-size: 0.95rem;
@ -254,6 +282,9 @@ watch(
:deep(.aplayer-list) { :deep(.aplayer-list) {
margin-top: 6px; margin-top: 6px;
ol { ol {
&::-webkit-scrollbar-track{
background-color: transparent;
}
li { li {
border-color: transparent; border-color: transparent;
&.aplayer-list-light { &.aplayer-list-light {

View File

@ -8,6 +8,7 @@ export const mainStore = defineStore("main", {
innerWidth: null, // 当前窗口宽度 innerWidth: null, // 当前窗口宽度
coverType: "0", // 壁纸种类 coverType: "0", // 壁纸种类
musicIsOk: false, // 音乐是否加载完成 musicIsOk: false, // 音乐是否加载完成
musicVolume: 0, // 音乐音量;
musicOpenState: false, // 音乐面板开启状态 musicOpenState: false, // 音乐面板开启状态
backgroundShow: false, // 壁纸展示状态 backgroundShow: false, // 壁纸展示状态
boxOpenState: false, // 盒子开启状态 boxOpenState: false, // 盒子开启状态
@ -62,6 +63,6 @@ export const mainStore = defineStore("main", {
persist: { persist: {
key: 'data', key: 'data',
storage: window.localStorage, storage: window.localStorage,
paths: ['coverType'], paths: ['coverType', 'musicVolume'],
}, },
}) })

View File

@ -179,13 +179,15 @@ p {
} }
// 滚动条样式 // 滚动条样式
::-webkit-scrollbar { ::-webkit-scrollbar,
scrollbar {
width: 6px; width: 6px;
height: 6px; height: 6px;
background-color: transparent; background-color: transparent;
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb,
scrollbar-thumb {
border-radius: 10px; border-radius: 10px;
background-color: #eeeeee; background-color: #eeeeee;
} }

View File

@ -34,7 +34,7 @@
<script setup> <script setup>
import { ref, onMounted, onBeforeUnmount } from "vue"; 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 Hitokoto from "@/components/Hitokoto/index.vue";
import Weather from "@/components/Weather/index.vue"; import Weather from "@/components/Weather/index.vue";
import { getCurrentTime } from "@/utils/getTime"; import { getCurrentTime } from "@/utils/getTime";