mirror of
https://github.com/algerkong/AlgerMusicPlayer.git
synced 2026-04-23 15:47:23 +08:00
✨ feat: 优化歌词页面样式 添加歌词进度显示 优化歌曲及列表加载方式 大幅提升歌曲歌词播放速度
This commit is contained in:
alger
+1
-1
@@ -43,7 +43,7 @@ export const getRecommendMusic = (params: IRecommendMusicParams) => {
|
||||
|
||||
// 获取每日推荐
|
||||
export const getDayRecommend = () => {
|
||||
return request.get<IData<IDayRecommend>>('/recommend/songs');
|
||||
return request.get<IData<IData<IDayRecommend>>>('/recommend/songs');
|
||||
};
|
||||
|
||||
// 获取最新专辑推荐
|
||||
|
||||
@@ -74,32 +74,32 @@ const store = useStore();
|
||||
const hotSingerData = ref<IHotSinger>();
|
||||
const dayRecommendData = ref<IDayRecommend>();
|
||||
const showMusic = ref(false);
|
||||
// // 加载推荐歌手
|
||||
// const loadSingerList = async () => {
|
||||
// const { data } = await getHotSinger({ offset: 0, limit: 5 });
|
||||
// hotSingerData.value = data;
|
||||
// };
|
||||
|
||||
// const loadDayRecommend = async () => {
|
||||
// const { data } = await getDayRecommend();
|
||||
// dayRecommendData.value = data.data;
|
||||
// };
|
||||
// 页面初始化
|
||||
onMounted(async () => {
|
||||
await loadData();
|
||||
});
|
||||
|
||||
const loadData = async () => {
|
||||
try {
|
||||
const [{ data: singerData }, { data: dayRecommend }] = await Promise.all([
|
||||
getHotSinger({ offset: 0, limit: 5 }),
|
||||
getDayRecommend(),
|
||||
]);
|
||||
if (dayRecommend.data) {
|
||||
singerData.artists = singerData.artists.slice(0, 4);
|
||||
// 第一个请求：获取热门歌手
|
||||
const { data: singerData } = await getHotSinger({ offset: 0, limit: 5 });
|
||||
|
||||
// 第二个请求：获取每日推荐
|
||||
try {
|
||||
const {
|
||||
data: { data: dayRecommend },
|
||||
} = await getDayRecommend();
|
||||
console.log('dayRecommend', dayRecommend);
|
||||
// 处理数据
|
||||
if (dayRecommend) {
|
||||
singerData.artists = singerData.artists.slice(0, 4);
|
||||
}
|
||||
dayRecommendData.value = dayRecommend;
|
||||
} catch (error) {
|
||||
console.error('error', error);
|
||||
}
|
||||
|
||||
hotSingerData.value = singerData;
|
||||
dayRecommendData.value = dayRecommend.data;
|
||||
} catch (error) {
|
||||
console.error('error', error);
|
||||
}
|
||||
|
||||
@@ -78,9 +78,11 @@ const imageLoad = async () => {
|
||||
if (!songImageRef.value) {
|
||||
return;
|
||||
}
|
||||
const background = await getImageBackground((songImageRef.value as any).imageRef as unknown as HTMLImageElement);
|
||||
const { backgroundColor } = await getImageBackground(
|
||||
(songImageRef.value as any).imageRef as unknown as HTMLImageElement,
|
||||
);
|
||||
// eslint-disable-next-line vue/no-mutating-props
|
||||
props.item.backgroundColor = background;
|
||||
props.item.backgroundColor = backgroundColor;
|
||||
};
|
||||
|
||||
// 播放音乐 设置音乐详情 打开音乐底栏
|
||||
|
||||
+135
-116
@@ -1,156 +1,177 @@
|
||||
import { computed, ref } from 'vue';
|
||||
|
||||
import { getMusicLrc } from '@/api/music';
|
||||
import store from '@/store';
|
||||
import { ILyric } from '@/type/lyric';
|
||||
import type { ILyricText, SongResult } from '@/type/music';
|
||||
|
||||
const windowData = window as any;
|
||||
|
||||
export const isElectron = computed(() => {
|
||||
return !!windowData.electronAPI;
|
||||
});
|
||||
export const isElectron = computed(() => !!windowData.electronAPI);
|
||||
|
||||
interface ILrcData {
|
||||
text: string;
|
||||
trText: string;
|
||||
}
|
||||
export const lrcArray = ref<ILyricText[]>([]); // 歌词数组
|
||||
export const lrcTimeArray = ref<number[]>([]); // 歌词时间数组
|
||||
export const nowTime = ref(0); // 当前播放时间
|
||||
export const allTime = ref(0); // 总播放时间
|
||||
export const nowIndex = ref(0); // 当前播放歌词
|
||||
export const correctionTime = ref(0.4); // 歌词矫正时间Correction time
|
||||
export const currentLrcProgress = ref(0); // 来存储当前歌词的进度
|
||||
export const audio = ref<HTMLAudioElement>(); // 音频对象
|
||||
export const playMusic = computed(() => store.state.playMusic as SongResult); // 当前播放歌曲
|
||||
|
||||
export const lrcData = ref<ILyric>();
|
||||
export const newLrcIndex = ref<number>(0);
|
||||
export const lrcArray = ref<Array<ILrcData>>([]);
|
||||
export const lrcTimeArray = ref<Array<Number>>([]);
|
||||
|
||||
export const parseTime = (timeString: string) => {
|
||||
const [minutes, seconds] = timeString.split(':');
|
||||
return Number(minutes) * 60 + Number(seconds);
|
||||
};
|
||||
|
||||
const TIME_REGEX = /(\d{2}:\d{2}(\.\d*)?)/g;
|
||||
const LRC_REGEX = /(\[(\d{2}):(\d{2})(\.(\d*))?\])/g;
|
||||
|
||||
function parseLyricLine(lyricLine: string) {
|
||||
const timeText = lyricLine.match(TIME_REGEX)?.[0] || '';
|
||||
const time = parseTime(timeText);
|
||||
const text = lyricLine.replace(LRC_REGEX, '').trim();
|
||||
return { time, text };
|
||||
}
|
||||
|
||||
interface ILyricText {
|
||||
text: string;
|
||||
trText: string;
|
||||
}
|
||||
|
||||
function parseLyrics(lyricsString: string) {
|
||||
const lines = lyricsString.split('\n');
|
||||
const lyrics: Array<ILyricText> = [];
|
||||
const times: number[] = [];
|
||||
lines.forEach((line) => {
|
||||
const { time, text } = parseLyricLine(line);
|
||||
times.push(time);
|
||||
lyrics.push({ text, trText: '' });
|
||||
});
|
||||
return { lyrics, times };
|
||||
}
|
||||
|
||||
export const loadLrc = async (playMusicId: number): Promise<void> => {
|
||||
try {
|
||||
const { data } = await getMusicLrc(playMusicId);
|
||||
const { lyrics, times } = parseLyrics(data.lrc.lyric);
|
||||
let tlyric: {
|
||||
[key: string]: string;
|
||||
} = {};
|
||||
if (data.tlyric.lyric) {
|
||||
const { lyrics: tLyrics, times: tTimes } = parseLyrics(data.tlyric.lyric);
|
||||
tlyric = tLyrics.reduce((acc: any, cur, index) => {
|
||||
acc[tTimes[index]] = cur.text;
|
||||
return acc;
|
||||
}, {});
|
||||
}
|
||||
if (Object.keys(tlyric).length) {
|
||||
lyrics.forEach((item, index) => {
|
||||
item.trText = item.text ? tlyric[times[index].toString()] : '';
|
||||
});
|
||||
}
|
||||
lrcTimeArray.value = times;
|
||||
lrcArray.value = lyrics;
|
||||
} catch (err) {
|
||||
console.error('err', err);
|
||||
}
|
||||
};
|
||||
|
||||
// 歌词矫正时间Correction time
|
||||
const correctionTime = ref(0.4);
|
||||
watch(
|
||||
() => store.state.playMusic,
|
||||
() => {
|
||||
nextTick(() => {
|
||||
lrcArray.value = playMusic.value.lyric?.lrcArray || [];
|
||||
lrcTimeArray.value = playMusic.value.lyric?.lrcTimeArray || [];
|
||||
});
|
||||
},
|
||||
{
|
||||
deep: true,
|
||||
},
|
||||
);
|
||||
const isPlaying = computed(() => store.state.play as boolean);
|
||||
|
||||
// 增加矫正时间
|
||||
export const addCorrectionTime = (time: number) => {
|
||||
correctionTime.value += time;
|
||||
};
|
||||
export const addCorrectionTime = (time: number) => (correctionTime.value += time);
|
||||
|
||||
// 减少矫正时间
|
||||
export const reduceCorrectionTime = (time: number) => {
|
||||
correctionTime.value -= time;
|
||||
};
|
||||
export const reduceCorrectionTime = (time: number) => (correctionTime.value -= time);
|
||||
|
||||
export const isCurrentLrc = (index: number, time: number) => {
|
||||
const currentTime = Number(lrcTimeArray.value[index]);
|
||||
const nextTime = Number(lrcTimeArray.value[index + 1]);
|
||||
// 获取当前播放歌词
|
||||
export const isCurrentLrc = (index: number, time: number): boolean => {
|
||||
const currentTime = lrcTimeArray.value[index];
|
||||
const nextTime = lrcTimeArray.value[index + 1];
|
||||
const nowTime = time + correctionTime.value;
|
||||
const isTrue = nowTime > currentTime && nowTime < nextTime;
|
||||
if (isTrue) {
|
||||
newLrcIndex.value = index;
|
||||
}
|
||||
return isTrue;
|
||||
};
|
||||
|
||||
export const nowTime = ref(0);
|
||||
export const allTime = ref(0);
|
||||
export const nowIndex = ref(0);
|
||||
|
||||
export const getLrcIndex = (time: number) => {
|
||||
// 获取当前播放歌词INDEX
|
||||
export const getLrcIndex = (time: number): number => {
|
||||
for (let i = 0; i < lrcTimeArray.value.length; i++) {
|
||||
if (isCurrentLrc(i, time)) {
|
||||
nowIndex.value = i || nowIndex.value;
|
||||
nowIndex.value = i;
|
||||
return i;
|
||||
}
|
||||
}
|
||||
return nowIndex.value;
|
||||
};
|
||||
|
||||
// 设置当前播放时间
|
||||
export const setAudioTime = (index: number, audio: HTMLAudioElement) => {
|
||||
audio.currentTime = lrcTimeArray.value[index] as number;
|
||||
audio.play();
|
||||
// 获取当前播放歌词进度
|
||||
const currentLrcTiming = computed(() => {
|
||||
const start = lrcTimeArray.value[nowIndex.value] || 0;
|
||||
const end = lrcTimeArray.value[nowIndex.value + 1] || start + 1;
|
||||
return { start, end };
|
||||
});
|
||||
|
||||
// 获取歌词样式
|
||||
export const getLrcStyle = (index: number) => {
|
||||
if (index === nowIndex.value) {
|
||||
return {
|
||||
backgroundImage: `linear-gradient(to right, #ffffff ${currentLrcProgress.value}%, #ffffff8a ${currentLrcProgress.value}%)`,
|
||||
backgroundClip: 'text',
|
||||
WebkitBackgroundClip: 'text',
|
||||
color: 'transparent',
|
||||
transition: 'background-image 0.1s linear',
|
||||
};
|
||||
}
|
||||
return {};
|
||||
};
|
||||
|
||||
// 计算这个歌词的播放时间
|
||||
const getLrcTime = (index: number) => {
|
||||
return Number(lrcTimeArray.value[index]);
|
||||
watch(nowTime, (newTime) => {
|
||||
const newIndex = getLrcIndex(newTime);
|
||||
if (newIndex !== nowIndex.value) {
|
||||
nowIndex.value = newIndex;
|
||||
currentLrcProgress.value = 0; // 重置进度
|
||||
}
|
||||
});
|
||||
|
||||
// 播放进度
|
||||
export const useLyricProgress = () => {
|
||||
let animationFrameId: number | null = null;
|
||||
|
||||
const updateProgress = () => {
|
||||
if (!isPlaying.value) return;
|
||||
audio.value = audio.value || (document.querySelector('#MusicAudio') as HTMLAudioElement);
|
||||
if (!audio.value) return;
|
||||
const { start, end } = currentLrcTiming.value;
|
||||
const duration = end - start;
|
||||
const elapsed = audio.value.currentTime - start;
|
||||
currentLrcProgress.value = Math.min(Math.max((elapsed / duration) * 100, 0), 100);
|
||||
|
||||
animationFrameId = requestAnimationFrame(updateProgress);
|
||||
};
|
||||
|
||||
const startProgressAnimation = () => {
|
||||
if (!animationFrameId && isPlaying.value) {
|
||||
updateProgress();
|
||||
}
|
||||
};
|
||||
|
||||
const stopProgressAnimation = () => {
|
||||
if (animationFrameId) {
|
||||
cancelAnimationFrame(animationFrameId);
|
||||
animationFrameId = null;
|
||||
}
|
||||
};
|
||||
|
||||
watch(isPlaying, (newIsPlaying) => {
|
||||
if (newIsPlaying) {
|
||||
startProgressAnimation();
|
||||
} else {
|
||||
stopProgressAnimation();
|
||||
}
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
if (isPlaying.value) {
|
||||
startProgressAnimation();
|
||||
}
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
stopProgressAnimation();
|
||||
});
|
||||
|
||||
return {
|
||||
currentLrcProgress,
|
||||
getLrcStyle,
|
||||
};
|
||||
};
|
||||
|
||||
// 设置当前播放时间
|
||||
export const setAudioTime = (index: number, audio: HTMLAudioElement) => {
|
||||
audio.currentTime = lrcTimeArray.value[index];
|
||||
audio.play();
|
||||
};
|
||||
|
||||
// 获取当前播放的歌词
|
||||
export const getCurrentLrc = () => {
|
||||
const index = getLrcIndex(nowTime.value);
|
||||
const currentLrc = lrcArray.value[index];
|
||||
const nextLrc = lrcArray.value[index + 1];
|
||||
return { currentLrc, nextLrc };
|
||||
return {
|
||||
currentLrc: lrcArray.value[index],
|
||||
nextLrc: lrcArray.value[index + 1],
|
||||
};
|
||||
};
|
||||
|
||||
// 获取一句歌词播放时间是 几秒到几秒
|
||||
export const getLrcTimeRange = (index: number) => {
|
||||
const currentTime = Number(lrcTimeArray.value[index]);
|
||||
const nextTime = Number(lrcTimeArray.value[index + 1]);
|
||||
return { currentTime, nextTime };
|
||||
};
|
||||
export const getLrcTimeRange = (index: number) => ({
|
||||
currentTime: lrcTimeArray.value[index],
|
||||
nextTime: lrcTimeArray.value[index + 1],
|
||||
});
|
||||
|
||||
export const sendLyricToWin = (isPlay: boolean = true) => {
|
||||
if (!isElectron.value) return;
|
||||
|
||||
try {
|
||||
if (!isElectron.value) {
|
||||
return;
|
||||
}
|
||||
// 设置lyricWinData 获取 当前播放的两句歌词 和歌词时间
|
||||
let lyricWinData = null;
|
||||
if (lrcArray.value.length > 0) {
|
||||
const nowIndex = getLrcIndex(nowTime.value);
|
||||
const { currentLrc, nextLrc } = getCurrentLrc();
|
||||
const { currentTime, nextTime } = getLrcTimeRange(nowIndex);
|
||||
lyricWinData = {
|
||||
// 设置lyricWinData 获取 当前播放的两句歌词 和歌词时间
|
||||
const lyricWinData = {
|
||||
currentLrc,
|
||||
nextLrc,
|
||||
currentTime,
|
||||
@@ -160,20 +181,18 @@ export const sendLyricToWin = (isPlay: boolean = true) => {
|
||||
lrcArray: lrcArray.value,
|
||||
nowTime: nowTime.value,
|
||||
allTime: allTime.value,
|
||||
startCurrentTime: getLrcTime(nowIndex),
|
||||
startCurrentTime: lrcTimeArray.value[nowIndex],
|
||||
isPlay,
|
||||
};
|
||||
windowData.electronAPI.sendLyric(JSON.stringify(lyricWinData));
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('error', error);
|
||||
console.error('Error sending lyric to window:', error);
|
||||
}
|
||||
};
|
||||
|
||||
export const openLyric = () => {
|
||||
if (!isElectron.value) {
|
||||
return;
|
||||
}
|
||||
if (!isElectron.value) return;
|
||||
windowData.electronAPI.openLyric();
|
||||
sendLyricToWin();
|
||||
};
|
||||
|
||||
@@ -0,0 +1,175 @@
|
||||
import { getMusicLrc, getMusicUrl, getParsingMusicUrl } from '@/api/music';
|
||||
import { useMusicHistory } from '@/hooks/MusicHistoryHook';
|
||||
import type { ILyric, ILyricText, SongResult } from '@/type/music';
|
||||
import { getImgUrl, getMusicProxyUrl } from '@/utils';
|
||||
import { getImageLinearBackground } from '@/utils/linearColor';
|
||||
|
||||
const musicHistory = useMusicHistory();
|
||||
|
||||
// 获取歌曲url
|
||||
const getSongUrl = async (id: number) => {
|
||||
const { data } = await getMusicUrl(id);
|
||||
let url = '';
|
||||
try {
|
||||
if (data.data[0].freeTrialInfo || !data.data[0].url) {
|
||||
const res = await getParsingMusicUrl(id);
|
||||
url = res.data.data.url;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('error', error);
|
||||
}
|
||||
url = url || data.data[0].url;
|
||||
return getMusicProxyUrl(url);
|
||||
};
|
||||
|
||||
const getSongDetail = async (playMusic: SongResult) => {
|
||||
if (playMusic.playMusicUrl) {
|
||||
return playMusic;
|
||||
}
|
||||
playMusic.playLoading = true;
|
||||
const playMusicUrl = await getSongUrl(playMusic.id);
|
||||
const { backgroundColor, primaryColor } =
|
||||
playMusic.backgroundColor && playMusic.primaryColor
|
||||
? playMusic
|
||||
: await getImageLinearBackground(getImgUrl(playMusic?.picUrl, '30y30'));
|
||||
|
||||
playMusic.playLoading = false;
|
||||
return { ...playMusic, playMusicUrl, backgroundColor, primaryColor };
|
||||
};
|
||||
|
||||
// 加载 当前歌曲 歌曲列表数据 下一首mp3预加载 歌词数据
|
||||
export const useMusicListHook = () => {
|
||||
const handlePlayMusic = async (state: any, playMusic: SongResult) => {
|
||||
const updatedPlayMusic = await getSongDetail(playMusic);
|
||||
state.playMusic = updatedPlayMusic;
|
||||
state.playMusicUrl = updatedPlayMusic.playMusicUrl;
|
||||
state.play = true;
|
||||
loadLrcAsync(state, updatedPlayMusic.id);
|
||||
musicHistory.addMusic(state.playMusic);
|
||||
const playListIndex = state.playList.findIndex((item: SongResult) => item.id === playMusic.id);
|
||||
state.playListIndex = playListIndex;
|
||||
// 请求后续五首歌曲的详情
|
||||
fetchSongs(state, playListIndex + 1, playListIndex + 6);
|
||||
};
|
||||
|
||||
// 用于预加载下一首歌曲的 MP3 数据
|
||||
const preloadNextSong = (nextSongUrl: string) => {
|
||||
const audio = new Audio(nextSongUrl);
|
||||
audio.preload = 'auto'; // 设置预加载
|
||||
audio.load(); // 手动加载
|
||||
};
|
||||
|
||||
const fetchSongs = async (state: any, startIndex: number, endIndex: number) => {
|
||||
const songs = state.playList.slice(Math.max(0, startIndex), Math.min(endIndex, state.playList.length));
|
||||
|
||||
const detailedSongs = await Promise.all(
|
||||
songs.map(async (song: SongResult) => {
|
||||
// 如果歌曲详情已经存在，就不重复请求
|
||||
if (!song.playMusicUrl) {
|
||||
return await getSongDetail(song);
|
||||
}
|
||||
return song;
|
||||
}),
|
||||
);
|
||||
// 加载下一首的歌词
|
||||
const nextSong = detailedSongs[0];
|
||||
if (!(nextSong.lyric && nextSong.lyric.lrcTimeArray.length > 0)) {
|
||||
nextSong.lyric = await loadLrc(nextSong.id);
|
||||
}
|
||||
|
||||
// 更新播放列表中的歌曲详情
|
||||
detailedSongs.forEach((song, index) => {
|
||||
state.playList[startIndex + index] = song;
|
||||
});
|
||||
preloadNextSong(nextSong.playMusicUrl);
|
||||
};
|
||||
|
||||
const nextPlay = async (state: any) => {
|
||||
if (state.playList.length === 0) {
|
||||
state.play = true;
|
||||
return;
|
||||
}
|
||||
const playListIndex = (state.playListIndex + 1) % state.playList.length;
|
||||
await handlePlayMusic(state, state.playList[playListIndex]);
|
||||
};
|
||||
|
||||
const prevPlay = async (state: any) => {
|
||||
if (state.playList.length === 0) {
|
||||
state.play = true;
|
||||
return;
|
||||
}
|
||||
const playListIndex = (state.playListIndex - 1 + state.playList.length) % state.playList.length;
|
||||
await handlePlayMusic(state, state.playList[playListIndex]);
|
||||
await fetchSongs(state, playListIndex - 5, playListIndex);
|
||||
};
|
||||
|
||||
const parseTime = (timeString: string): number => {
|
||||
const [minutes, seconds] = timeString.split(':');
|
||||
return Number(minutes) * 60 + Number(seconds);
|
||||
};
|
||||
|
||||
const parseLyricLine = (lyricLine: string): { time: number; text: string } => {
|
||||
const TIME_REGEX = /(\d{2}:\d{2}(\.\d*)?)/g;
|
||||
const LRC_REGEX = /(\[(\d{2}):(\d{2})(\.(\d*))?\])/g;
|
||||
const timeText = lyricLine.match(TIME_REGEX)?.[0] || '';
|
||||
const time = parseTime(timeText);
|
||||
const text = lyricLine.replace(LRC_REGEX, '').trim();
|
||||
return { time, text };
|
||||
};
|
||||
|
||||
const parseLyrics = (lyricsString: string): { lyrics: ILyricText[]; times: number[] } => {
|
||||
const lines = lyricsString.split('\n');
|
||||
const lyrics: ILyricText[] = [];
|
||||
const times: number[] = [];
|
||||
lines.forEach((line) => {
|
||||
const { time, text } = parseLyricLine(line);
|
||||
times.push(time);
|
||||
lyrics.push({ text, trText: '' });
|
||||
});
|
||||
return { lyrics, times };
|
||||
};
|
||||
|
||||
const loadLrc = async (playMusicId: number): Promise<ILyric> => {
|
||||
try {
|
||||
const { data } = await getMusicLrc(playMusicId);
|
||||
const { lyrics, times } = parseLyrics(data.lrc.lyric);
|
||||
const tlyric: Record<string, string> = {};
|
||||
|
||||
if (data.tlyric.lyric) {
|
||||
const { lyrics: tLyrics, times: tTimes } = parseLyrics(data.tlyric.lyric);
|
||||
tLyrics.forEach((lyric, index) => {
|
||||
tlyric[tTimes[index].toString()] = lyric.text;
|
||||
});
|
||||
}
|
||||
|
||||
lyrics.forEach((item, index) => {
|
||||
item.trText = item.text ? tlyric[times[index].toString()] || '' : '';
|
||||
});
|
||||
return {
|
||||
lrcTimeArray: times,
|
||||
lrcArray: lyrics,
|
||||
};
|
||||
} catch (err) {
|
||||
console.error('Error loading lyrics:', err);
|
||||
return {
|
||||
lrcTimeArray: [],
|
||||
lrcArray: [],
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
// 异步加载歌词的方法
|
||||
const loadLrcAsync = async (state: any, playMusicId: number) => {
|
||||
if (state.playMusic.lyric && state.playMusic.lyric.lrcTimeArray.length > 0) {
|
||||
return;
|
||||
}
|
||||
const lyrics = await loadLrc(playMusicId);
|
||||
state.playMusic.lyric = lyrics;
|
||||
};
|
||||
|
||||
return {
|
||||
handlePlayMusic,
|
||||
nextPlay,
|
||||
prevPlay,
|
||||
};
|
||||
};
|
||||
@@ -1,69 +1,72 @@
|
||||
<template>
|
||||
<n-drawer :show="musicFull" height="100vh" placement="bottom" :style="{ backgroundColor: 'transparent' }">
|
||||
<n-drawer :show="musicFull" height="100vh" placement="bottom" :style="{ background: background }">
|
||||
<div id="drawer-target">
|
||||
<div class="drawer-back" :style="{ background: background }"></div>
|
||||
<div class="drawer-back"></div>
|
||||
<div class="music-img">
|
||||
<n-image ref="PicImgRef" :src="getImgUrl(playMusic?.picUrl, '300y300')" class="img" lazy preview-disabled />
|
||||
<div>
|
||||
<div class="music-content-name">{{ playMusic.name }}</div>
|
||||
<div class="music-content-singer">
|
||||
<span v-for="(item, index) in playMusic.song.artists" :key="index">
|
||||
{{ item.name }}{{ index < playMusic.song.artists.length - 1 ? ' / ' : '' }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="music-content">
|
||||
<div class="music-content-name">{{ playMusic.name }}</div>
|
||||
<div class="music-content-singer">
|
||||
<span v-for="(item, index) in playMusic.song.artists" :key="index">
|
||||
{{ item.name }}{{ index < playMusic.song.artists.length - 1 ? ' / ' : '' }}
|
||||
</span>
|
||||
</div>
|
||||
<n-layout
|
||||
ref="lrcSider"
|
||||
class="music-lrc"
|
||||
style="height: 55vh"
|
||||
style="height: 60vh"
|
||||
:native-scrollbar="false"
|
||||
@mouseover="mouseOverLayout"
|
||||
@mouseleave="mouseLeaveLayout"
|
||||
>
|
||||
<template v-for="(item, index) in lrcArray" :key="index">
|
||||
<div ref="lrcContainer">
|
||||
<div
|
||||
v-for="(item, index) in lrcArray"
|
||||
:id="`music-lrc-text-${index}`"
|
||||
:key="index"
|
||||
class="music-lrc-text"
|
||||
:class="{ 'now-text': isCurrentLrc(index, nowTime) }"
|
||||
:class="{ 'now-text': index === nowIndex }"
|
||||
@click="setAudioTime(index, audio)"
|
||||
>
|
||||
<div>{{ item.text }}</div>
|
||||
<span :style="getLrcStyle(index)">{{ item.text }}</span>
|
||||
<div class="music-lrc-text-tr">{{ item.trText }}</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</n-layout>
|
||||
<!-- 时间矫正 -->
|
||||
<div class="music-content-time">
|
||||
<!-- <div class="music-content-time">
|
||||
<n-button @click="reduceCorrectionTime(0.2)">-</n-button>
|
||||
<n-button @click="addCorrectionTime(0.2)">+</n-button>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</n-drawer>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useStore } from 'vuex';
|
||||
import { useDebounceFn } from '@vueuse/core';
|
||||
|
||||
import {
|
||||
addCorrectionTime,
|
||||
isCurrentLrc,
|
||||
lrcArray,
|
||||
newLrcIndex,
|
||||
nowTime,
|
||||
nowIndex,
|
||||
playMusic,
|
||||
reduceCorrectionTime,
|
||||
setAudioTime,
|
||||
useLyricProgress,
|
||||
} from '@/hooks/MusicHook';
|
||||
import type { SongResult } from '@/type/music';
|
||||
import { getImgUrl } from '@/utils';
|
||||
|
||||
const store = useStore();
|
||||
const { getLrcStyle } = useLyricProgress();
|
||||
|
||||
// 播放的音乐信息
|
||||
const playMusic = computed(() => store.state.playMusic as SongResult);
|
||||
// const isPlaying = computed(() => store.state.play as boolean);
|
||||
// 获取歌词滚动dom
|
||||
const lrcSider = ref<any>(null);
|
||||
const isMouse = ref(false);
|
||||
const lrcContainer = ref<HTMLElement | null>(null);
|
||||
|
||||
const props = defineProps({
|
||||
musicFull: {
|
||||
@@ -81,21 +84,44 @@ const props = defineProps({
|
||||
});
|
||||
|
||||
// 歌词滚动方法
|
||||
const lrcScroll = () => {
|
||||
if (props.musicFull && !isMouse.value) {
|
||||
const top = newLrcIndex.value * 60 - 225;
|
||||
lrcSider.value.scrollTo({ top, behavior: 'smooth' });
|
||||
const lrcScroll = (behavior = 'smooth') => {
|
||||
const nowEl = document.querySelector(`#music-lrc-text-${nowIndex.value}`);
|
||||
if (props.musicFull && !isMouse.value && nowEl && lrcContainer.value) {
|
||||
const containerRect = lrcContainer.value.getBoundingClientRect();
|
||||
const nowElRect = nowEl.getBoundingClientRect();
|
||||
const relativeTop = nowElRect.top - containerRect.top;
|
||||
const scrollTop = relativeTop - lrcSider.value.$el.getBoundingClientRect().height / 2;
|
||||
lrcSider.value.scrollTo({ top: scrollTop, behavior });
|
||||
}
|
||||
};
|
||||
|
||||
const debouncedLrcScroll = useDebounceFn(lrcScroll, 200);
|
||||
|
||||
const mouseOverLayout = () => {
|
||||
isMouse.value = true;
|
||||
};
|
||||
const mouseLeaveLayout = () => {
|
||||
setTimeout(() => {
|
||||
isMouse.value = false;
|
||||
}, 3000);
|
||||
lrcScroll();
|
||||
}, 2000);
|
||||
};
|
||||
|
||||
watch(nowIndex, () => {
|
||||
debouncedLrcScroll();
|
||||
});
|
||||
|
||||
watch(
|
||||
() => props.musicFull,
|
||||
() => {
|
||||
if (props.musicFull) {
|
||||
nextTick(() => {
|
||||
lrcScroll('instant');
|
||||
});
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
defineExpose({
|
||||
lrcScroll,
|
||||
});
|
||||
@@ -112,15 +138,11 @@ defineExpose({
|
||||
}
|
||||
.drawer-back {
|
||||
@apply absolute bg-cover bg-center;
|
||||
// filter: brightness(80%);
|
||||
z-index: -1;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
top: -50%;
|
||||
left: -50%;
|
||||
// animation: round 20s linear infinite;
|
||||
// will-change: transform;
|
||||
// transform: translateZ(0);
|
||||
}
|
||||
|
||||
.drawer-back.paused {
|
||||
@@ -128,30 +150,28 @@ defineExpose({
|
||||
}
|
||||
|
||||
#drawer-target {
|
||||
@apply top-0 left-0 absolute w-full h-full overflow-hidden rounded px-24 pt-24 pb-48 flex items-center;
|
||||
@apply top-0 left-0 absolute overflow-hidden rounded px-24 flex items-center justify-center w-full h-full pb-8;
|
||||
backdrop-filter: blur(20px);
|
||||
background-color: rgba(0, 0, 0, 0.747);
|
||||
animation-duration: 300ms;
|
||||
|
||||
.music-img {
|
||||
@apply flex-1 flex justify-center mr-24;
|
||||
|
||||
@apply flex-1 flex justify-center mr-16 flex-col;
|
||||
max-width: 360px;
|
||||
max-height: 360px;
|
||||
.img {
|
||||
width: 350px;
|
||||
height: 350px;
|
||||
@apply rounded-xl;
|
||||
@apply rounded-xl w-full h-full shadow-2xl;
|
||||
}
|
||||
}
|
||||
|
||||
.music-content {
|
||||
@apply flex flex-col justify-center items-center;
|
||||
@apply flex flex-col justify-center items-center relative;
|
||||
|
||||
&-name {
|
||||
@apply font-bold text-3xl py-2;
|
||||
@apply font-bold text-xl pb-1 pt-4;
|
||||
}
|
||||
|
||||
&-singer {
|
||||
@apply text-base py-2;
|
||||
@apply text-base;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -159,25 +179,25 @@ defineExpose({
|
||||
display: none;
|
||||
@apply flex justify-center items-center;
|
||||
}
|
||||
|
||||
.music-lrc {
|
||||
background-color: inherit;
|
||||
width: 500px;
|
||||
height: 550px;
|
||||
.now-text {
|
||||
@apply text-green-500;
|
||||
}
|
||||
&-text {
|
||||
@apply text-white text-lg flex flex-col justify-center items-center cursor-pointer font-bold;
|
||||
height: 60px;
|
||||
transition: all 0.2s ease-out;
|
||||
|
||||
@apply text-2xl cursor-pointer font-bold px-2 py-4;
|
||||
color: #ffffff8a;
|
||||
// transition: all 0.5s ease;
|
||||
span {
|
||||
padding-right: 100px;
|
||||
}
|
||||
&:hover {
|
||||
@apply font-bold text-green-500;
|
||||
@apply font-bold opacity-100 rounded-xl;
|
||||
background-color: #ffffff26;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&-tr {
|
||||
@apply text-sm font-normal;
|
||||
@apply font-normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -80,6 +80,7 @@
|
||||
raw
|
||||
:show-arrow="false"
|
||||
:delay="200"
|
||||
arrow-wrapper-style=" border-radius:1.5rem"
|
||||
@update-show="scrollToPlayList"
|
||||
>
|
||||
<template #trigger>
|
||||
@@ -111,7 +112,7 @@ import { useTemplateRef } from 'vue';
|
||||
import { useStore } from 'vuex';
|
||||
|
||||
import SongItem from '@/components/common/SongItem.vue';
|
||||
import { allTime, isElectron, loadLrc, nowTime, openLyric, sendLyricToWin } from '@/hooks/MusicHook';
|
||||
import { allTime, getCurrentLrc, isElectron, nowTime, openLyric, sendLyricToWin } from '@/hooks/MusicHook';
|
||||
import type { SongResult } from '@/type/music';
|
||||
import { getImgUrl, secondToMinute, setAnimationClass } from '@/utils';
|
||||
|
||||
@@ -134,7 +135,6 @@ const background = ref('#000');
|
||||
watch(
|
||||
() => store.state.playMusic,
|
||||
async () => {
|
||||
loadLrc(playMusic.value.id);
|
||||
background.value = playMusic.value.backgroundColor as string;
|
||||
},
|
||||
{ immediate: true, deep: true },
|
||||
@@ -209,15 +209,16 @@ function handleGetAudioTime(this: HTMLAudioElement) {
|
||||
// 监听音频播放的实时时间事件
|
||||
const audio = this as HTMLAudioElement;
|
||||
// 获取当前播放时间
|
||||
nowTime.value = Math.floor(audio.currentTime);
|
||||
nowTime.value = audio.currentTime;
|
||||
getCurrentLrc();
|
||||
// 获取总时间
|
||||
allTime.value = audio.duration;
|
||||
// 获取音量
|
||||
audioVolume.value = audio.volume;
|
||||
sendLyricToWin(store.state.isPlay);
|
||||
if (musicFullVisible.value) {
|
||||
MusicFullRef.value?.lrcScroll();
|
||||
}
|
||||
// if (musicFullVisible.value) {
|
||||
// MusicFullRef.value?.lrcScroll();
|
||||
// }
|
||||
}
|
||||
|
||||
// 播放暂停按钮事件
|
||||
@@ -273,7 +274,8 @@ const scrollToPlayList = (val: boolean) => {
|
||||
}
|
||||
|
||||
.play-bar-opcity {
|
||||
background-color: rgba(0, 0, 0, 0.218);
|
||||
@apply bg-transparent;
|
||||
box-shadow: 0 0 20px 5px #0000001d;
|
||||
}
|
||||
|
||||
.play-bar-img {
|
||||
@@ -374,8 +376,4 @@ const scrollToPlayList = (val: boolean) => {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.n-popover) {
|
||||
box-shadow: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
+6
-56
@@ -1,11 +1,8 @@
|
||||
import { createStore } from 'vuex';
|
||||
|
||||
import { getMusicUrl, getParsingMusicUrl } from '@/api/music';
|
||||
import { useMusicHistory } from '@/hooks/MusicHistoryHook';
|
||||
import { useMusicListHook } from '@/hooks/MusicListHook';
|
||||
import homeRouter from '@/router/home';
|
||||
import type { SongResult } from '@/type/music';
|
||||
import { getImgUrl, getMusicProxyUrl } from '@/utils';
|
||||
import { getImageLinearBackground } from '@/utils/linearColor';
|
||||
|
||||
interface State {
|
||||
menus: any[];
|
||||
@@ -38,17 +35,16 @@ const state: State = {
|
||||
searchValue: '',
|
||||
searchType: 1,
|
||||
};
|
||||
|
||||
const windowData = window as any;
|
||||
|
||||
const musicHistory = useMusicHistory();
|
||||
const { handlePlayMusic, nextPlay, prevPlay } = useMusicListHook();
|
||||
|
||||
const mutations = {
|
||||
setMenus(state: State, menus: any[]) {
|
||||
state.menus = menus;
|
||||
},
|
||||
async setPlay(state: State, playMusic: SongResult) {
|
||||
await getSongDetail(state, playMusic);
|
||||
await handlePlayMusic(state, playMusic);
|
||||
},
|
||||
setIsPlay(state: State, isPlay: boolean) {
|
||||
state.isPlay = isPlay;
|
||||
@@ -61,63 +57,17 @@ const mutations = {
|
||||
state.playList = playList;
|
||||
},
|
||||
async nextPlay(state: State) {
|
||||
if (state.playList.length === 0) {
|
||||
state.play = true;
|
||||
return;
|
||||
}
|
||||
const playListIndex = (state.playListIndex + 1) % state.playList.length;
|
||||
await getSongDetail(state, state.playList[playListIndex]);
|
||||
await nextPlay(state);
|
||||
},
|
||||
async prevPlay(state: State) {
|
||||
if (state.playList.length === 0) {
|
||||
state.play = true;
|
||||
return;
|
||||
}
|
||||
const playListIndex = (state.playListIndex - 1 + state.playList.length) % state.playList.length;
|
||||
await getSongDetail(state, state.playList[playListIndex]);
|
||||
await prevPlay(state);
|
||||
},
|
||||
async setSetData(state: State, setData: any) {
|
||||
state.setData = setData;
|
||||
windowData.electron.ipcRenderer.setStoreValue('set', JSON.parse(JSON.stringify(setData)));
|
||||
window.electron && window.electron.ipcRenderer.setStoreValue('set', JSON.parse(JSON.stringify(setData)));
|
||||
},
|
||||
};
|
||||
|
||||
const getSongUrl = async (id: number) => {
|
||||
const { data } = await getMusicUrl(id);
|
||||
let url = '';
|
||||
try {
|
||||
if (data.data[0].freeTrialInfo || !data.data[0].url) {
|
||||
const res = await getParsingMusicUrl(id);
|
||||
url = res.data.data.url;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('error', error);
|
||||
}
|
||||
url = url || data.data[0].url;
|
||||
return getMusicProxyUrl(url);
|
||||
};
|
||||
|
||||
const updatePlayMusic = async (state: State) => {
|
||||
state.playMusic = state.playList[state.playListIndex];
|
||||
state.playMusicUrl = await getSongUrl(state.playMusic.id);
|
||||
state.play = true;
|
||||
musicHistory.addMusic(state.playMusic);
|
||||
};
|
||||
|
||||
const getSongDetail = async (state: State, playMusic: SongResult) => {
|
||||
state.playMusic.playLoading = true;
|
||||
state.playMusicUrl = await getSongUrl(playMusic.id);
|
||||
const backgroundColor = playMusic.backgroundColor
|
||||
? playMusic.backgroundColor
|
||||
: await getImageLinearBackground(getImgUrl(playMusic?.picUrl, '30y30'));
|
||||
state.playMusic = { ...playMusic, backgroundColor };
|
||||
// state.playMusic = { ...playMusic };
|
||||
state.play = true;
|
||||
musicHistory.addMusic(playMusic);
|
||||
state.playListIndex = state.playList.findIndex((item) => item.id === playMusic.id);
|
||||
state.playMusic.playLoading = false;
|
||||
};
|
||||
|
||||
const store = createStore({
|
||||
state,
|
||||
mutations,
|
||||
|
||||
@@ -3,6 +3,14 @@ export interface IRecommendMusic {
|
||||
category: number;
|
||||
result: SongResult[];
|
||||
}
|
||||
export interface ILyricText {
|
||||
text: string;
|
||||
trText: string;
|
||||
}
|
||||
export interface ILyric {
|
||||
lrcTimeArray: number[];
|
||||
lrcArray: ILyricText[];
|
||||
}
|
||||
|
||||
export interface SongResult {
|
||||
id: number;
|
||||
@@ -19,6 +27,9 @@ export interface SongResult {
|
||||
ar?: Artist[];
|
||||
al?: Album;
|
||||
backgroundColor?: string;
|
||||
primaryColor?: string;
|
||||
playMusicUrl?: string;
|
||||
lyric?: ILyric;
|
||||
}
|
||||
|
||||
export interface Song {
|
||||
|
||||
@@ -51,6 +51,7 @@ export const getIsMc = () => {
|
||||
if (windowData.electron.ipcRenderer.getStoreValue('set').isProxy) {
|
||||
return true;
|
||||
}
|
||||
if(window.location.origin.includes('localhost')){}
|
||||
return false;
|
||||
};
|
||||
const ProxyUrl = import.meta.env.VITE_API_PROXY || 'http://110.42.251.190:9856';
|
||||
|
||||
@@ -1,20 +1,37 @@
|
||||
export const getImageLinearBackground = async (imageSrc: string): Promise<string> => {
|
||||
interface IColor {
|
||||
backgroundColor: string;
|
||||
primaryColor: string;
|
||||
}
|
||||
|
||||
export const getImageLinearBackground = async (imageSrc: string): Promise<IColor> => {
|
||||
try {
|
||||
const primaryColor = await getImagePrimaryColor(imageSrc);
|
||||
return generateGradientBackground(primaryColor);
|
||||
return {
|
||||
backgroundColor: generateGradientBackground(primaryColor),
|
||||
primaryColor,
|
||||
};
|
||||
} catch (error) {
|
||||
console.error('error', error);
|
||||
return '';
|
||||
return {
|
||||
backgroundColor: '',
|
||||
primaryColor: '',
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
export const getImageBackground = async (img: HTMLImageElement): Promise<string> => {
|
||||
export const getImageBackground = async (img: HTMLImageElement): Promise<IColor> => {
|
||||
try {
|
||||
const primaryColor = await getImageColor(img);
|
||||
return generateGradientBackground(primaryColor);
|
||||
return {
|
||||
backgroundColor: generateGradientBackground(primaryColor),
|
||||
primaryColor,
|
||||
};
|
||||
} catch (error) {
|
||||
console.error('error', error);
|
||||
return '';
|
||||
return {
|
||||
backgroundColor: '',
|
||||
primaryColor: '',
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
@@ -83,8 +100,8 @@ const generateGradientBackground = (color: string): string => {
|
||||
const [h, s, l] = rgbToHsl(r, g, b);
|
||||
|
||||
// 增加亮度和暗度的差异
|
||||
const lightL = Math.min(l + 0.5, 0.95);
|
||||
const darkL = Math.max(l - 0.5, 0.05);
|
||||
const lightL = Math.min(l + 0.2, 0.95);
|
||||
const darkL = Math.max(l - 0.3, 0.05);
|
||||
const midL = (lightL + darkL) / 2;
|
||||
|
||||
// 调整饱和度以增强效果
|
||||
|
||||
Reference in New Issue
Block a user