Fix URL
This commit is contained in:
parent
af659fe259
commit
700b53e79d
@ -10,10 +10,12 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@icon-park/vue-next": "^1.4.2",
|
||||
"aplayer": "^1.10.1",
|
||||
"axios": "^1.1.3",
|
||||
"element-plus": "^2.2.18",
|
||||
"pinia": "^2.0.23",
|
||||
"vue": "^3.2.37"
|
||||
"vue": "^3.2.37",
|
||||
"vue3-aplayer": "^1.7.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vicons/fa": "^0.12.0",
|
||||
|
@ -35,6 +35,7 @@ onMounted(() => {
|
||||
// 加载完成事件
|
||||
window.addEventListener("load", () => {
|
||||
console.log("加载完成");
|
||||
console.clear();
|
||||
// 去除加载标记
|
||||
document.getElementsByTagName("body")[0].className = "";
|
||||
// 给加载动画添加结束标记
|
||||
|
275
src/components/APlayerDom/Beta.vue
Normal file
275
src/components/APlayerDom/Beta.vue
Normal file
@ -0,0 +1,275 @@
|
||||
<template>
|
||||
<aplayer
|
||||
showLrc
|
||||
ref="player"
|
||||
v-if="playList[0]"
|
||||
:music="playList[playIndex]"
|
||||
:list="playList"
|
||||
:autoplay="autoplay"
|
||||
:theme="theme"
|
||||
:repeat="repeat"
|
||||
:shuffle="shuffle"
|
||||
:listMaxHeight="listMaxHeight"
|
||||
:listFolded="listFolded"
|
||||
@play="onPlay"
|
||||
@pause="onPause"
|
||||
@timeupdate="onTimeUp"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { MusicOne, PlayWrong } from "@icon-park/vue-next";
|
||||
import aplayer from "vue3-aplayer";
|
||||
import {
|
||||
h,
|
||||
ref,
|
||||
reactive,
|
||||
nextTick,
|
||||
onMounted,
|
||||
onBeforeUnmount,
|
||||
watch,
|
||||
} from "vue";
|
||||
import { getPlayerList } from "@/api";
|
||||
import { mainStore } from "@/store";
|
||||
const store = mainStore();
|
||||
|
||||
// 获取播放器DOM
|
||||
const player = ref(null);
|
||||
|
||||
// 歌曲播放列表
|
||||
let playList = ref([]);
|
||||
let playerLrc = ref("");
|
||||
|
||||
// 歌曲播放项
|
||||
let playIndex = ref(0);
|
||||
let playListCount = ref(0);
|
||||
|
||||
// 配置项
|
||||
const props = defineProps({
|
||||
// 音频自动播放
|
||||
autoplay: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
// 主题色
|
||||
theme: {
|
||||
type: String,
|
||||
default: "#efefef",
|
||||
},
|
||||
// 音频循环播放
|
||||
repeat: {
|
||||
type: String,
|
||||
default: "list", //'list' | 'music' | 'none'
|
||||
},
|
||||
// 随机播放
|
||||
shuffle: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
// 默认音量
|
||||
volume: {
|
||||
type: Number,
|
||||
default: 0.7,
|
||||
validator: (value) => {
|
||||
return value >= 0 && value <= 1;
|
||||
},
|
||||
},
|
||||
// 歌曲服务器 ( netease-网易云, tencent-qq音乐, kugou-酷狗, xiami-小米音乐, baidu-百度音乐 )
|
||||
songServer: {
|
||||
type: String,
|
||||
default: "netease", //'netease' | 'tencent' | 'kugou' | 'xiami' | 'baidu'
|
||||
},
|
||||
// 播放类型 ( song-歌曲, playlist-播放列表, album-专辑, search-搜索, artist-艺术家 )
|
||||
songType: {
|
||||
type: String,
|
||||
default: "playlist",
|
||||
},
|
||||
// id
|
||||
songId: {
|
||||
type: String,
|
||||
default: "7452421335",
|
||||
},
|
||||
// 列表是否默认折叠
|
||||
listFolded: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
// 列表最大高度
|
||||
listMaxHeight: {
|
||||
type: String,
|
||||
default: "420px",
|
||||
},
|
||||
});
|
||||
|
||||
// 初始化播放器
|
||||
onMounted(() => {
|
||||
nextTick(() => {
|
||||
getPlayerList(props.songServer, props.songType, props.songId)
|
||||
.then((res) => {
|
||||
// 生成歌单信息
|
||||
playIndex.value = Math.floor(Math.random() * res.length);
|
||||
playListCount.value = res.length - 1;
|
||||
// 更改播放器加载状态
|
||||
store.musicIsOk = true;
|
||||
console.log("音乐加载完成");
|
||||
// 生成歌单
|
||||
res.forEach((v) => {
|
||||
playList.value.push({
|
||||
title: v.name,
|
||||
artist: v.artist,
|
||||
src: v.url,
|
||||
pic: v.pic,
|
||||
lrc: v.lrc,
|
||||
});
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
ElMessage({
|
||||
message: "播放器加载失败",
|
||||
grouping: true,
|
||||
icon: h(PlayWrong, {
|
||||
theme: "filled",
|
||||
fill: "#efefef",
|
||||
}),
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// 播放暂停事件
|
||||
const onPlay = () => {
|
||||
console.log("播放");
|
||||
// 播放状态
|
||||
store.setPlayerState(player.value.audio.paused);
|
||||
// 储存播放器信息
|
||||
store.setPlayerData(
|
||||
player.value.currentMusic.title,
|
||||
player.value.currentMusic.artist
|
||||
);
|
||||
ElMessage({
|
||||
message: store.getPlayerData.name + " - " + store.getPlayerData.artist,
|
||||
grouping: true,
|
||||
icon: h(MusicOne, {
|
||||
theme: "filled",
|
||||
fill: "#efefef",
|
||||
}),
|
||||
});
|
||||
};
|
||||
const onPause = () => {
|
||||
store.setPlayerState(player.value.audio.paused);
|
||||
};
|
||||
|
||||
// 音频时间更新事件
|
||||
const onTimeUp = () => {
|
||||
let playerRef = player.value.$.vnode.el;
|
||||
playerLrc.value = playerRef.getElementsByClassName(
|
||||
"aplayer-lrc-current"
|
||||
)[0].innerHTML;
|
||||
};
|
||||
|
||||
// 切换播放暂停事件
|
||||
const playToggle = () => {
|
||||
player.value.toggle();
|
||||
};
|
||||
|
||||
// 切换音量事件
|
||||
const changeVolume = (value) => {
|
||||
player.value.audio.volume = value;
|
||||
};
|
||||
|
||||
// 切换上下曲
|
||||
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);
|
||||
}
|
||||
console.log(playList.value[playIndex.value]);
|
||||
nextTick(() => {
|
||||
player.value.play();
|
||||
});
|
||||
};
|
||||
|
||||
// 暴露子组件方法
|
||||
defineExpose({ playToggle, changeVolume, changeSong });
|
||||
|
||||
// 监听歌词变化
|
||||
watch(
|
||||
() => playerLrc.value,
|
||||
(value) => {
|
||||
console.log(value);
|
||||
// 储存至 pinia
|
||||
store.setPlayerLrc(value);
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
.aplayer {
|
||||
width: 80%;
|
||||
background: transparent;
|
||||
border-radius: 6px;
|
||||
:deep(.aplayer-body) {
|
||||
.aplayer-pic {
|
||||
display: none;
|
||||
}
|
||||
.aplayer-info {
|
||||
margin-left: 0;
|
||||
background-color: #ffffff40;
|
||||
border-color: transparent;
|
||||
.aplayer-title {
|
||||
font-size: 16px;
|
||||
}
|
||||
.aplayer-author {
|
||||
color: #efefef;
|
||||
}
|
||||
.aplayer-lrc {
|
||||
text-align: left;
|
||||
margin: 4px 0 0 6px;
|
||||
height: 38px;
|
||||
&::before,
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
p {
|
||||
color: #efefef;
|
||||
}
|
||||
.aplayer-lrc-current {
|
||||
font-size: 0.95rem;
|
||||
margin-bottom: 4px !important;
|
||||
}
|
||||
}
|
||||
.aplayer-controller {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
:deep(.aplayer-list) {
|
||||
margin-top: 6px;
|
||||
ol {
|
||||
li {
|
||||
border-color: transparent;
|
||||
&.aplayer-list-light {
|
||||
background: #ffffff40;
|
||||
border-radius: 6px;
|
||||
}
|
||||
&:hover {
|
||||
background: #ffffff26 !important;
|
||||
border-radius: 6px !important;
|
||||
}
|
||||
.aplayer-list-index,
|
||||
.aplayer-list-author {
|
||||
color: #efefef;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
@ -4,8 +4,8 @@
|
||||
|
||||
<script setup>
|
||||
import { MusicOne, PlayWrong } from "@icon-park/vue-next";
|
||||
import "@/utils/Aplayer/APlayer.min.js";
|
||||
import "@/utils/Aplayer/APlayer.min.css";
|
||||
import APlayer from "APlayer";
|
||||
import "APlayer/dist/APlayer.min.css";
|
||||
import {
|
||||
h,
|
||||
ref,
|
||||
|
@ -92,7 +92,7 @@
|
||||
fill="#ffffff60"
|
||||
@click="musicListShow = false"
|
||||
/>
|
||||
<AplayerDom
|
||||
<APlayerDom
|
||||
:songServer="playerData.server"
|
||||
:songType="playerData.type"
|
||||
:songId="playerData.id"
|
||||
@ -116,7 +116,7 @@ import {
|
||||
VolumeSmall,
|
||||
VolumeNotice,
|
||||
} from "@icon-park/vue-next";
|
||||
import AplayerDom from "@/components/AplayerDom/index.vue";
|
||||
import APlayerDom from "@/components/APlayerDom/index.vue";
|
||||
import { mainStore } from "@/store";
|
||||
const store = mainStore();
|
||||
|
||||
|
334
src/components/Music/test.vue
Normal file
334
src/components/Music/test.vue
Normal file
@ -0,0 +1,334 @@
|
||||
<template>
|
||||
<!-- 音乐控制面板 -->
|
||||
<div
|
||||
class="music"
|
||||
@mouseenter="volumeShow = true"
|
||||
@mouseleave="volumeShow = false"
|
||||
v-show="store.musicOpenState"
|
||||
>
|
||||
<div class="btns">
|
||||
<span @click="musicListShow = true">音乐列表</span>
|
||||
<span @click="store.musicOpenState = false">回到一言</span>
|
||||
</div>
|
||||
<div class="control">
|
||||
<go-start
|
||||
theme="filled"
|
||||
size="30"
|
||||
fill="#efefef"
|
||||
@click="changeMusicIndex(0)"
|
||||
/>
|
||||
<div class="state" @click="changePlayState">
|
||||
<play-one
|
||||
theme="filled"
|
||||
size="50"
|
||||
fill="#efefef"
|
||||
v-show="!store.playerState"
|
||||
/>
|
||||
<pause
|
||||
theme="filled"
|
||||
size="50"
|
||||
fill="#efefef"
|
||||
v-show="store.playerState"
|
||||
/>
|
||||
</div>
|
||||
<go-end
|
||||
theme="filled"
|
||||
size="30"
|
||||
fill="#efefef"
|
||||
@click="changeMusicIndex(1)"
|
||||
/>
|
||||
</div>
|
||||
<div class="menu">
|
||||
<Transition name="fade">
|
||||
<div class="name" v-show="!volumeShow">
|
||||
<span>{{
|
||||
store.getPlayerData.name
|
||||
? store.getPlayerData.name + " - " + store.getPlayerData.artist
|
||||
: "未播放音乐"
|
||||
}}</span>
|
||||
</div>
|
||||
</Transition>
|
||||
<Transition name="fade">
|
||||
<div class="volume" v-show="volumeShow">
|
||||
<div class="icon">
|
||||
<volume-mute
|
||||
theme="filled"
|
||||
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"
|
||||
/>
|
||||
</div>
|
||||
</Transition>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 音乐列表弹窗 -->
|
||||
<Transition name="fade">
|
||||
<div
|
||||
class="music-list"
|
||||
v-show="musicListShow"
|
||||
@click="musicListShow = false"
|
||||
>
|
||||
<Transition name="zoom">
|
||||
<div class="list" v-show="musicListShow" @click.stop>
|
||||
<close-one
|
||||
class="close"
|
||||
theme="filled"
|
||||
size="28"
|
||||
fill="#ffffff60"
|
||||
@click="musicListShow = false"
|
||||
/>
|
||||
<APlayerDom
|
||||
:songServer="playerData.server"
|
||||
:songType="playerData.type"
|
||||
:songId="playerData.id"
|
||||
:volume="volumeNum"
|
||||
ref="playerRef"
|
||||
/>
|
||||
</div>
|
||||
</Transition>
|
||||
</div>
|
||||
</Transition>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, watch, onMounted } from "vue";
|
||||
import {
|
||||
GoStart,
|
||||
PlayOne,
|
||||
Pause,
|
||||
GoEnd,
|
||||
CloseOne,
|
||||
VolumeMute,
|
||||
VolumeSmall,
|
||||
VolumeNotice,
|
||||
} from "@icon-park/vue-next";
|
||||
import APlayerDom from "@/components/APlayerDom/index.vue";
|
||||
import { mainStore } from "@/store";
|
||||
const store = mainStore();
|
||||
|
||||
// 音量条数据
|
||||
let volumeShow = ref(false);
|
||||
let volumeNum = ref(
|
||||
localStorage.getItem("aplayer-volume")
|
||||
? JSON.parse(localStorage.getItem("aplayer-volume"))
|
||||
: 0.7
|
||||
);
|
||||
|
||||
// 播放列表数据
|
||||
let musicListShow = ref(false);
|
||||
const playerRef = ref(null);
|
||||
const musicDialog = ref(null);
|
||||
const playerData = reactive({
|
||||
server: import.meta.env.VITE_SONG_SERVER,
|
||||
type: import.meta.env.VITE_SONG_TYPE,
|
||||
id: import.meta.env.VITE_SONG_ID,
|
||||
});
|
||||
|
||||
// 音乐播放暂停
|
||||
const changePlayState = () => {
|
||||
playerRef.value.playToggle();
|
||||
};
|
||||
|
||||
// 音乐上下曲
|
||||
const changeMusicIndex = (type) => {
|
||||
playerRef.value.changeSong(type);
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
// 空格键事件
|
||||
window.addEventListener("keydown", (e) => {
|
||||
if (e.code == "Space") {
|
||||
changePlayState();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 监听音量变化
|
||||
watch(
|
||||
() => volumeNum.value,
|
||||
(value) => {
|
||||
console.log(value);
|
||||
localStorage.setItem("aplayer-volume", value);
|
||||
playerRef.value.changeVolume(value);
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.music {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #00000040;
|
||||
backdrop-filter: blur(10px);
|
||||
border-radius: 6px;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
animation: fade;
|
||||
-webkit-animation: fade 0.5s;
|
||||
.btns {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 6px;
|
||||
span {
|
||||
background: #ffffff26;
|
||||
padding: 2px 8px;
|
||||
border-radius: 6px;
|
||||
margin: 0px 6px;
|
||||
text-overflow: ellipsis;
|
||||
overflow-x: hidden;
|
||||
white-space: nowrap;
|
||||
&:hover {
|
||||
background: #ffffff4d;
|
||||
}
|
||||
}
|
||||
}
|
||||
.control {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
width: 100%;
|
||||
.state {
|
||||
.i-icon {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.i-icon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
display: flex;
|
||||
border-radius: 6px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 6px;
|
||||
transform: scale(1);
|
||||
&:hover {
|
||||
background: #ffffff33;
|
||||
}
|
||||
&:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
}
|
||||
}
|
||||
.menu {
|
||||
height: 26px;
|
||||
width: 100%;
|
||||
line-height: 26px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.name {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
text-overflow: ellipsis;
|
||||
overflow-x: hidden;
|
||||
white-space: nowrap;
|
||||
// font-size: 1.1rem;
|
||||
}
|
||||
.volume {
|
||||
width: 100%;
|
||||
padding: 0 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
.icon {
|
||||
margin-right: 12px;
|
||||
span {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
:deep(*) {
|
||||
transition: none;
|
||||
}
|
||||
:deep(.el-slider__button) {
|
||||
transition: 0.3s;
|
||||
}
|
||||
.el-slider {
|
||||
margin-right: 12px;
|
||||
--el-slider-main-bg-color: #efefef;
|
||||
--el-slider-runway-bg-color: #ffffff40;
|
||||
--el-slider-button-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.music-list {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
margin: auto;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #00000080;
|
||||
backdrop-filter: blur(20px);
|
||||
z-index: 1;
|
||||
.list {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
top: calc(50% - 300px);
|
||||
left: calc(50% - 320px);
|
||||
width: 640px;
|
||||
height: 600px;
|
||||
background-color: #ffffff66;
|
||||
border-radius: 6px;
|
||||
z-index: 999;
|
||||
.close {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
right: 12px;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
display: block;
|
||||
&:hover {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
&:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 弹窗动画
|
||||
.zoom-enter-active {
|
||||
animation: zoom 0.4s ease-in-out;
|
||||
}
|
||||
.zoom-leave-active {
|
||||
animation: zoom 0.3s ease-in-out reverse;
|
||||
}
|
||||
@keyframes zoom {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(0) translateY(-600px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale(1) translateY(0);
|
||||
}
|
||||
}
|
||||
</style>
|
@ -10,7 +10,7 @@
|
||||
<span class="sm-hidden">{{ weatherData.weather.windpower }} 级</span>
|
||||
</div>
|
||||
<div class="weather" v-else>
|
||||
<span>天气获取失败</span>
|
||||
<span>天气数据获取失败</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
@ -130,11 +130,6 @@ p {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&.hover {
|
||||
opacity: 0.1;
|
||||
transform: scale(2.5);
|
||||
}
|
||||
|
||||
&.active {
|
||||
opacity: 0.5;
|
||||
transform: scale(0.5);
|
||||
|
1
src/utils/Aplayer/APlayer.min.css
vendored
1
src/utils/Aplayer/APlayer.min.css
vendored
File diff suppressed because one or more lines are too long
1
src/utils/Aplayer/APlayer.min.js
vendored
1
src/utils/Aplayer/APlayer.min.js
vendored
File diff suppressed because one or more lines are too long
@ -48,7 +48,6 @@ class Cursor {
|
||||
|
||||
refresh() {
|
||||
this.scr.remove();
|
||||
this.cursor.classList.remove("hover");
|
||||
this.cursor.classList.remove("active");
|
||||
this.pos = {
|
||||
curr: null,
|
||||
@ -62,8 +61,6 @@ class Cursor {
|
||||
}
|
||||
|
||||
init() {
|
||||
document.onmouseover = e => this.pt.includes(e.target.outerHTML) && this.cursor.classList.add("hover");
|
||||
document.onmouseout = e => this.pt.includes(e.target.outerHTML) && this.cursor.classList.remove("hover");
|
||||
document.onmousemove = e => {
|
||||
(this.pos.curr == null) && this.move(e.clientX - 8, e.clientY - 8);
|
||||
this.pos.curr = {
|
||||
|
@ -14,6 +14,7 @@
|
||||
@click="store.boxOpenState = false"
|
||||
/>
|
||||
</transition>
|
||||
6666
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
@ -0,0 +1,5 @@
|
||||
<template>
|
||||
<div class="more">
|
||||
|
||||
</div>
|
||||
</template>
|
@ -39,6 +39,7 @@ export default ({
|
||||
],
|
||||
server: {
|
||||
port: "3000",
|
||||
hmr: true,
|
||||
},
|
||||
resolve: {
|
||||
alias: [{
|
||||
|
Loading…
Reference in New Issue
Block a user