短视频代码切换《西窗秋夜雨》
本帖最后由 亚伦影音工作室 于 2026-5-11 13:07 编辑 <br /><br /><style>#papa{position: relative;
width: 1186px;
height: 640px;
margin-left:-300px;
margin-top: 0px;
overflow: hidden;z-index:12345;
background:url(https://pic1.imgdb.cn/item/69f6d4a598d7db9e97813aeb.png)no-repeat center/cover;
}
zxx-slide {display: block;
width: 100%; height:100%;
position: absolute;
}
.zxx-slide-a {width: 100%; height: 100%;
position: absolute;bottom: 0px;
display: none;
}
.zxx-slide-a.in {
z-index: 1;
}
.zxx-slide-img { width: 100%;
height:100%;object-fit: cover; pointer-events: none;
display: block;}
.zxx-slide-index-x {
position: absolute;
left: 0px; right: 0; bottom: 0px;
text-align: center;
font-size: 0;
z-index: 1;
}
@keyframes seed {
0%{--seed:0}1%{--seed:1}2%{--seed:2}3%{--seed:3}4%{--seed:4}5%{--seed:5}6%{--seed:6}7%{--seed:7}8%{--seed:8}9%{--seed:9}10%{--seed:10}11%{--seed:11}12%{--seed:12}13%{--seed:13}14%{--seed:14}15%{--seed:15}16%{--seed:16}17%{--seed:17}18%{--seed:18}19%{--seed:19}20%{--seed:20}21%{--seed:21}22%{--seed:22}23%{--seed:23}24%{--seed:24}25%{--seed:25}26%{--seed:26}27%{--seed:27}28%{--seed:28}29%{--seed:29}30%{--seed:30}31%{--seed:31}32%{--seed:32}33%{--seed:33}34%{--seed:34}35%{--seed:35}36%{--seed:36}37%{--seed:37}38%{--seed:38}39%{--seed:39}40%{--seed:40}41%{--seed:41}42%{--seed:42}43%{--seed:43}44%{--seed:44}45%{--seed:45}46%{--seed:46}47%{--seed:47}48%{--seed:48}49%{--seed:49}50%{--seed:50}51%{--seed:51}52%{--seed:52}53%{--seed:53}54%{--seed:54}55%{--seed:55}56%{--seed:56}57%{--seed:57}58%{--seed:58}59%{--seed:59}60%{--seed:60}61%{--seed:61}62%{--seed:62}63%{--seed:63}64%{--seed:64}65%{--seed:65}66%{--seed:66}67%{--seed:67}68%{--seed:68}69%{--seed:69}70%{--seed:70}71%{--seed:71}72%{--seed:72}73%{--seed:73}74%{--seed:74}75%{--seed:75}76%{--seed:76}77%{--seed:77}78%{--seed:78}79%{--seed:79}80%{--seed:80}81%{--seed:81}82%{--seed:82}83%{--seed:83}84%{--seed:84}85%{--seed:85}86%{--seed:86}87%{--seed:87}88%{--seed:88}89%{--seed:89}90%{--seed:90}91%{--seed:91}92%{--seed:92}93%{--seed:93}94%{--seed:94}95%{--seed:95}96%{--seed:96}97%{--seed:97}98%{--seed:98}99%{--seed:99}100%{--seed:100}
}
zxx-slide .in {
-webkit-mask: radial-gradient(#000 calc(1% * var(--seed)), transparent calc(1% * var(--seed)));
-webkit-mask-size: 50px 50px;
mask: radial-gradient(#000 calc(1% * var(--seed)), transparent calc(1% * var(--seed)));
mask-size: 50px 50px;
animation: seed 1s;
}
.lyrics{margin: 0;z-index: 20;
top: 89%;
left: 50%;
transform: translate(-50%, -50%);
height: 100px; /* 调整高度，只容纳当前歌词 */
text-align: center;
position: absolute;
}
.lyric-line{
width: 100%;
position: relative;
height: 60px;
overflow: visible;
font: 300 50px '华文隶书', sans-serif;
line-height: 60px;
text-align: left;
white-space: nowrap; /* 禁止换行 */
filter: drop-shadow(#fff 1px 0 0) drop-shadow(#fff 0 1px 0) drop-shadow(#fff -1px 0 0) drop-shadow(#fff 0 -1px 0);
}
.lyric-mask {
position: absolute;
top: 0;
left: 0;
width: 0;
overflow: hidden;
color: #8B4513;
height: 100%;
white-space: nowrap;
}
.lyric-original {
color: #ag0000;
white-space: nowrap;
}
#mdiv {top:12%; left:85%;cursor: pointer;width:120px;height: 120px;animation:rot 10s linear infinite ;position: absolute;filter:drop-shadow(#000 0px 0 1px);z-index: 40;}
@keyframes rot { to { transform: rotate(2turn);} }
</style>
<divid="papa">
<zxx-slide>
<div class="zxx-slide-x">
<p class="zxx-slide-a">
<video class="zxx-slide-img" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/c1972caa86dd1b74b4db2253d98c5614_preview.mp4" loop muted autoplay=""></video>
</p>
<p class="zxx-slide-a">
<video class="zxx-slide-img" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/98197721139e61f32d8d9f2cec628053_preview.mp4" loop muted autoplay=""></video></p>
<p class="zxx-slide-a">
<video class="zxx-slide-img" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/4177c647558d2739e6b6d06f4cf7771c_preview.mp4" loop muted autoplay=""></video></p>
<p class="zxx-slide-a">
<video class="zxx-slide-img" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/6c098757b3f1cf3d52dbac7ea87ee056_preview.mp4" loop muted autoplay=""></video></p>
<p class="zxx-slide-a">
<video class="zxx-slide-img" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/a6fc28f10c6c4e661d72f4c1169c2583_preview.mp4" loop muted autoplay=""></video></p>
<p class="zxx-slide-a">
<video class="zxx-slide-img" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/b65fec1889f678ce9fc2e6280e7909c2_preview.mp4" loop muted autoplay=""></video></p>
<p class="zxx-slide-a">
<video class="zxx-slide-img" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/afdf16c7d4e8878a278c85c93cb1d4f8_preview.mp4" loop muted autoplay=""></video></p>
<p class="zxx-slide-a">
<video class="zxx-slide-img" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/32a4a4a8fddad23038e12179c20c95a5_preview.mp4" loop muted autoplay=""></video></p>
</div>
</zxx-slide>
<img id="mdiv"src="https://pic1.imgdb.cn/item/690c41ba3203f7be00db7fed.png">
<div class="lyrics" >
<div class="lyric-line">
<div class="lyric-mask"></div>
<div class="lyric-original"></div>
</div>
</div>
</div>
<audio id="audio" src="https://static.oldkids.com.cn/upload/2026/05/04/blog_260848378_20260504144433722.mp3"loopautoplay ></audio>
<script>
mdiv.onclick = () => audio.paused ? audio.play(): audio.pause();
audio.addEventListener('playing', () =>mdiv.style.animationPlayState = 'running');
audio.addEventListener('pause', () =>mdiv.style.animationPlayState = 'paused');
mdiv.style.animationPlayState = audio.paused ? 'paused' : 'running';
(function() {
const vids = document.querySelectorAll('.zxx-slide-img');
var mState = () => {
vids.forEach(vid => audio.paused ? vid.pause(): vid.play() );
};
audio.onplaying = audio.onpause = () => mState();
})();
</script>
<script>
var eleZxxSlides = document.querySelectorAll('zxx-slide');
[].slice.call(eleZxxSlides).forEach(function (container) {
var timerSlide = null;
var indexSlide = 0;
container.addEventListener('mouseover', function () {
clearTimeout(timerSlide);funSlide();
});
container.addEventListener('mouseout', function () {
clearTimeout(timerSlide);
funSlide();
});
var eleSlides = [].slice.call(container.querySelectorAll('p'));
var eleButtons = [].slice.call(container.querySelectorAll('button'));
var funSlide = function() {
eleSlides.forEach(function (slide, index) { if(!audio.paused){
if (indexSlide == index) {
slide.classList.add('in');
slide.style.display = 'block';
} else if (slide.classList.contains('in')) {
slide.classList.remove('in');
}}
});
eleButtons.forEach(function (button, index) {
button.classList.remove('active');
if (indexSlide == index) {
button.classList.add('active');
}
});
timerSlide = setTimeout(function () {
indexSlide++;
if (indexSlide == eleSlides.length) {
indexSlide = 0;
}
funSlide();
}, 8000);
}
indexSlide++;
setTimeout(funSlide, 96);
});
</script>
<script>
// 歌词解析ksc歌词或lrc歌词
const lrc = ` 西窗秋夜雨-快歌rap
作词：雅乐萌妞
作曲：雅乐萌妞
演唱：快歌rap
Lrc编辑 亚伦
出品 亚伦影音工作室
阶前木叶染新霜 落尽旧山河
楞伽西窗留孤影 摇碎竹婆娑
天垂晚云吞斜日 寒色侵帘幕
我把旧轴缓缓展 墨迹半消磨
一弯月 穿廊过庭听云落
一檐雨 敲碎阶前闲寂寞
展襟时 多少前尘翻涌过
蜡泪尽 犹剩余温不肯涸
(Music)
案前残香绕铜炉 烟轻绕指柔
空阶冷雨打梧桐 声绕旧楼头
当年凭栏同把酒 你说山水游
如今只剩窗间月 照我白襟袖
一弯月 穿廊过庭听云落
一檐雨 敲碎阶前闲寂寞
展襟时 多少前尘翻涌过
蜡泪尽 犹剩余温不肯涸
(Music)
秋风吹老半世漂泊 月仍在西坡
云雨过後天山路 再没人同我走过
今夜再展旧衣襟 泪痕还斑驳
原来相思到深处 无话也成歌
檐外月 漫漫西坡听云落
窗外语 声声都是雨漂泊
展襟处 当年霜雪还留过
泪已干 相思还在字里卧
檐外月 漫漫西坡听云落
窗外语 声声都是雨漂泊
展襟处 当年霜雪还留过
泪已干 相思还在字里卧
谢谢欣赏
亚伦影音
`;
const audio = document.getElementById('audio');
const lyrics = parseLyrics(lrc);
const lyricMask = document.querySelector('.lyric-mask');
const lyricOriginal = document.querySelector('.lyric-original');
let currentIndex = -1;
let currentLyric = null;
// 解析歌词（支持两种格式）
function parseLyrics(lrcText) {
const lyrics = [];
if (lrcText.includes('karaoke.add')) {
const lineRegex = /karaoke\.add\('([^']+)', '([^']+)', '([^']+)', '([^']+)'\);/g;
let match;
while ((match = lineRegex.exec(lrcText)) !== null) {
const startTime = timeToMs(match);
const endTime = timeToMs(match);
const text = match.replace(/\[|\]/g, '').trim();
const durations = match.split(',').map(Number);
if (text) {
lyrics.push({startTime, endTime, text, durations});
}
}
}
else if (lrcText.includes('[')) {
const lines = lrcText.split('\n').filter(line => line.trim());
lines.forEach((line, index) => {
const timeMatch = line.match(/\[(\d+:\d+\.\d+)\]/);
if (timeMatch) {
const timeStr = timeMatch;
const text = line.replace(/\[.*?\]/, '').trim();
if (text) {
const startTime = timeToMs(timeStr);
const nextLine = lines;
const nextTimeMatch = nextLine ? nextLine.match(/\[(\d+:\d+\.\d+)\]/) : null;
const endTime = nextTimeMatch ? timeToMs(nextTimeMatch) : startTime + 5000;
lyrics.push({
startTime,
endTime,
text,
durations: calculateCharDurations(text, startTime, endTime)
});
}
}
});
}
return lyrics;
}
function calculateCharDurations(text, startTime, endTime) {
const totalDuration = endTime - startTime;
const charCount = text.length;
const baseDur = Math.floor(totalDuration / charCount);
const durations = new Array(charCount).fill(baseDur);
const remainder = totalDuration % charCount;
for (let i = 0; i < remainder; i++) {
durations++;
}
return durations;
}
function timeToMs(timeStr) {
const parts = timeStr.split(':');
const minutes = parseInt(parts, 10);
const secondsAndMs = parts.split('.');
const seconds = parseInt(secondsAndMs, 10);
const ms = parseInt(secondsAndMs || 0, 10);
return minutes * 60 * 1000 + seconds * 1000 + ms;
}
function getCurrentLyricIndex(lyrics, currentTimeMs) {
for (let i = 0; i < lyrics.length; i++) {
if (currentTimeMs >= lyrics.startTime && currentTimeMs <= lyrics.endTime) {
return i;
}
}
return -1;
}
function updateLyricDisplay(index) {
if (index < 0 || index >= lyrics.length) return;
currentIndex = index;
currentLyric = lyrics;
lyricOriginal.textContent = currentLyric.text;
lyricMask.textContent = currentLyric.text;
lyricMask.style.width = '0%';
}
function updateLyricMask(currentTimeMs) {
if (!currentLyric) return;
const lyricStartTime = currentLyric.startTime;
const elapsed = currentTimeMs - lyricStartTime;
const totalDuration = currentLyric.durations.reduce((sum, d) => sum + d, 0);
let charIndex = 0;
let accumulatedTime = 0;
for (let i = 0; i < currentLyric.durations.length; i++) {
accumulatedTime += currentLyric.durations;
if (elapsed <= accumulatedTime) {
charIndex = i + 1;
break;
}
}
if (elapsed >= totalDuration) {
charIndex = currentLyric.text.length;
}
charIndex = Math.min(charIndex, currentLyric.text.length);
const tempSpan = document.createElement('span');
tempSpan.style.visibility = 'hidden';
tempSpan.style.position = 'absolute';
tempSpan.style.fontSize = '50px';
tempSpan.style.fontWeight = '800';
document.body.appendChild(tempSpan);
const visibleText = currentLyric.text.substring(0, charIndex);
tempSpan.textContent = visibleText;
const width = tempSpan.offsetWidth;
document.body.removeChild(tempSpan);
lyricMask.style.width = `${width}px`;
}
// 监听更新歌词
audio.addEventListener('timeupdate', () => {
const currentTimeMs = audio.currentTime * 1000;
const index = getCurrentLyricIndex(lyrics, currentTimeMs);
if (index !== currentIndex) {
updateLyricDisplay(index);
}
updateLyricMask(currentTimeMs);
});
updateLyricDisplay(0);
</script> 这个视频能正常切换，制作非常漂亮。歌词同步有问题，倒“一弯月 穿廊过庭听云落”这句就不动了。
看了看源代码，歌词时间的确乱了{:4_187:} 红影 发表于 2026-5-5 10:17
这个视频能正常切换，制作非常漂亮。歌词同步有问题，倒“一弯月 穿廊过庭听云落”这句就不动了。
看了看 ...
已经修改，谢谢指点！ 欣赏佳作，问候亚伦。 视频切换顺畅，谢谢亚伦老师精彩分享{:4_180:} 亚伦影音工作室 发表于 2026-5-5 11:02
已经修改，谢谢指点！
辛苦了，问好亚伦老师{:4_187:} 亚纶这个视频背景用了特效代码，以前我是图片转换，现在亚纶是视频转换，不错的效果{:4_199:} 感谢亚纶精彩分享
页:
[1]