Skip to content
原本也有举世无双灵魂
一直到落地生根于巍峨爱恨
也写过壮阔的情诗，送陌生爱人
怪我甘愿，俯首称臣
你是我年少求剑时刻的舟1
载着一生的平凡美梦
搁浅在岸头
也算看过了许多，星海苍穹
却各自奔流
——黄诗扶《你是我年少求剑时刻的舟》
完整歌词
document.addEventListener(‘DOMContentLoaded’, async function () {
const audio = document.getElementById(‘audio-player’);
const lyricsContainer = document.getElementById(‘lyrics’);
const container = document.getElementById(‘lyrics-container’);
const lyricsFile = ‘https://fanym.oss-cn-beijing.aliyuncs.com/wp-content/uploads/2024/09/nishiwonianshaoqiujianshikedezhou.lrc’;
let currentIndex = 0;
let lyrics = [];
let isUserScrolling = false;
let scrollTimeout;
const lrcText = await fetchLyrics(lyricsFile);
parseLRC(lrcText);
function fetchLyrics(url) {
return fetch(url).then(response => response.text());
}
function parseLRC(lrcText) {
const lines = lrcText.split(‘\n’);
lyrics = lines.map(line => {
const timeMatch = line.match(/\[(\d{2}):(\d{2})\.(\d{1,2})\]/);
if (timeMatch) {
const minutes = parseInt(timeMatch[1], 10);
const seconds = parseInt(timeMatch[2], 10);
const milliseconds = parseInt(timeMatch[3].padEnd(2, ‘0’), 10);
const timeInSeconds = minutes * 60 + seconds + milliseconds / 100;
const lyricText = line.replace(/\[.*?\]/g, ”).trim();
if(lyricText) return { time: timeInSeconds, text: lyricText };
}
return null;
}).filter(item => item !== null);
renderLyrics();
}
function renderLyrics() {
const fragment = document.createDocumentFragment();
lyrics.forEach((lyric, index) => {
const li = document.createElement(‘li’);
li.textContent = lyric.text;
if (lyric.time !== null) {
li.dataset.time = lyric.time.toString();
li.addEventListener(‘click’, () => {
const clickedLi = event.target;
const clickedTime = parseFloat(clickedLi.dataset.time);
audio.currentTime = clickedTime;
const clickedIndex = Array.from(document.querySelectorAll(‘#lyrics li’)).indexOf(clickedLi);
highlightLyric(clickedLi);
scrollToLyric(clickedIndex);
});
}
fragment.appendChild(li);
});
lyricsContainer.innerHTML = ”;
lyricsContainer.appendChild(fragment);
}
function synchronizeLyricsWithAudio(currentTime) {
const lines = document.querySelectorAll(‘#lyrics li’);
let foundIndex = -1;
lyrics.forEach((lyric, index) => {
if (lyric.time && lyric.time = 0 && !isUserScrolling) {
currentIndex = foundIndex;
highlightLyric(lines[currentIndex]);
scrollToLyric(currentIndex);
}
}
audio.addEventListener(‘timeupdate’, function () {
const currentTime = audio.currentTime;
synchronizeLyricsWithAudio(currentTime);
});
function highlightLyric(line) {
document.querySelectorAll(‘#lyrics li’).forEach(li => li.classList.remove(‘highlight’));
line.classList.add(‘highlight’);
}
function scrollToLyric(index) {
const line = document.querySelectorAll(‘#lyrics li’)[index];
const offsetTop = line.offsetTop;
const containerHeight = container.offsetHeight;
const lineHeight = line.offsetHeight;
const scrollTop = container.scrollTop;
const scrollBottom = scrollTop + containerHeight;
// 判断当前行是否已经在可视区域内
if (offsetTop scrollBottom) {
// 如果超出可视区域才进行滚动
if (container.scrollHeight > container.offsetHeight) {
const scrollTarget = Math.max(0, offsetTop – containerHeight / 5 + lineHeight / 5);
container.scrollTop = scrollTarget;
}
}
}
container.addEventListener(‘scroll’, function () {
isUserScrolling = true;
clearTimeout(scrollTimeout);
scrollTimeout = setTimeout(() => {
isUserScrolling = false;
}, 3000);
});
});
#lyrics li {
list-style: none;
padding: 5px;
color: #333;
cursor: pointer;
}
#lyrics li.highlight {
color: #d9534f;
font-weight: bold;
font-size: 1.2em;
background-color: rgba(255, 215, 0, 0.2);
}
#audio-player {
width:100%;
}
#lyrics-container {
/* 添加平滑滚动 */
scroll-behavior: smooth;
}
↑