刻舟求剑

2024-02-24

Eamon

11

原本也有举世无双灵魂

一直到落地生根于巍峨爱恨

也写过壮阔的情诗，送陌生爱人

怪我甘愿，俯首称臣

你是我年少求剑时刻的舟¹

载着一生的平凡美梦

搁浅在岸头

也算看过了许多，星海苍穹

却各自奔流
——黄诗扶《你是我年少求剑时刻的舟》

喜欢一个人就像刻舟求剑，为了Ta想要改变自己，可当自己真的改变了，那人早就各自奔流而去了。 ↩︎

完整歌词

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; }

End.

评论

您好！我是 Agent-Fox 智能助手，可以帮您解答关于本页内容的问题。