《不白活一回》 - 毛阿敏
本帖最后由 亦是金 于 2025-8-6 11:07 编辑 <br /><br /><div style="position: absolute; margin-left: -310px;margin-top: 50px;width:100%;"><style>
#bj {
position: relative;
width: 1200px;
height: 600px;
margin-left: 0;
margin-top: 0;
overflow: hidden;
background: url('https://upfile.mp3.wf/view.php/ada5d0baf47a80da32be15b52a840968.gif') no-repeat center / cover;
}
.lrc {
position: absolute;
width: 100%;
height: 60px; /* 只显示一行歌词高度 */
top: 90%;
left: 50%;
transform: translate(-50%, -50%); /* 容器整体居中 */
overflow: hidden;
text-align: center;
}
.lrc #ul {
width: 100%;
padding: 0;
list-style: none;
transition: 0.3s all ease;
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
}
.lrc #ul li {
font-size: 38px;
color: green;
font-family:"华文楷体";
font-weight: 400;
transition: 0.1s all ease;
list-style-type: none;
text-align: center;
padding: 0 10px;
height: 60px;
line-height: 60px;
cursor: pointer;
white-space: nowrap; /* 防止歌词换行 */
filter:drop-shadow(#FFFFFF 1px 0 0)drop-shadow(#FFFFFF 0 1px 0)drop-shadow(#FFFFFF -1px 0 0) drop-shadow(#FFFFFF 0 -1px0);
}
.lrc #ul li span {
margin: 0 5px;
transform-origin: center center; /* x轴和y轴均以中心为原点 */
transition: all 0.1s cubic-bezier(0.34, 1.56, 0.64, 1); /* 缓动函数让动画更自然 */
display: inline-block; /* 确保transform-origin生效 */
}
.lrc #ul li span.active {
font-family: "华文楷体";
font-weight: 400;
font-size: 45px;
color: red;
transform: scale(1, 1.2); /* 缩放效果 */
}
.logo {
position: absolute;
font-size: 1.6rem;
font-weight: 400;
color:orange;
display: flex;
top: 4%;
left: 3%;
filter:drop-shadow(#FFFFFF 1px 0 0)drop-shadow(#FFFFFF 0 1px 0)drop-shadow(#FFFFFF -1px 0 0) drop-shadow(#FFFFFF 0 -1px0);
}
.logo2 {
position: absolute;
font-size: 1.2rem;
font-weight: 400;
color:#ffffff;
display: flex;
top: 12%;
left: 10%;
}
</style>
<div id="bj">
<div class="lrc">
<ul id="ul"></ul>
</div>
<div class="logo">《不白活一回》 - 毛阿敏</div>
<div class="logo2">试帖寻梦花园ksc歌词同步播放器</div>
<audio id="audio" src="https://music.163.com/song/media/outer/url?id=276341.mp3" loop autoplay></audio>
<script>
var lrc = `
karaoke.add('00:00.100', '00:02.799', '《不白活一回》', '299,364,299,364,337,389,340');
karaoke.add('00:04.570', '00:06.799', '作词 : 张藜', '299,464,437,489,540');
karaoke.add('00:08.570', '00:10.799', '作曲 : 徐沛东', '299,464,437,489,540');
karaoke.add('00:12.570', '00:14.799', '演唱 ：毛阿敏', '299,464,437,489,540');
karaoke.add('00:16.570', '00:18.799', 'KSC编辑 ：亦是金', '299,364,399,364,337,389,340');
karaoke.add('00:20.570', '00:21.799', '。。。。。。', '299,264,299,264,237,289,240');
karaoke.add('00:22.570', '00:24.799', '不白活一会', '299,464,437,489,540');
karaoke.add('00:26.136', '00:28.837', '凤飞彩云追', '489,489,462,464,797');
karaoke.add('00:29.890', '00:32.274', '不白活一会', '438,506,437,489,514');
karaoke.add('00:33.636', '00:36.543', '雁叫鸟相随', '412,463,515,513,1004');
karaoke.add('00:37.391', '00:40.656', '不白活一会', '977,873,489,464,462');
karaoke.add('00:41.136', '00:44.430', '金翅那个鲤鱼敢玩水', '181,248,208,283,479,463,488,490,454');
karaoke.add('00:44.893', '00:48.389', '不白活一会', '540,359,438,539,1620');
karaoke.add('00:48.801', '00:57.323', '大鹏腾空往高飞咳', '333,438,462,463,2005,1054,814,2953');
karaoke.add('01:00.046', '01:03.408', '活就活它个船撵浪呀', '565,182,488,207,274,438,488,437,283');
karaoke.add('01:03.640', '01:06.838', '活就活它个龙摆尾', '540,377,437,198,308,463,464,411');
karaoke.add('01:07.403', '01:10.893', '活就活它个云生霞呀', '591,232,515,180,309,429,489,513,232');
karaoke.add('01:11.177', '01:14.314', '活就活它个地增辉', '591,231,489,206,284,488,463,385');
karaoke.add('01:15.498', '01:22.203', '不白活一会', '334,951,977,873,3570');
karaoke.add('01:22.974', '01:25.982', '活它个拼命三郎', '411,463,437,719,258,438,282');
karaoke.add('01:26.188', '01:34.460', '才有滋味有滋味', '900,462,514,900,463,489,4544');
karaoke.add('01:44.963', '01:47.320', '不白活一会', '361,436,489,436,635');
karaoke.add('01:48.630', '01:51.407', '苦也不觉得累', '437,462,489,205,284,900');
karaoke.add('01:52.383', '01:55.210', '不白活一会', '437,411,463,514,1002');
karaoke.add('01:56.083', '01:58.963', '难也吓不倒谁', '489,464,488,180,283,976');
karaoke.add('01:59.811', '02:03.074', '不白活一会', '1003,898,438,514,410');
karaoke.add('02:03.666', '02:05.520', '姑娘那个小伙儿', '155,206,206,361,385,232,309');
karaoke.add('02:05.676', '02:06.849', '撒欢美', '179,557,437');
karaoke.add('02:07.261', '02:10.901', '不白活一会', '436,514,489,505,1696');
karaoke.add('02:11.235', '02:20.440', '一辈一辈胜一辈咳', '540,257,488,412,2055,848,1814,2791');
karaoke.add('02:22.561', '02:25.964', '活就活它个老变少呀', '480,232,437,207,257,462,490,495,343');
karaoke.add('02:26.145', '02:29.274', '活就活它个瘦赶肥', '608,232,488,207,257,437,489,411');
karaoke.add('02:29.864', '02:33.234', '活就活它个穷变富呀', '618,258,437,231,283,437,437,490,179');
karaoke.add('02:33.569', '02:36.809', '活就活它个虎生威', '617,257,462,207,309,437,514,437');
karaoke.add('02:37.939', '02:44.831', '不白活一会', '412,865,976,822,3817');
karaoke.add('02:45.499', '02:48.584', '活它个心想事成', '308,489,437,693,258,437,463');
karaoke.add('02:48.765', '02:59.671', '笑声脆笑声脆', '745,976,1155,1020,3621,3389');
`;
let lrcArr = lrc.split('\n');
let result = [];
var audio = document.querySelector("#audio"),
ul = document.querySelector("#ul"),
container = document.querySelector(".lrc");
const lrcRegex = /karaoke\.add\('([\d:/.]+)',\s*'([\d:/.]+)',\s*'([^']*)'/;
for (let i = 0; i < lrcArr.length; i++) {
const line = lrcArr.trim();
if (!line) continue;
const match = line.match(lrcRegex);
if (!match) continue;
const startTimeStr = match;
const endTimeStr = match;
const lineText = match.trim();
if (!lineText) continue;
const startTime = parseTime(startTimeStr);
const endTime = parseTime(endTimeStr);
const lineDuration = endTime - startTime;
const words = lineText.split('');
const wordCount = words.length;
if (wordCount === 0) continue;
const wordDuration = lineDuration / wordCount;
const lineWords = [];
words.forEach((word, index) => {
lineWords.push({
time: startTime + index * wordDuration,
text: word
});
});
result.push(lineWords);
}
function parseTime(timeStr) {
const = timeStr.split(':');
return parseInt(minutes, 10) * 60 + parseFloat(seconds);
}
function getCurrentLineIndex() {
const currentTime = audio.currentTime;
for (let i = 0; i < result.length; i++) {
const line = result;
if (currentTime >= line.time &&
(i === result.length - 1 || currentTime < result.time)) {
return i;
}
}
return -1;
}
function createLyricElements() {
const frag = document.createDocumentFragment();
result.forEach((lineWords, lineIndex) => {
const li = document.createElement("li");
lineWords.forEach(wordObj => {
const span = document.createElement("span");
span.textContent = wordObj.text;
span.dataset.time = wordObj.time;
li.appendChild(span);
});
li.addEventListener('click', () => {
audio.currentTime = lineWords.time;
});
frag.appendChild(li);
});
ul.appendChild(frag);
}
createLyricElements();
const liHeight = 60;
const visibleLines = 1;
let prevLineIndex = -1;
function syncLyric() {
const currentLineIndex = getCurrentLineIndex();
if (currentLineIndex === -1) return;
const scrollOffset = currentLineIndex * liHeight;
ul.style.transform = `translateY(-${scrollOffset}px)`;
if (prevLineIndex!== -1 && prevLineIndex!== currentLineIndex) {
const prevLi = ul.children;
if (prevLi) {
prevLi.querySelectorAll('span.active').forEach(span => {
span.classList.remove('active');
});
}
}
const currentLi = ul.children;
const currentLine = result;
const currentTime = audio.currentTime;
currentLine.forEach((wordObj, wordIndex) => {
const span = currentLi.children;
const isActive = currentTime >= wordObj.time &&
(wordIndex === currentLine.length - 1 ||
currentTime < currentLine.time);
if (isActive) {
span.classList.add('active');
} else {
span.classList.remove('active');
}
});
prevLineIndex = currentLineIndex;
}
audio.addEventListener("timeupdate", syncLyric);
</script>
<DIV style="HEIGHT: 1050px"> 这样的歌词同步很奇妙。
欣赏亦是金老师好帖{:4_199:} 这个帖子很奇怪，怎么评分看不到。我还以为自己没点评分呢{:4_173:} 播放器唯美
歌声动听
制作大气
音画合一，歌曲与画面结合完美
玫瑰花☆╮╮芍药花☆╮╰☆☆╮合欢花花～【*偶然 献花给你啦】
感谢亦是金带来的精彩，辛苦了！祝你开心幸福、阖家安康！
页:
[1]