Fix Music Player
This commit is contained in:
parent
6e416bfec0
commit
e7beed15cd
@ -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>
|
||||||
|
@ -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;
|
||||||
}
|
}
|
||||||
|
@ -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 {
|
||||||
|
@ -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'],
|
||||||
},
|
},
|
||||||
})
|
})
|
@ -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;
|
||||||
}
|
}
|
@ -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";
|
||||||
|
Loading…
Reference in New Issue
Block a user