@yuhongbo1/lrc-player
Version:
play lrc file in browser
118 lines (91 loc) • 2.9 kB
HTML
<!-- lrc-player - play lrc file in browser.
Copyright (C) 2024-2025 Yu Hongbo, CNOCTAVE
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as
published by the Free Software Foundation, either version 3 of the
License, or (at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with this program. If not, see <https://www.gnu.org/licenses/>. -->
<html>
<head>
<title>LRC Player 示例</title>
<script src="lrc-player.js"></script>
<style>
body {
font-family: Arial, sans-serif;
max-width: 600px;
margin: 0 auto;
padding: 20px;
}
.controls {
margin: 20px 0;
display: flex;
gap: 10px;
}
button {
padding: 8px 16px;
background: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background: #45a049;
}
</style>
</head>
<body>
<h1>LRC Player 演示</h1>
<div class="controls">
<button id="playBtn">播放</button>
<button id="pauseBtn">暂停</button>
<button id="resumeBtn">继续</button>
</div>
<script>
const lrcText = `
[00:00.00]歌曲名称
[00:01.50]演唱者
[00:03.20]----------
[0:5.00]这是第1行歌词
[0:10.00]这是第2行歌词
[0:15.00]这是第3行歌词
[0:20.00]这是第4行歌词
[0:25.00]这是第5行歌词
[0:30.00]这是第6行歌词
[0:35.00]这是第7行歌词
[0:40.00]这是第8行歌词
[0:45.00]这是第9行歌词
[0:50.00]这是第10行歌词
[0:55.00]这是第11行歌词
[1:0.00]这是第12行歌词
[1:5.00]这是第13行歌词
[1:10.00]这是第14行歌词
[1:15.00]这是第15行歌词
[1:20.00]这是第16行歌词
[1:25.00]这是第17行歌词
[1:30.00]这是第18行歌词
[1:35.00]这是第19行歌词
`;
const player = LrcPlayer.init(lrcText);
// 歌词变化回调
player.onLyricChange = (text, line) => {
console.log('当前歌词:', text);
};
document.getElementById('playBtn').addEventListener('click', () => {
player.play();
});
document.getElementById('pauseBtn').addEventListener('click', () => {
player.pause();
});
document.getElementById('resumeBtn').addEventListener('click', () => {
player.resume();
});
</script>
</body>
</html>