coderTopu · Corddt · Jan 31, 2024 · Jan 31, 2024 · Jan 31, 2024 · Jan 31, 2024
diff --git a/.idea/.gitignore b/.idea/.gitignore
diff --git a/.idea/Lyrics-scrolling.iml b/.idea/Lyrics-scrolling.iml
diff --git a/.idea/misc.xml b/.idea/misc.xml
diff --git a/.idea/modules.xml b/.idea/modules.xml
diff --git a/.idea/vcs.xml b/.idea/vcs.xml
diff --git a/README.md 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
@@ -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
@@ -1,24 +1,29 @@
 <!DOCTYPE html>
 <html lang="en">
-
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>歌词滚动效果</title>
-    <link rel="stylesheet" href="./src/css/style.css">
-    <script src="./src/lyric/lyric.js"></script>
-    <script src="./src/lyric/main.js" type="module"></script>
+    <link rel="stylesheet" href="src/style.css">
+    <script src="src/main.js" type="module"></script>
 </head>
-
 <body>
-<div class="box">
-    <audio controls src="./src/MP3/time.mp3"></audio>
-    <div class="container">
-        <ul class="lrc-list"></ul>
-    </div>
+<div class="player-container">
+    <audio controls src="src/MP3/Ensemble for Polaris.mp3"></audio>
 </div>
 
-</body>
+<div class="lyric-language-selector">
+    <select id="lyricLanguage">
+        <option value="cn">中文</option>
+        <option value="jp">日本語</option>
+        <option value="en">English</option>
+        <option value="ru">русский язык</option>
+    </select>
+</div>
 
+<div class="container">
+    <ul class="lrc-list"></ul>
+</div>
+</body>
 </html>
diff --git a/src/MP3/Ensemble for Polaris.mp3 b/src/MP3/Ensemble for Polaris.mp3
diff --git a/src/assets/bg.jpg b/src/assets/bg.jpg
diff --git a/src/assets/bg2.jpg b/src/assets/bg2.jpg
diff --git a/src/assets/bg3.jpg b/src/assets/bg3.jpg
diff --git a/src/assets/favicon.ico b/src/assets/favicon.ico
diff --git a/src/css/style.css b/src/css/style.css
diff --git a/src/lyric/lyric.js b/src/lyric/lyric.js