嬉戏人间 演唱/王莎莎
本帖最后由 亚伦影音工作室 于 2025-9-15 14:21 编辑 <br /><br /><style>#bj {position: relative;
width: 1286px;
height: 720px;
margin-left: -300px;
margin-top: 130px;
overflow: hidden;z-index:12345;
background: ;
}
.intro {margin: 0px0px;z-index:2;
width: 100%;
height:100%;
position: absolute;
background:url(https://pic1.imgdb.cn/item/6824a1fc58cb8da5c8f1b5a2.jpg),linear-gradient(145deg, #e56420, #c22525, #3d9c31, #000078);
background-size: cover;
mix-blend-mode: hard-light;
animation: hue-rotate 1s linear infinite;
}
.stop.intro{animation-play-state: paused;}
@keyframes hue-rotate {
from {
filter: hue-rotate(0);
}
to {
filter: hue-rotate(360deg);
}
}
audio {position:absolute;top:95%;z-index:29;
width: 90%;left: 50%;
transform: translate(-50%, -50%);
height: 40px;
outline: none;
filter: invert(0);
}
audio::-webkit-media-controls-enclosure {
background:transparent ;
border-radius: 4px;
}
.media-controls-container,
.media-controls-container * {
background: rgb(129, 73, 200);
//滤镜反转为 rgba(0, 162, 255, 1);rgba(255, 93, 0, 0.8)#7eb637
border-radius: 4px;
}
audio::-webkit-media-controls-current-time-display {
order: 1; //设置弹性盒对象元素的顺序
color: #ffffff;
text-shadow: unset;
}
audio::-webkit-media-controls-time-remaining-display {
order: 2;
color: #000000;
text-shadow: unset;
}
.lrc {z-index:20;
position: absolute;
width: 100%;
height: 60px; /* 只显示一行歌词高度 */
top: 88%;
left: 50%;
transform: translate(-50%, -50%); /* 容器整体居中 */
overflow: hidden;
text-align: center;
}
.lrc #ul {filter:drop-shadow(#FFFFFF 1px 0 0)drop-shadow(#FFFFFF 0 1px 0)drop-shadow(#FFFFFF -1px 0 0) drop-shadow(#FFFFFF 0 -1px0);
width: 100%;
padding: 0;
list-style: none;
transition: 0.1s all ease;
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
}
.lrc #ul li {
font-size: 44px;
color: #000;
font-family: "华文隶书", "Microsoft YaHei", sans-serif;
font-weight:500;
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; /* 防止歌词换行 */
}
.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: "华文隶书", "Microsoft YaHei", sans-serif;
font-weight: 500;
font-size: 50px;
color: red;
transform: scale(1.2)rotate(-360deg); /* 缩放效果 */
}
</style>
<divid="bj">
<audio id="audio" src="https://s2.cldisk.com/sv-w7/audio/6a/00/04/c606cf3c5f2f6140140ad5a5d176272d/audio.mp3" autoplay loop controls></audio>
<div class='intro'></div>
<div class="lrc">
<ul id="ul"></ul>
</div>
</div>
<script>
var lrc = `karaoke.add('00:01.375', '00:03.959', '《嬉戏人间》', '400,376,376,384,376,672');
karaoke.add('00:03.959', '00:07.799', '词/张世东 曲/何鹏', '392,352,312,304,344,368,321,359,393,695');
karaoke.add('00:07.799', '00:10.008', '演唱/王莎莎', '353,392,399,353,344,368');
karaoke.add('00:13.411', '00:15.987', '都说那世上无难题', '303,225,208,264,320,351,393,512');
karaoke.add('00:15.987', '00:18.771', '只要你我都肯放弃', '215,249,232,240,264,240,264,1080');
karaoke.add('00:18.963', '00:21.627', '没有人给我登天梯', '304,248,216,288,352,336,368,552');
karaoke.add('00:21.627', '00:24.387', '我就躺下来做烂泥', '232,232,240,216,304,264,192,1080');
karaoke.add('00:24.555', '00:27.043', '总是在被人瞧不起', '288,248,232,288,360,312,344,416');
karaoke.add('00:27.043', '00:29.843', '可是他们又算老几', '240,192,216,272,320,200,280,1080');
karaoke.add('00:30.131', '00:32.731', '还有人和我谈格局', '288,264,248,255,336,304,393,512');
karaoke.add('00:32.731', '00:35.563', '结果是想占我便宜', '208,216,208,248,328,240,304,1080');
karaoke.add('00:35.699', '00:38.403', '金子最终会发光', '304,280,280,336,216,640,648');
karaoke.add('00:38.403', '00:41.155', '我是废柴我不慌', '264,248,304,264,368,224,1080');
karaoke.add('00:41.267', '00:43.891', '生活给我一巴掌', '272,264,248,296,344,264,936');
karaoke.add('00:43.891', '00:46.651', '我说没有上次响', '216,232,248,440,232,312,1080');
karaoke.add('00:46.867', '00:49.427', '别人给我灌鸡汤', '328,296,304,432,303,352,545');
karaoke.add('00:49.427', '00:52.227', '我的嘴刁我不尝', '232,256,392,232,352,256,1080');
karaoke.add('00:52.403', '00:55.011', '命运朝我开黑枪', '272,296,312,512,288,440,488');
karaoke.add('00:55.011', '00:57.795', '我把伤疤当勋章', '240,296,224,312,296,336,1080');
karaoke.add('00:58.011', '01:02.707', '字幕制作/翁奕童苑', '336,272,408,464,424,553,391,376,392,1080');
karaoke.add('01:20.371', '01:22.963', '都说那世上无难题', '296,216,200,280,328,280,472,520');
karaoke.add('01:22.963', '01:25.603', '只要你我都肯放弃', '200,200,200,279,177,192,312,1080');
karaoke.add('01:25.883', '01:28.299', '没有人给我登天梯', '296,256,248,271,313,304,360,368');
karaoke.add('01:28.299', '01:30.155', '我就躺下来做烂泥', '256,200,240,232,272,264,256,136');
karaoke.add('01:31.534', '01:33.935', '总是在被人瞧不起', '288,248,240,272,328,304,360,361');
karaoke.add('01:33.935', '01:36.783', '可是他们又算老几', '231,208,240,304,247,225,313,1080');
karaoke.add('01:37.078', '01:39.566', '还有人和我谈格局', '288,272,256,280,352,296,328,416');
karaoke.add('01:39.566', '01:42.406', '结果是想占我便宜', '232,192,272,320,200,216,328,1080');
karaoke.add('01:42.406', '01:45.246', '金子最终会发光', '320,296,296,392,336,368,536');
karaoke.add('01:45.246', '01:48.006', '我是废柴我不慌', '232,248,280,320,256,344,1080');
karaoke.add('01:48.006', '01:50.782', '生活给我一巴掌', '288,288,352,432,328,352,512');
karaoke.add('01:50.782', '01:53.589', '我说没有上次响', '256,265,407,240,199,360,1080');
karaoke.add('01:53.589', '02:18.598', '别人给我灌鸡汤', '336,280,344,359,281,383,449');
karaoke.add('02:18.598', '02:21.509', '我的嘴刁我不尝', '255,241,359,369,280,327,1080');
karaoke.add('02:21.509', '02:24.310', '命运朝我开黑枪', '280,304,280,304,336,312,840');
karaoke.add('02:24.310', '02:27.150', '我把伤疤当勋章', '215,305,336,280,384,240,1080');
karaoke.add('02:42.149', '02:46.221', '谢谢欣赏', '696,896,1400,1080');
`;
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>
<script>
const intro= document.querySelector('.intro');
let mState = () => audio.paused ? (intro.classList.add('stop')):(intro.classList.remove('stop'));
audio.addEventListener('play', () => mState());
audio.addEventListener('pause', () => mState());
</script>
欣赏老师的佳作，学习了！
好漂亮的变色背景，刚做的一个帖子就是学习的亚伦老师的变色背景，谢谢亚伦老师{:4_187:} 这首歌十分洒脱，很漂亮的ksc字母歌词同步，欣赏亚伦老师好帖{:4_199:} 漂亮！谢谢亚伦老师精彩分享{:4_191:}
页:
[1]