-
-
-
-
+
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
+
+
@@ -229,12 +230,10 @@ import {
getMusicUrl,
getMusicNumUrl,
getMusicNewLyric,
- songScrobble,
} from "@/api/song";
import { NIcon } from "naive-ui";
import {
KeyboardArrowUpFilled,
- MusicNoteFilled,
PlayCircleFilled,
PauseCircleFilled,
SkipNextRound,
@@ -251,27 +250,32 @@ import {
} from "@vicons/material";
import { PlayCycle, PlayOnce, ShuffleOne } from "@icon-park/vue-next";
import { storeToRefs } from "pinia";
-import { musicStore, settingStore, userStore, siteStore } from "@/store";
+import { musicStore, settingStore, siteStore } from "@/store";
+import {
+ createSound,
+ setVolume,
+ setSeek,
+ fadePlayOrPause,
+} from "@/utils/Player";
+import { getSongPlayingTime } from "@/utils/timeTools";
import { useRouter } from "vue-router";
+import { debounce } from "throttle-debounce";
+import VueSlider from "vue-slider-component";
import AddPlaylist from "@/components/DataModal/AddPlaylist.vue";
import PlayListDrawer from "@/components/DataModal/PlayListDrawer.vue";
import AllArtists from "@/components/DataList/AllArtists.vue";
import ColorThief from "colorthief";
import BigPlayer from "./BigPlayer.vue";
-import debounce from "@/utils/debounce";
+import "vue-slider-component/theme/default.css";
const router = useRouter();
const setting = settingStore();
const music = musicStore();
-const user = userStore();
const site = siteStore();
const { persistData } = storeToRefs(music);
const addPlayListRef = ref(null);
const PlayListDrawerRef = ref(null);
-// 重试次数
-const testNumber = ref(0);
-
// UNM 是否存在
const useUnmServerHas = import.meta.env.VITE_UNM_API ? true : false;
@@ -301,7 +305,9 @@ const getPlaySongData = (data, level = setting.songLevel) => {
$message.info("当前歌曲为 VIP 专享，仅可试听");
// 获取音乐地址
getMusicUrl(id, level).then((res) => {
- music.setPlaySongLink(res.data[0].url.replace(/^http:/, "https:"));
+ player.value = createSound(
+ res.data[0].url.replace(/^http:/, "https:")
+ );
});
} else {
if (useUnmServerHas && setting.useUnmServer) {
@@ -318,7 +324,7 @@ const getPlaySongData = (data, level = setting.songLevel) => {
music.setPlaySongLyric(res);
});
} catch (err) {
- if (music.getPlaylists[0] && music.getPlayState && $player) {
+ if (music.getPlaylists[0] && music.getPlayState) {
console.log("当前歌曲所有音源匹配失败：" + err);
$message.warning("当前歌曲所有音源匹配失败，跳至下一首");
music.setPlaySongIndex("next");
@@ -332,7 +338,7 @@ const getMusicNumUrlData = (id) => {
.then((res) => {
if (res.code === 200) {
console.log("替换成功：" + res.data.url.replace(/^http:/, ""));
- music.setPlaySongLink(res.data.url.replace(/^http:/, ""));
+ player.value = createSound(res.data.url.replace(/^http:/, ""));
}
})
.catch((err) => {
@@ -342,171 +348,16 @@ const getMusicNumUrlData = (id) => {
});
};
-// 歌曲进度更新事件
-const songUpdate = (e) => {
- const currentTime = e.target.currentTime;
- const duration = e.target.duration;
- music.setPlaySongTime({ currentTime, duration });
-};
-
-// 歌曲缓冲完成
-const songCanplay = () => {
- console.log("缓冲完成", music.getPlayState);
- if (music.getPlayState && $player) {
- music.setPlayState(true);
- songInOrOut("play");
- }
-};
-
-// 歌曲首次缓冲
-const songReady = () => {
- const songId = music.getPlaySongData?.id;
- const sourceId = music.getPlaySongData?.sourceId
- ? music.getPlaySongData.sourceId
- : 0;
- console.log("首次缓冲完成：" + songId + " / 来源：" + sourceId);
- // 听歌打卡
- if (user.userLogin) {
- songScrobble(songId, sourceId).catch((err) => {
- console.error("歌曲打卡失败：" + err);
- });
- }
-};
-
-// 歌曲开始播放
-const songPlay = () => {
- testNumber.value = 0;
- if (!Object.keys(music.getPlaySongData).length) {
- $message.error("音乐数据获取失败");
- return false;
- }
+// 歌曲进度条更新
+const sliderDragEnd = () => {
+ songTimeSliderUpdate(music.getPlaySongTime.barMoveDistance);
music.setPlayState(true);
- const songName = music.getPlaySongData.name;
- const songArtist = music.getPlaySongData.artist[0].name;
- $message.info(songName + " - " + songArtist, {
- icon: () =>
- h(NIcon, null, {
- default: () => h(MusicNoteFilled),
- }),
- });
- console.log("开始播放：" + songName + " - " + songArtist);
- // mediaSession
- if (
- "mediaSession" in navigator &&
- Object.keys(music.getPlaySongData).length
- ) {
- navigator.mediaSession.metadata = new MediaMetadata({
- title: music.getPlaySongData.name,
- artist: music.getPlaySongData.artist[0].name,
- album: music.getPlaySongData.album.name,
- artwork: [
- {
- src:
- music.getPlaySongData.album.picUrl.replace(/^http:/, "https:") +
- "?param=96y96",
- sizes: "96x96",
- },
- {
- src:
- music.getPlaySongData.album.picUrl.replace(/^http:/, "https:") +
- "?param=128y128",
- sizes: "128x128",
- },
- {
- src:
- music.getPlaySongData.album.picUrl.replace(/^http:/, "https:") +
- "?param=512x512",
- sizes: "512x512",
- },
- ],
- });
- navigator.mediaSession.setActionHandler("nexttrack", () => {
- music.setPlaySongIndex("next");
- });
- navigator.mediaSession.setActionHandler("previoustrack", () => {
- music.setPlaySongIndex("prev");
- });
- }
- // 写入播放历史
- music.setPlayHistory(music.getPlaySongData);
- // 播放时页面标题
- window.document.title =
- music.getPlaySongData.name +
- " - " +
- music.getPlaySongData.artist[0].name +
- " - SPlayer";
-};
-
-// 音乐渐入渐出
-const isFading = ref(false);
-const songInOrOut = (type) => {
- if (isFading.value) {
- return;
- }
- isFading.value = true;
-
- if (type === "play") {
- let volume = 0;
- $player.play();
- const interval = setInterval(() => {
- // 如果音量已经到达当前音量，则停止渐入
- if (volume >= persistData.value.playVolume) {
- clearInterval(interval);
- isFading.value = false;
- return;
- }
- // 增加音量
- volume += 0.1;
- if (volume > persistData.value.playVolume) {
- volume = persistData.value.playVolume;
- }
- $player.volume = volume;
- }, 30);
- } else if (type === "pause") {
- let volume = persistData.value.playVolume;
- const interval = setInterval(() => {
- // 如果音量已经到达最小值，则停止渐出
- if (volume <= 0) {
- clearInterval(interval);
- $player.pause();
- isFading.value = false;
- return;
- }
- // 减小音量
- volume -= 0.1;
- if (volume < 0) {
- volume = 0;
- }
- $player.volume = volume;
- }, 30);
- }
-};
-
-// 歌曲暂停
-const songPause = () => {
- console.log("音乐暂停");
- if (!$player.ended) music.setPlayState(false);
- // 更改页面标题
- $setSiteTitle();
};
-
-// 歌曲进度条更新
const songTimeSliderUpdate = (val) => {
- if ($player && music.getPlaySongTime && music.getPlaySongTime.duration)
- $player.currentTime = (music.getPlaySongTime.duration / 100) * val;
-};
-
-// 歌曲播放失败事件
-const songError = () => {
- console.error("歌曲播放失败");
- $message.error("歌曲播放失败");
- if (testNumber.value < 4) {
- if (music.getPlaylists[0]) getPlaySongData(music.getPlaySongData);
- testNumber.value++;
- } else {
- $message.error("歌曲重试次数过多，请刷新后重试");
+ if (player.value && music.getPlaySongTime?.duration) {
+ const currentTime = (music.getPlaySongTime.duration / 100) * val;
+ setSeek(player.value, currentTime);
}
- if (music.getPlayState) songInOrOut("play");
};
// 静音事件
@@ -519,8 +370,20 @@ const volumeMute = () => {
}
};
+// 歌曲更换事件
+const songChange = debounce(500, (val) => {
+ if (val === undefined) {
+ window.document.title =
+ sessionStorage.getItem("siteTitle") ?? import.meta.env.VITE_SITE_TITLE;
+ }
+ // 加载数据
+ getPlaySongData(val);
+ getPicColor(val?.album.picUrl);
+});
+
// 获取封面图主色
const getPicColor = (url) => {
+ if (!url) return false;
const imgUrl = url.replace(/^http:/, "https:") + "?param=50y50";
const img = new Image();
fetch(imgUrl)
@@ -541,29 +404,21 @@ const getPicColor = (url) => {
};
onMounted(() => {
+ // 挂载方法
+ window.$getPlaySongData = getPlaySongData;
// 获取音乐数据
if (music.getPlaylists[0] && music.getPlaySongData) {
getPlaySongData(music.getPlaySongData);
getPicColor(music.getPlaySongData.album.picUrl);
}
- // 挂载播放器
- window.$player = player.value;
- // 恢复上次播放进度
- if (music.getPlaySongTime && music.getPlaySongTime.currentTime) {
- $player.currentTime = music.getPlaySongTime.currentTime;
- }
- // 设置音量
- if ($player) $player.volume = persistData.value.playVolume;
});
// 监听当前音乐数据变化
watch(
() => music.getPlaySongData,
(val) => {
- debounce(() => {
- getPlaySongData(val);
- getPicColor(val?.album.picUrl);
- }, 500);
+ music.setPlaySongTime({ currentTime: 0, duration: 0 });
+ songChange(val);
}
);
@@ -571,7 +426,7 @@ watch(
watch(
() => persistData.value.playVolume,
(val) => {
- if ($player) $player.volume = val;
+ if (player.value) setVolume(player.value, val);
}
);
@@ -579,11 +434,13 @@ watch(
watch(
() => music.getPlayState,
(val) => {
- nextTick(() => {
- if ($player) {
- val ? songInOrOut("play") : songInOrOut("pause");
- } else {
- $message.error("播放器初始化失败，请重试");
+ nextTick().then(() => {
+ if (player.value && !music.isLoadingSong) {
+ fadePlayOrPause(
+ player.value,
+ val ? "play" : "pause",
+ persistData.value.playVolume
+ );
}
});
}
@@ -591,16 +448,21 @@ watch(