diff --git a/index.js b/index.js
index b0f44a5..1d55f65 100644
--- a/index.js
+++ b/index.js
@@ -25,26 +25,7 @@ const LINE_HEIGHT = 20;
const LYRICS_OFFSET = window.innerHeight / 3.5;
let lastLyric = -1
-/*
-function mainDivScalePosition(width, height) {
- // width: 1280, height: 720 (Image loaded)
- // width: 325, height: 437 (Image unloaded)
- const scaleX = mainDiv.clientWidth / width;
- const scaleY = mainDiv.clientHeight / height;
- const scale = Math.max(scaleX, scaleY);
-
- mainDiv.style.transform = `scale(${scale})`;
- mainDiv.style.top = `calc(50% - ${mainDiv.clientHeight / 2}px)`;
- mainDiv.style.left = `calc(50% - ${mainDiv.clientWidth / 2}px)`;
-
- rightContent.style.paddingLeft = `${10 / scaleX}%`;
-}
-window.addEventListener("resize", () => {
- mainDivScalePosition(width, height);
-});
-mainDivScalePosition(width, height);
-*/
let bgImg = new Image();
bgImg.src = "./default.svg";
@@ -63,36 +44,15 @@ let audioLoaded = false;
let lrcLoaded = false;
svgcontainer.addEventListener("click", async () => {
- // const filePaths = await window.electron.openDialog();
- // if (filePaths && filePaths.length > 0) {
- // // 处理选中的文件
- // for (const filePath of filePaths) {
- // const file = new File([await fetch(filePath).then(r => r.blob())], filePath.split('/').pop());
- // const event = { target: { files: [file] } };
- // audioFileInput.dispatchEvent(new CustomEvent('change', { detail: event }));
- // }
- // }
audioFileInput.click();
});
audioPlayer.addEventListener("loadedmetadata", () => {
endTime.textContent = `-${formatTime(audioPlayer.duration)}`;
- // if (imageLoaded && audioLoaded && lrcLoaded) {
- // setTimeout(() => {
- // playBtn.click();
- // }, 100);
- // } else if (!lrcLoaded && imageLoaded && audioLoaded) {
- // window.dispatchEvent(new Event("resize"));
- // setTimeout(() => {
- // playBtn.click();
- // }, 100);
- // }
if (audioLoaded) {
if (!lrcLoaded) {
width = 325;
height = 437;
- // window.dispatchEvent(new Event("resize"));
- // mainDiv.style.marginLeft = "0";
}
playBtn.click();
} else {
@@ -223,7 +183,6 @@ audioPlayer.addEventListener("timeupdate", () => {
process.style.width = `${(audioPlayer.currentTime / audioPlayer.duration) * 100}%`;
startTime.textContent = formatTime(audioPlayer.currentTime);
endTime.textContent = `-${formatTime(audioPlayer.duration - audioPlayer.currentTime)}`;
- // 歌词触发计算
const cTime = audioPlayer.currentTime;
let lList = [];
@@ -328,124 +287,16 @@ function parseLrc(lrcText) {
}
});
- //mainDivScalePosition(width, height);
-
return {
lyrics: lrcArray,
allTimes: allTimes
};
}
-/*
-function updateLyrics() {
- if (!playing) return;
-
- const currentTime = audioPlayer.currentTime;
- const lyricLines = lyricsElement.querySelectorAll('*');
- if (called) {
- lyricsElement.style.transition = "all 1s cubic-bezier(0.25, 0.8, 0.25, 1)";
- } else {
- centerActiveLine(lyricLines[0]);
- }
- let activeIndex = -1;
-
- for (let i = 0; i < lyrics.length; i++) {
- if (currentTime >= lyrics[i].time) {
- activeIndex = i;
- } else {
- break;
- }
- }
-
- lyricLines.forEach((line, index) => {
- const distance = Math.abs(activeIndex - index);
- const thisTime = allTimes[activeIndex];
-
- if (distance > 8) {
- line.style.visibility = "hidden";
- return;
- }
-
- if (index === activeIndex) {
- applyActiveLineStyle(line, index, lyricLines, thisTime);
- } else {
- applyNearbyLineStyle(line, distance);
- }
- });
-
- if (activeIndex >= 0) {
- requestAnimationFrame(() => {
- setTimeout(() => {
- centerActiveLine(lyricLines[activeIndex]);
- }, 120);
- });
- }
-
- requestAnimationFrame(updateLyrics);
-}
-
-function applyActiveLineStyle(line, index, allLines, thisTime) {
- void line.offsetWidth;
- setTimeout(() => {
- line.classList.add("highlight");
- line.style.filter = "none";
- line.style.marginLeft = "0";
- line.style.visibility = "visible";
- line.style.opacity = "0.6";
- line.style.setProperty("--type-time", `${thisTime / 2}s`);
- }, 300);
-
- if (!processedLines.has(index)) {
- processedLines.add(index);
-
- const start = Math.max(0, index - 3);
- const end = Math.min(allLines.length - 1, index + 3);
- const displayingLines = Array.from(allLines).slice(start, end + 1);
-
- displayingLines.forEach((nline, i) => {
- setTimeout(() => {
- nline.style.marginTop = `${line.clientHeight}px`;
-
- setTimeout(() => {
- nline.style.marginTop = "4%";
- }, 250);
- }, i * 75);
- });
- }
-}
-
-function applyNearbyLineStyle(line, distance) {
- void line.offsetWidth;
- line.classList.remove("highlight");
- line.style.filter = `blur(${distance * 0.5}px)`;
- line.style.marginLeft = `${distance * 1.25}px`;
- line.style.opacity = `${0.3 - distance / 100}`;
- line.style.visibility = "visible";
-}
-
-function centerActiveLine(activeLine) {
- if (!activeLine) return;
- if (!called) called = true;
- const container = document.querySelector(".lyricscontainer");
- const containerHeight = container.clientHeight;
- const activeLineOffset = activeLine.offsetTop;
- const offset = (containerHeight / 2) - activeLineOffset - (0.1 * containerHeight);
-
- lyricsElement.style.transform = `translateY(${offset}px)`;
-}
-*/
audioPlayer.addEventListener('play', () => {
//requestAnimationFrame(updateLyrics);
});
-/*
-window.addEventListener('resize', () => {
- lyricsElement.classList.add("noTransition");
- updateLyrics();
- lyricsElement.classList.remove("noTransition");
-});
-updateLyrics();
-*/
function getDominantColors(imageData, colorCount = 4, minColorDistance = 60) {
const pixels = imageData.data;
const { width, height } = imageData;
@@ -589,7 +440,7 @@ bgImg.onload = () => {
animate();
};
-// 新增的函数
+
// 动态计算布局的函数
function GetLyricsLayout(now, to, data) {
@@ -631,3 +482,210 @@ function UpdateLyricsLayout(index, data, init = 1) {
}, (n * 70 - n * 10) * init);
}
}
+
+// 搜索框功能
+const searchContainer = document.getElementById('search_container');
+const searchTrigger = document.getElementById('search_trigger');
+const searchDropdown = document.getElementById('search_dropdown');
+const searchInput = document.getElementById('search_input');
+const searchResults = document.getElementById('search_results');
+
+let searchKeyword = '';
+let searchResultList = [];
+
+// 点击触发器切换显示
+searchTrigger.addEventListener('click', (e) => {
+ e.stopPropagation();
+ searchDropdown.classList.toggle('hidden');
+});
+
+// 点击其他区域关闭
+document.addEventListener('click', (e) => {
+ if (!searchContainer.contains(e.target)) {
+ searchDropdown.classList.add('hidden');
+ }
+});
+
+
+searchDropdown.addEventListener('click', (e) => {
+ e.stopPropagation();
+});
+
+// ESC 键关闭
+document.addEventListener('keydown', (e) => {
+ if (e.key === 'Escape') {
+ searchDropdown.classList.add('hidden');
+ }
+});
+
+// 输入防抖
+let searchTimer;
+searchInput.addEventListener('input', (e) => {
+ clearTimeout(searchTimer);
+ const keyword = e.target.value.trim();
+ if (keyword === '') {
+ searchResults.innerHTML = '';
+ return;
+ }
+ searchTimer = setTimeout(() => {
+ performSearch(keyword);
+ }, 400);
+});
+
+// 执行搜索
+async function performSearch(keyword) {
+ searchKeyword = keyword;
+ searchResults.innerHTML = '
搜索中...
';
+ try {
+ const url = `https://oiapi.net/api/Kuwo?msg=${encodeURIComponent(keyword)}&limit=10`;
+ const res = await fetch(url);
+ const data = await res.json();
+ if (data.code === 1 && data.data && data.data.length > 0) {
+ searchResultList = data.data;
+ renderSearchResults(data.data);
+ } else {
+ searchResults.innerHTML = '
未找到相关歌曲
';
+ }
+ } catch (err) {
+ console.error('搜索失败', err);
+ searchResults.innerHTML = '
搜索出错，请重试
';
+ }
+}
+
+
+function renderSearchResults(results) {
+ let html = '';
+ results.forEach((item, index) => {
+ html += `
+
+ ${escapeHtml(item.song)}
+ ${escapeHtml(item.singer)}
+
+ `;
+ });
+ searchResults.innerHTML = html;
+
+ // 点击事件
+ document.querySelectorAll('.search-result-item').forEach(el => {
+ el.addEventListener('click', (e) => {
+ const index = e.currentTarget.dataset.index;
+ playSelectedSong(index);
+ });
+ });
+}
+
+// XSS
+function escapeHtml(unsafe) {
+ return unsafe.replace(/[&<>"]/g, function(m) {
+ if (m === '&') return '&';
+ if (m === '<') return '<';
+ if (m === '>') return '>';
+ if (m === '"') return '"';
+ return m;
+ });
+}
+
+// 播放歌曲
+async function playSelectedSong(index) {
+ const item = searchResultList[index];
+ if (!item) return;
+
+ // 加载状态
+ audioName.textContent = `加载中...`;
+
+ try {
+ // 获取歌曲详细
+ // 使用原始关键词 + n 参数获取该歌曲的详细信息
+ const detailUrl = `https://oiapi.net/api/Kuwo?msg=${encodeURIComponent(searchKeyword)}&n=${Number(index)+1}`;
+ const detailRes = await fetch(detailUrl);
+ const detailData = await detailRes.json();
+
+ // 提取url
+ let audioUrl = '';
+ if (detailData.code === 1) {
+ if (Array.isArray(detailData.data)) {
+ audioUrl = detailData.data[0]?.url;
+ } else if (typeof detailData.data === 'object') {
+ audioUrl = detailData.data?.url;
+ }
+ }
+
+ if (!audioUrl) {
+ throw new Error('无法获取播放链接');
+ }
+
+
+ audioPlayer.src = audioUrl;
+ audioLoaded = true;
+
+ // 更新封面
+ if (item.picture && item.picture !== 'https://h5s.kuwo.cn/www/kw-www/img/logo.ce08bf7.png') {
+ bgImg.src = item.picture;
+ } else {
+ // 默认背景
+ bgImg.src = './default.svg';
+ }
+
+ // 更新歌曲名显示
+ let displayName = item.song;
+ if (item.singer) displayName += ` - ${item.singer}`;
+ audioName.textContent = displayName.length > 40 ? displayName.substring(0, 40) + '...' : displayName;
+
+ // 获取歌词
+ fetchLyricBySongName(item.song, item.singer).then(lyric => {
+ if (lyric) {
+ processLrcText(lyric);
+ } else {
+ // 无歌词时清空显示
+ lyricsElement.innerHTML = '';
+ lrcLoaded = false;
+ disableLyric();
+ }
+ }).catch(() => {
+ disableLyric();
+ });
+
+ // 自动播放
+ setTimeout(() => {
+ if (audioPlayer.readyState >= 2) {
+ playBtn.click();
+ }
+ }, 500);
+
+ } catch (err) {
+ console.error('播放失败', err);
+ alert('无法加载歌曲，请稍后重试');
+ }
+}
+
+// 歌词API,QQ音乐源
+const API_BASE = 'https://api.wuhy.de5.net';
+
+async function searchSongmid(keyword) {
+ const url = `${API_BASE}/getSearchByKey?key=${encodeURIComponent(keyword)}&limit=1`;
+ const response = await fetch(url);
+ const data = await response.json();
+ const songList = data?.response?.data?.song?.list;
+ if (songList && songList.length > 0) {
+ return songList[0].songmid;
+ }
+ return null;
+}
+
+async function getLyric(songmid) {
+ const url = `${API_BASE}/getLyric?songmid=${encodeURIComponent(songmid)}`;
+ const response = await fetch(url);
+ const data = await response.json();
+ return data?.response?.lyric || '';
+}
+
+async function fetchLyricBySongName(title, artist) {
+ const keyword = `${title} ${artist}`;
+ const songmid = await searchSongmid(keyword);
+ if (!songmid) {
+ console.warn('未找到歌词');
+ return '';
+ }
+ const lyric = await getLyric(songmid);
+ return lyric;
+}
\ No newline at end of file