diff --git a/.idea/.gitignore b/.idea/.gitignore new file mode 100644 index 0000000..35410ca --- /dev/null +++ b/.idea/.gitignore @@ -0,0 +1,8 @@ +# 默认忽略的文件 +/shelf/ +/workspace.xml +# 基于编辑器的 HTTP 客户端请求 +/httpRequests/ +# Datasource local storage ignored files +/dataSources/ +/dataSources.local.xml diff --git a/.idea/Lyrics-scrolling.iml b/.idea/Lyrics-scrolling.iml new file mode 100644 index 0000000..d6ebd48 --- /dev/null +++ b/.idea/Lyrics-scrolling.iml @@ -0,0 +1,9 @@ + + + + + + + + + \ No newline at end of file diff --git a/.idea/misc.xml b/.idea/misc.xml new file mode 100644 index 0000000..639900d --- /dev/null +++ b/.idea/misc.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/.idea/modules.xml b/.idea/modules.xml new file mode 100644 index 0000000..d77d420 --- /dev/null +++ b/.idea/modules.xml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/.idea/vcs.xml b/.idea/vcs.xml new file mode 100644 index 0000000..35eb1dd --- /dev/null +++ b/.idea/vcs.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..206f6dd --- /dev/null +++ b/README.md @@ -0,0 +1,59 @@ +English | [简体中文](README.zh-CN.md) +# Dynamic Lyric Display Project +## You can click the link below to see the demo +## [Demo](https://corddt.github.io/Lyrics-scrolling/) +## Introduction +This project creates a dynamic lyric display system with language switching functionality. It is designed to load and display the lyrics of the song "Ensemble for Polaris" synchronized with its audio playback. Users can switch between different language lyrics (Chinese, Japanese, English, Russian) seamlessly during the playback. + +## Features +- Dynamic lyric scrolling synchronized with audio playback. +- Language selection dropdown for lyric display (supports Chinese, Japanese, English, Russian). +- Responsive design with audio controls at the bottom of the page. + +## Technologies +- HTML +- CSS +- JavaScript + +## Project Structure +``` +project/ +│ +├── src/ +│ ├── MP3/ +│ │ └── Ensemble for Polaris.mp3 +│ │ +│ ├── lyrics/ +│ │ ├── Ensemble for Polaris.cn.lrc +│ │ ├── Ensemble for Polaris.jp.lrc +│ │ ├── Ensemble for Polaris.en.lrc +│ │ └── Ensemble for Polaris.ru.lrc +│ │ +│ ├── main.js +│ └── style.css +│ +└── index.html +``` + +## Usage +1. Open `index.html` in a web browser. +2. The song will start playing automatically, and the lyrics will be displayed and scrolled in sync with the audio. +3. To change the lyric language, hover over the language selector at the top right corner and select the desired language from the dropdown menu. + +## Implementation Details + +### main.js +- Handles the loading and parsing of `.lrc` files. +- Synchronizes lyric display with the current playback time of the audio. +- Adds functionality to switch lyrics language dynamically. + +### style.css +- Provides styling for the lyric display, audio controls, and language selector. +- Ensures responsive layout across different devices. + +### index.html +- Contains the markup for the lyric display, audio player, and language selector. + +## Contribution +Feel free to fork this project and contribute. If you find any bugs or have suggestions for additional features or improvements, please submit an issue or a pull request. + diff --git a/README_zh-CN.md b/README_zh-CN.md new file mode 100644 index 0000000..ea3003a --- /dev/null +++ b/README_zh-CN.md @@ -0,0 +1,59 @@ +中文简体 | [English](README.md) +# 动态歌词显示项目 README +## 可以点击下面的链接查看演示 +## [Demo](https://corddt.github.io/Lyrics-scrolling/) +## 简介 +本项目创建了一个具有语言切换功能的动态歌词显示系统。它设计用于加载并显示与歌曲“Ensemble for Polaris”音频播放同步的歌词。用户可以在播放过程中无缝切换不同语言的歌词（支持中文、日语、英语、俄语）。 + +## 特点 +- 动态歌词滚动，与音频播放同步。 +- 歌词显示的语言选择下拉菜单（支持中文、日语、英语、俄语）。 +- 响应式设计，页面底部有音频控制。 + +## 技术栈 +- HTML +- CSS +- JavaScript + +## 项目结构 +``` +project/ +│ +├── src/ +│ ├── MP3/ +│ │ └── Ensemble for Polaris.mp3 +│ │ +│ ├── lyrics/ +│ │ ├── Ensemble for Polaris.cn.lrc +│ │ ├── Ensemble for Polaris.jp.lrc +│ │ ├── Ensemble for Polaris.en.lrc +│ │ └── Ensemble for Polaris.ru.lrc +│ │ +│ ├── main.js +│ └── style.css +│ +└── index.html +``` + +## 使用说明 +1. 在网页浏览器中打开 `index.html`。 +2. 歌曲将自动开始播放，歌词将显示并与音频同步滚动。 +3. 要更改歌词语言，请将鼠标悬停在右上角的语言选择器上并从下拉菜单中选择所需的语言。 + +## 实现细节 + +### main.js +- 处理 `.lrc` 文件的加载和解析。 +- 同步歌词显示与音频的当前播放时间。 +- 添加动态切换歌词语言的功能。 + +### style.css +- 为歌词显示、音频控制和语言选择器提供样式。 +- 确保不同设备上的响应式布局。 + +### index.html +- 包含歌词显示、音频播放器和语言选择器的标记。 + +## 贡献 +欢迎 fork 本项目并贡献。如果您发现任何错误或对额外功能或改进有建议，请提交 issue 或 pull request。 + diff --git a/index.html b/index.html index 6357c0b..799660f 100644 --- a/index.html +++ b/index.html @@ -1,24 +1,29 @@ - 歌词滚动效果 - - - + + - -
- -
- -
+
+
- +
+ +
+
+ +
+ diff --git a/src/MP3/Ensemble for Polaris.mp3 b/src/MP3/Ensemble for Polaris.mp3 new file mode 100644 index 0000000..3230ba6 Binary files /dev/null and b/src/MP3/Ensemble for Polaris.mp3 differ diff --git a/src/assets/bg.jpg b/src/assets/bg.jpg new file mode 100644 index 0000000..f10ada2 Binary files /dev/null and b/src/assets/bg.jpg differ diff --git a/src/assets/bg2.jpg b/src/assets/bg2.jpg new file mode 100644 index 0000000..479ccc8 Binary files /dev/null and b/src/assets/bg2.jpg differ diff --git a/src/assets/bg3.jpg b/src/assets/bg3.jpg new file mode 100644 index 0000000..7c7c16c Binary files /dev/null and b/src/assets/bg3.jpg differ diff --git a/src/assets/favicon.ico b/src/assets/favicon.ico new file mode 100644 index 0000000..173b8bf Binary files /dev/null and b/src/assets/favicon.ico differ diff --git a/src/css/style.css b/src/css/style.css deleted file mode 100644 index 6efaf00..0000000 --- a/src/css/style.css +++ /dev/null @@ -1,45 +0,0 @@ -* { - margin: 0; - padding: 0; -} - -.box { - width: 100vw; - display: flex; - justify-content: space-between; -} - -body { - background-color: #000; - color: #666; - text-align: center; -} - -audio { - position: relative; - flex: 1; - margin: 400px auto; -} - -.container { - height: 100vh; - width: 50vw; - overflow: hidden; - background-color: white; -} - -.container ul { - transition: all 0.2s; - list-style: none; -} - -.container ul li { - height: 30px; - line-height: 30px; - transition: all 0.6s; -} - -.container ul li.active { - color: blue; - transform: scale(1.2); -} diff --git a/src/lyric/lyric.js b/src/lyric/lyric.js deleted file mode 100644 index d66183b..0000000 --- a/src/lyric/lyric.js +++ /dev/null @@ -1,86 +0,0 @@ -var lrc = `[00:00.00]邓紫棋 - 倒流时间 -[00:00.83]作词：邓紫棋 -[00:00.83]作曲：邓紫棋、Faizal Tahir、Mike Chan、Mage、Ja’a、Tuju、Yonnyboii -[00:00.83]原词曲: Faizal Tahir、Mike Chan、Mage、Ja’a、Tuju、Yonnyboii -[00:00.83]制作人：邓紫棋、T-ma马敬恒 -[00:00.83]出品：索尼音乐、银河方舟、G Nation Ltd. -[00:00.83]编曲：Faizal Tahir、Mike Chan -[00:00.83]和音：邓紫棋、Faizal Tahir、Mage -[00:00.83]混音：Richard Furch -[00:00.83]母带：Alex Psaroudakis -[00:00.83]制作公司：G Nation Ltd. -[00:00.83]艺人统筹：Vinci Ki -[00:00.83]项目统筹：Tricy代诗琪、Jason来建增、Mandy马越 -[00:00.83]营销：银河HIT企划 x 索尼音乐 -[00:00.83]封面设计：杨惠中 Cube Yang、吴宸羽 Chenyu Wu -[00:00.83]歌词MV：徐立桀、Regenia、苏柔方、杨惠中、苏琬淋、庄智翔 -[00:00.83]出品人：陆瑒@银河方舟、陈国威 Andrew Chan@索尼音乐、许雯静Vivian Xu@索尼音乐 -[00:00.83]（未经著作权人许可，不得翻唱、翻录或使用） -[00:00.83]是不是我们健忘 -[00:04.60]才把爱留在过往 -[00:08.33]回忆若被风吹散 -[00:10.37]我该如何抵挡 -[00:12.26]怎么才能回到你的身旁 -[00:15.87]当我们拥抱着太阳 -[00:19.68]不知背后的影子多长 -[00:23.34]还以为我们够坚强 -[00:25.59]难道是回忆说谎 -[00:30.79]想倒流时间 -[00:31.96]想要回到你的身边 -[00:33.70]I I'm missing you -[00:35.59]I I'm missing you yeah -[00:38.28]让我回到起点 -[00:39.35]让我从头爱你一遍 -[00:41.24]I I'm missing you -[00:43.12]I I'm missing you yeah -[00:45.78]原来世界最远 -[00:46.90]不是距离而是昨天 -[00:48.74]I I'm missing you -[00:50.57]I I'm missing you yeah -[00:53.17]即使你忘了 -[00:54.29]我还记得 我会纪念 -[00:56.44]I'll be missing you -[00:58.12]I'll be missing you yeah -[01:00.78]看那鲜艳的花瓣 -[01:02.82]开得多漂亮 -[01:05.74]她是否也会 -[01:06.56]被你慢慢地遗忘 -[01:08.34]远去的时光 -[01:10.16]从来也没有一丝幽暗 -[01:13.22]你怎么舍得 让它被遗忘 -[01:15.77]当我们拥抱着太阳 -[01:19.51]不知背后的影子多长 -[01:23.32]还以为我们够坚强 -[01:25.62]难道是回忆说谎 -[01:30.80]想倒流时间 -[01:31.82]想要回到你的身边 -[01:33.76]I I'm missing you -[01:35.55]I I'm missing you yeah -[01:38.25]让我回到起点 -[01:39.32]让我从头爱你一遍 -[01:41.26]I I'm missing you -[01:43.09]I I'm missing you yeah -[01:45.75]原来世界最远 -[01:46.87]不是距离而是昨天 -[01:48.70]I I'm missing you -[01:50.64]I I'm missing you yeah -[01:53.19]即使你忘了 -[01:54.36]我还记得 我会纪念 -[01:56.35]I'll be missing you -[01:58.14]I'll be missing you yeah -[02:00.89]想倒流时间 回到初次遇见 -[02:04.46]想倒流时间 回到那个夏天 -[02:08.34]倒流眼泪 找回失去的笑脸 -[02:12.06]倒流雨水 还我们一个晴天 -[02:15.74]想倒流时间 回到你的身边 -[02:19.51]想倒流时间 爱你多一遍 -[02:23.28]在你耳边 说我爱你到永远 -[02:27.11]我的世界 没有你没有终点 -[02:30.90]想倒流时间 倒流时间 -[02:39.51]Cuz baby I I'm missing you -[02:43.08]I I'm missing you yeah -[02:45.82]这世界最远 -[02:46.84]不是距离而是昨天 -[02:54.01]就算你忘了 -[02:55.87]Baby I'll be missing you -[02:58.12]I'll be missing you yeah` diff --git a/src/lyric/main.js b/src/lyric/main.js deleted file mode 100644 index cc15497..0000000 --- a/src/lyric/main.js +++ /dev/null @@ -1,108 +0,0 @@ -/** - * 解析歌词字符串 - * 得到一个歌词对象的数组 - * 将时间和歌词分隔开 - * 每个歌词对象 { time: 开始时间, words: 歌词内容 } - */ -function parseLrc () { - let lines = lrc.split('\n') - const result = [] - lines.forEach(item => { - let parts = item.split(']') - const timeStr = parts[0].substring(1) - const obj = { - time: parseTime(timeStr), - words: parts[1] - } - result.push(obj) - }) - return result -} - -/** - * 将字符串的时间转换为数字 - * @param {String} timeStr - * @returns - */ -function parseTime (timeStr) { - let parts = timeStr.split(':') - return +parts[0] * 60 + +parts[1] -} - -let lrcData = parseLrc() - -/** - * 获取需要的dom - */ -let dom = { - audio: document.querySelector('audio'), - ul: document.querySelector('.container ul'), - container: document.querySelector('.container') -} - -/** - * 根据当前播放器时间来找到需要高亮显示的歌词 - * 如果没有任何一句歌词找到，则返回-1 - */ -function findIndex () { - let curTime = dom.audio.currentTime - for (let i = 1; i < lrcData.length + 1; i++) { - if (lrcData[i - 1].time < curTime < lrcData[i].time) { - return i - 1 - } - } - // 没找到，则说明到了最后了 - return lrcData.length - 1 -} - -/** - * 创建歌词元素 - */ -function createLrcElement () { - // 创建一个空的文档片段，优化每创建一个li添加到ul中，可以避免频繁的操作dom - let frag = document.createDocumentFragment() - lrcData.forEach(item => { - let li = document.createElement('li') - li.textContent = item.words - frag.appendChild(li) - }); - dom.ul.appendChild(frag) -} - -createLrcElement() - -// 获取几何高度会导致reflow -// 获取容器高度 -const containerHeight = dom.container.clientHeight -// 每个li高度 -const liHeight = dom.ul.children[0].clientHeight -// 最大偏移量 -const maxOffset = dom.ul.clientHeight - containerHeight - -/** - * 设置ul的偏移量 - */ -function changeOffset () { - let index = findIndex() - let offset = liHeight * index + liHeight / 2 - containerHeight / 2 - if (offset < 0) { - offset = 0 - } - if (offset > maxOffset) { - offset = maxOffset - } - dom.ul.style.transform = `translateY(-${offset}px)` - // 去掉之前的active样式 - let li = dom.ul.querySelector('.active') - if (li) { - li.classList.remove('active') - } - // 给最新的li添加样式 - li = dom.ul.children[index] - if (li) { - li.classList.add('active') - } -} - -// 事件监听 - 播放时间变化了 -dom.audio.addEventListener('timeupdate', changeOffset) diff --git a/src/lyrics/Ensemble for Polaris.cn.lrc b/src/lyrics/Ensemble for Polaris.cn.lrc new file mode 100644 index 0000000..d117df5 --- /dev/null +++ b/src/lyrics/Ensemble for Polaris.cn.lrc @@ -0,0 +1,32 @@ +[00:00.805] 在那遥远的往昔 +[00:07.865] 每当人们徘徊迷失 +[00:14.674] 寻觅那闪耀的北极星 +[00:27.459] 仰望星空，脚步轻移 +[00:34.626] 小心翼翼，别让泪珠坠落 +[00:41.334] 心怀相见之信念 +[00:47.418] 因为曾许下承诺 +[00:54.617] 解去心头之渴 +[01:01.179] 勺犹如北斗闪耀 +[01:07.361] 神话里的仙女座 +[01:14.000] 救世主珀尔修斯 +[01:20.827] 凝聚这世间之美 +[01:27.955] 储存于回忆深处 +[01:34.696] 归向心爱之地 +[01:40.815] 纵使天各一方 +[01:47.924] 天空连结着彼此 +[02:20.812] 在千年的另一端 +[02:27.890] 有人似你模样 +[02:34.548] 生活在那流转的时光 +[02:40.723] 星辰见证着一切 +[02:47.327] 瞧那城市的灯火 +[02:54.526] 在悠然的梦乡 +[03:01.205] 祝愿众人幸福安康 +[03:07.349] 守护星球默默祈祷 +[03:14.573] 梦境里的片刻 +[03:21.259] 初尝爱河的日子 +[03:27.337] 在星座中许下心愿 +[03:34.031] 心怀愿望必将实现 +[03:47.376] 在那遥远的往昔 +[03:54.565] 每当人们徘徊迷失 +[04:01.192] 与灿烂北极星紧密相连 +[04:14.621] 天空连结着彼此 diff --git a/src/lyrics/Ensemble for Polaris.en.lrc b/src/lyrics/Ensemble for Polaris.en.lrc new file mode 100644 index 0000000..afb5a86 --- /dev/null +++ b/src/lyrics/Ensemble for Polaris.en.lrc @@ -0,0 +1,32 @@ +[00:00.805] From the distant past +[00:07.865] Each time people wander +[00:14.674] Searching for the gleaming North Star +[00:27.459] Walking under the night sky, gazing upwards +[00:34.626] Carefully, lest the tears fall +[00:41.334] Believing in a reunion +[00:47.418] For a promise was made +[00:54.617] Quenching the thirst of the soul +[01:01.179] The ladle akin to the Big Dipper +[01:07.361] In the myth of Andromeda +[01:14.000] The savior, Perseus +[01:20.827] Capturing the beauty of this world +[01:27.955] Preserved in memories +[01:34.696] Returning to the beloved place +[01:40.815] Even when far apart +[01:47.924] The sky remains connected +[02:20.812] Beyond thousands of years +[02:27.890] Someone resembling you +[02:34.548] Lived through those times +[02:40.723] Recorded by the stars +[02:47.327] Behold the city lights +[02:54.526] In a tranquil slumber +[03:01.205] Wishing happiness for all +[03:07.349] The guardian planets pray +[03:14.573] During the moments of dreams +[03:21.259] The day first love was felt +[03:27.337] Wishes placed upon the constellations +[03:34.031] Believing they will be fulfilled +[03:47.376] From the distant past +[03:54.565] Each time people wander +[04:01.192] Tied to the gleaming North Star +[04:14.621] The sky remains connected diff --git a/src/lyrics/Ensemble for Polaris.jp.lrc b/src/lyrics/Ensemble for Polaris.jp.lrc new file mode 100644 index 0000000..cbce14e --- /dev/null +++ b/src/lyrics/Ensemble for Polaris.jp.lrc @@ -0,0 +1,32 @@ +[00:00.805] 遥かな昔のこと +[00:07.865] 人は彷徨う度 +[00:14.674] 光る北極星 探しました +[00:27.459] 夜空を見上げ歩く +[00:34.626] 涙 零れぬよう +[00:41.334] きっとまた会えると +[00:47.418] 約束をしたから +[00:54.617] 喉の渇き癒す +[01:01.179] 柄杓は北斗七星 +[01:07.361] 神話のアンドロメダ +[01:14.000] 救いのペルセウス +[01:20.827] この世の美しさを +[01:27.955] 思い出に集めて +[01:34.696] 愛しい場所へ帰る +[01:40.815] 遠くに離れても +[01:47.924] 空はつながる +[02:20.812] 幾千年の彼方 +[02:27.890] あなたに似た人が +[02:34.548] 生きていた時間を +[02:40.723] 星は記す +[02:47.327] ご覧よ街の明かり +[02:54.526] ゆっくり眠りの中 +[03:01.205] みんなに幸多かれと +[03:07.349] 祈る守護惑星 +[03:14.573] 夢をみていた時 +[03:21.259] 初めて恋をした日 +[03:27.337] 星座に願い込めた +[03:34.031] 届くことを 信じながら +[03:47.376] 遥かな昔のこと +[03:54.565] 人は彷徨う度 +[04:01.192] 光る北極星と結ばれていました +[04:14.621] 空はつながる diff --git a/src/lyrics/Ensemble for Polaris.ru.lrc b/src/lyrics/Ensemble for Polaris.ru.lrc new file mode 100644 index 0000000..371f20c --- /dev/null +++ b/src/lyrics/Ensemble for Polaris.ru.lrc @@ -0,0 +1,32 @@ +[00:00.805] Из далекого прошлого +[00:07.865] Каждый раз, когда люди блуждают +[00:14.674] В поисках сияющей Полярной звезды +[00:27.459] Идут под ночным небом, взирая вверх +[00:34.626] Осторожно, чтобы не упали слезы +[00:41.334] Веря в воссоединение +[00:47.418] Ведь было дано обещание +[00:54.617] Утоляя жажду души +[01:01.179] Черпак, словно Большая Медведица +[01:07.361] В мифе о Андромеде +[01:14.000] Спаситель, Персей +[01:20.827] Захватывая красоту этого мира +[01:27.955] Сохраненную в воспоминаниях +[01:34.696] Возвращение в любимое место +[01:40.815] Даже находясь далеко друг от друга +[01:47.924] Небо остается соединенным +[02:20.812] За тысячи лет +[02:27.890] Кто-то, похожий на тебя +[02:34.548] Жил в те времена +[02:40.723] Запечатленный звездами +[02:47.327] Взгляни на городские огни +[02:54.526] В спокойном сне +[03:01.205] Желая счастья всем +[03:07.349] Молящиеся планеты-хранители +[03:14.573] В моменты сновидений +[03:21.259] День первой любви +[03:27.337] Желания, возложенные на созвездия +[03:34.031] Веря в их исполнение +[03:47.376] Из далекого прошлого +[03:54.565] Каждый раз, когда люди блуждают +[04:01.192] Связанные с сияющей Полярной звездой +[04:14.621] Небо остается соединенным diff --git a/src/main.js b/src/main.js new file mode 100644 index 0000000..81f1b97 --- /dev/null +++ b/src/main.js @@ -0,0 +1,101 @@ +let currentSong = 'Ensemble for Polaris'; // 设置当前播放的歌曲 + +// 解析歌词字符串 +function parseLrc(lrc) { + let lines = lrc.split('\n'); + const result = []; + lines.forEach(item => { + if (item.indexOf(']') !== -1) { + let parts = item.split(']'); + const timeStr = parts[0].substring(1); + const obj = { + time: parseTime(timeStr), + words: parts[1] + }; + result.push(obj); + } + }); + return result; +} + +// 将字符串的时间转换为数字 +function parseTime(timeStr) { + if (!timeStr) { + return 0; + } + let parts = timeStr.split(':'); + let minSec = parts[1].split('.'); + return +parts[0] * 60 + +minSec[0] + (+minSec[1] || 0) / 1000; +} + +// 获取DOM元素 +let dom = { + audio: document.querySelector('audio'), + ul: document.querySelector('.container ul'), + container: document.querySelector('.container') +}; + +// 初始化空的歌词数据 +let lrcData = []; + +// 创建歌词元素 +function createLrcElement(lrcData) { + dom.ul.innerHTML = ''; + let frag = document.createDocumentFragment(); + lrcData.forEach(item => { + let li = document.createElement('li'); + li.textContent = item.words; + frag.appendChild(li); + }); + dom.ul.appendChild(frag); +} + +// 根据当前播放器时间来找到需要高亮显示的歌词 +function findIndex(lrcData) { + let curTime = dom.audio.currentTime; + for (let i = 0; i < lrcData.length - 1; i++) { + if (curTime >= lrcData[i].time && curTime < lrcData[i + 1].time) { + return i; + } + } + return lrcData.length - 1; +} + +// 设置ul的偏移量 +function changeOffset() { + let index = findIndex(lrcData); + const maxOffset = dom.ul.scrollHeight - dom.container.clientHeight; + let offset = index * 30 - dom.container.clientHeight / 2 + 15; + if (offset < 0) { + offset = 0; + } + if (offset > maxOffset) { + offset = maxOffset; + } + dom.ul.style.transform = `translateY(-${offset}px)`; + document.querySelectorAll('.container ul li').forEach((li, idx) => { + li.classList.toggle('active', idx === index); + }); +} + +// 事件监听 - 播放时间变化 +dom.audio.addEventListener('timeupdate', changeOffset); + +// 加载并显示歌词 +function loadLyrics(lyricFile) { + fetch(`src/lyrics/${lyricFile}`) + .then(response => response.text()) + .then(text => { + lrcData = parseLrc(text); + createLrcElement(lrcData); + }); +} + +// 在页面加载时，绑定事件监听器 +document.addEventListener('DOMContentLoaded', function() { + document.getElementById('lyricLanguage').addEventListener('change', function() { + const selectedLanguage = this.value; + loadLyrics(`${currentSong}.${selectedLanguage}.lrc`); + }); + loadLyrics(`${currentSong}.cn.lrc`); +}); \ No newline at end of file diff --git a/src/style.css b/src/style.css new file mode 100644 index 0000000..42801df --- /dev/null +++ b/src/style.css @@ -0,0 +1,66 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +html, body { + height: 100%; + width: 100%; + background-color: #000; + color: #666; + text-align: center; + overflow: hidden; + background-image: url('assets/bg3.jpg'); /* 更新路径以匹配您的文件结构 */ + background-size: cover; + background-position: center; + background-repeat: no-repeat; +} + +.player-container { + position: fixed; + bottom: 0; /* 放置在页面底部 */ + left: 0; + width: 100%; /* 宽度占满整个视口宽度 */ + z-index: 100; +} + +.container { + position: relative; + padding-bottom: 100px; /* 增加底部内边距以留出空间给播放器控件 */ + height: 100vh; /* 使用视口高度确保填满整个屏幕 */ + width: 100%; + overflow: auto; + background-color: rgba(255, 255, 255, 0.75); + opacity: 0.75; + border-radius: 30px; +} + +.container ul { + padding: 0; + margin: 0; + list-style: none; +} + +.container ul li { + height: 30px; + line-height: 30px; + padding: 0 10px; + font-size: calc(1rem + 1vw); /* 字体大小根据视口宽度调整 */ +} + +.container ul li.active { + color: blue; + transform: scale(1.2); +} + +#languageSelector { + position: absolute; + top: 10px; + right: 10px; + padding: 5px 10px; + border: 1px solid #ddd; + border-radius: 5px; + background-color: white; + cursor: pointer; +}