Skip to content

Commit be35e3c

Browse files
debug16debug16
committed
feat: 添加播放模式
1 parent 5bddf7c commit be35e3c

2 files changed

Lines changed: 58 additions & 22 deletions

File tree

‎src/components/Footer.vue‎

Lines changed: 27 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,7 @@ const nextPlayMusic = () => {
6767
stopPlayMusic()
6868
// 获取下一首歌曲信息
6969
const nextMusic = playMusicStore.getNextPlayMusic
70+
7071
// 没有下一首
7172
if (!nextMusic) return
7273
@@ -197,17 +198,9 @@ watch(
197198
}
198199
})
199200
}
200-
// 设置页面标题为歌曲名
201-
// title =
202201
// 暂停播放
203202
stopPlayMusic()
204203
205-
// // 检查音乐是否收费
206-
// if (!isSongsFree(playMusicStore.activePlayMusic.music.fee)) {
207-
// // 播放下一首
208-
// nextPlayMusic()
209-
// }
210-
211204
// 播放栏是否隐藏
212205
if (injects?.footerHide && _nId) {
213206
injects.updateFooterHide() // 如果隐藏则显示
@@ -312,7 +305,6 @@ const { space, down, up, left, right, n, p, m, Escape, f, shift, alt, ctrl } = $
312305
313306
// 快捷键监听
314307
watchEffect(() => {
315-
316308
if (!audio || !playMusicStore.getPlayMusicId || !notUsingInput || shift || alt) return
317309
// 空格 暂停音乐
318310
if (space) togglePlayMusic()
@@ -348,7 +340,7 @@ const playMusicUrl = computed(() => {
348340
<template>
349341
<vue-slider
350342
v-model="audioInfo.currentTime"
351-
:max="audioInfo.duration | 0"
343+
:max="Math.ceil(audioInfo.duration)"
352344
:interval="1"
353345
:min="0"
354346
tooltip="hover"
@@ -365,6 +357,7 @@ const playMusicUrl = computed(() => {
365357
:contained="true"
366358
/>
367359
<div class="footerContent" pb-5px>
360+
<!-- 全屏歌词页 -->
368361
<div :class="{ slideUp: !isFullScreenPlayer }" transition-transform transition-duration-500 class="fullScreenPlayer" color="#fff" fixed w-100vw h-100vh bg="#61394F" z-9000 top-0 left-0>
369362
<Icon class="player__minimize" z-10 absolute iconName="i-mingcute-down-fill" top-10 right-10 :w="8" :h="8" color="#ccc" @click="isFullScreenPlayer = false" />
370363
<div class="player__container" w-full h-full flex="~" justify-end>
@@ -395,7 +388,7 @@ const playMusicUrl = computed(() => {
395388
flex-1
396389
pb-0
397390
v-model="audioInfo.currentTime"
398-
:max="audioInfo.duration | 0"
391+
:max="Math.ceil(audioInfo.duration)"
399392
:interval="1"
400393
:min="0"
401394
tooltip="none"
@@ -445,9 +438,11 @@ const playMusicUrl = computed(() => {
445438
</div>
446439
</div>
447440
</div>
441+
<!-- 底部播放栏 -->
448442
<div h-full>
449443
<footer class="footer" h-full @click="isFullScreenPlayer = true">
450444
<div flex="~" relative items-stretch justify-between items-center h-full>
445+
<!-- 歌曲信息 -->
451446
<div class="left" max="w-30%" flex="~" text-2xl space-x-3>
452447
<div h-50px w-50px flex="shrink-0" class="footer__music--img">
453448
<img :src="`${playMusicStore.getPlayMusicCover}?param=224y224`" alt="" rounded-lg />
@@ -463,23 +458,28 @@ const playMusicUrl = computed(() => {
463458
</div>
464459
</div>
465460
</div>
461+
<!-- 播放按钮 -->
466462
<div class="center" absolute left="50%" top="50%" translate="-50%" flex="~" items-center text-lg font-800>
467463
<!-- 上一首 -->
468-
<Icon :iconName="'i-carbon:skip-back-filled'" @click.stop="prevPlayMusic"> </Icon>
464+
<Icon :iconName="'i-carbon:skip-back-filled'" @click.stop="prevPlayMusic" title="上一首" />
469465
<!-- 播放 -->
470-
<Icon v-show="isPlaying" iconName="i-carbon:pause-filled" mx-4 :w="9" :h="9" @click.stop="stopPlayMusic"> </Icon>
466+
<Icon v-show="isPlaying" iconName="i-carbon:pause-filled" mx-4 :w="9" :h="9" @click.stop="stopPlayMusic" title="暂停" />
471467
<!-- 暂停 -->
472-
<Icon iconName="i-mingcute-play-fill" :w="9" :h="9" v-show="!isPlaying" mx-4 @click.stop="playMusic"> </Icon>
468+
<Icon iconName="i-mingcute-play-fill" :w="9" :h="9" v-show="!isPlaying" mx-4 @click.stop="playMusic" title="播放" />
473469
<!-- 下一首 -->
474470
<!-- <div class="icon"> -->
475-
<Icon iconName="i-carbon:skip-forward-filled" @click.stop="nextPlayMusic"></Icon>
471+
<Icon iconName="i-carbon:skip-forward-filled" @click.stop="nextPlayMusic" title="下一首"></Icon>
476472
<!-- </div> -->
477473
</div>
474+
<!-- 其他操作按钮 -->
478475
<div class="right" @click.stop="null" flex="~" items-center space-x-3 justify-end>
479-
<Icon :w="4" :h="4" icon-name="i-zondicons-music-playlist" @click="router.push('/next')" :class="{ active: route.name === 'next' }" />
480-
<Icon v-if="audio?.muted === true || audio?.volume <= 0" iconName="i-carbon:volume-mute-filled" :w="4" :h="4" @click="onUnmute" />
481-
<Icon v-else-if="audio?.volume <= 0.5 && audio?.volume > 0" iconName="i-carbon:volume-down-filled" :w="4" :h="4" @click="onMute" />
482-
<Icon v-else iconName="i-carbon:volume-up-filled" :w="4" :h="4" @click="onMute" />
476+
<Icon v-if="playMusicStore.getPlayModel === 0" title="顺序播放" class="playModel" :w="4.5" :h="4.5" icon-name="i-ph-repeat-bold" @click="playMusicStore.setPlayModel(1)" />
477+
<Icon v-else-if="playMusicStore.getPlayModel === 1" title="随机播放" class="playModel" :w="4.5" :h="4.5" icon-name="i-ph-shuffle-bold" @click="playMusicStore.setPlayModel(2)" />
478+
<Icon v-else-if="playMusicStore.getPlayModel === 2" title="单曲循环" class="playModel" :w="4.5" :h="4.5" icon-name="i-ph-repeat-once-bold" @click="playMusicStore.setPlayModel(0)" />
479+
<Icon :w="4" :h="4" icon-name="i-zondicons-music-playlist" @click="router.push('/next')" :class="{ active: route.name === 'next' }" title="播放列表" />
480+
<Icon v-if="audio?.muted === true || audio?.volume <= 0" iconName="i-ph-speaker-simple-x-fill" title="解除静音" :w="4" :h="4" @click="onUnmute" />
481+
<Icon v-else-if="audio?.volume <= 0.5 && audio?.volume > 0" iconName="i-ph-speaker-simple-low-fill" title="开启静音" :w="4" :h="4" @click="onMute" />
482+
<Icon v-else iconName="i-ph-speaker-simple-high-fill" title="开启静音" :w="4" :h="4" @click="onMute" />
483483
<vue-slider
484484
class="volume"
485485
v-model="audioVolume"
@@ -498,14 +498,15 @@ const playMusicUrl = computed(() => {
498498
:width="100"
499499
:contained="true"
500500
/>
501-
<Icon iconName="i-mingcute-up-fill" :w="5" :h="5" @click="isFullScreenPlayer = true" />
501+
<Icon iconName="i-mingcute-up-fill" :w="5" :h="5" @click="isFullScreenPlayer = true" title="全屏歌词" />
502502
<div class="audio" hidden>
503503
<audio
504504
ref="audio"
505505
@volumechange="onVolumechange"
506506
:src="playMusicUrl"
507507
autoplay
508508
controls
509+
:loop="playMusicStore.getPlayModel === 2"
509510
@ended="endPlayMusic"
510511
@play="startPlayMusic"
511512
@error="stopPlayMusic"
@@ -546,7 +547,12 @@ const playMusicUrl = computed(() => {
546547
padding: 5px 0 #{!important};
547548
}
548549
.active.icon {
549-
:deep(.i-zondicons-music-playlist) {
550+
:deep(div) {
551+
@apply bg-#335eea;
552+
}
553+
}
554+
.playModel.icon {
555+
:deep(div) {
550556
@apply bg-#335eea;
551557
}
552558
}

‎src/stores/playMusic.ts‎

Lines changed: 31 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { acceptHMRUpdate, defineStore } from 'pinia'
22
import { formatSongsSinger } from '~/utils/songs'
3+
import { differenceBy, sample } from 'lodash'
34
export const usePlayMusicStore = defineStore('playMusic', {
45
state() {
56
return {
@@ -25,14 +26,19 @@ export const usePlayMusicStore = defineStore('playMusic', {
2526
playList: [],
2627
// 歌曲列表
2728
songs: [],
29+
// 播放配置
30+
config: {
31+
// 播放模式 0：顺序播放 1：随机播放 2：单曲循环
32+
model: 0
33+
}
2834
}
2935
},
3036
getters: {
3137
// 获取播放音乐 id
3238
getPlayMusicId(state: any) {
3339
return state.activePlayMusic.id
3440
},
35-
getPlayMusic(state:any){
41+
getPlayMusic(state: any) {
3642
return state.activePlayMusic.music
3743
},
3844
// 获取播放的音乐信息
@@ -56,6 +62,11 @@ export const usePlayMusicStore = defineStore('playMusic', {
5662
// 没有播放歌曲 id || 播放列表为空
5763
if (!state.activePlayMusic.id || state.playList.length <= 0)
5864
return null
65+
66+
// 如果是随机播放
67+
if (this.getPlayModel === 1)
68+
return this.getRandomMusic
69+
5970
// 找到歌曲 id 在播放列表中的位置
6071
const index = state.playList.findIndex((item: { id: any }) => item.id === state.activePlayMusic.id,
6172
)
@@ -69,6 +80,11 @@ export const usePlayMusicStore = defineStore('playMusic', {
6980
// 没有播放歌曲 id || 播放列表为空
7081
if (!state.activePlayMusic.id || state.playList.length <= 0)
7182
return null
83+
84+
// 如果是随机播放
85+
if (this.getPlayModel === 1)
86+
return this.getRandomMusic
87+
7288
// 找到歌曲 id 在播放列表中的位置
7389
const index = state.playList.findIndex((item: { id: any }) => item.id === state.activePlayMusic.id,
7490
)
@@ -80,6 +96,16 @@ export const usePlayMusicStore = defineStore('playMusic', {
8096
// 获取歌词
8197
getLyric(state: any) {
8298
return state.activePlayMusic.lyric
99+
},
100+
// 获取播放模式
101+
getPlayModel(state: any) {
102+
return state.config.model
103+
},
104+
// 随机获取一首歌
105+
getRandomMusic(state: any) {
106+
const musicList: any = differenceBy(this.getPlayList, [{id:this.activePlayMusic.id}], 'id')
107+
const music = sample(musicList)
108+
return music
83109
}
84110
},
85111
actions: {
@@ -98,6 +124,10 @@ export const usePlayMusicStore = defineStore('playMusic', {
98124
// 设置歌词
99125
setLyric(lyric: string) {
100126
this.activePlayMusic.lyric = lyric
127+
},
128+
// 设置播放模式
129+
setPlayModel(model: number) {
130+
this.config.model = model
101131
}
102132
},
103133
})

0 commit comments

Comments
 (0)