赵丽蓉评剧《花为媒》选段《报花名》
<style>#papa{position: relative;
width: 1186px;
height: 640px;
margin-left:-180px;
margin-top: 0px;
overflow: hidden;z-index:12345;
background:url('https://up.mediy.cn/%E8%B5%B5%E4%B8%BD%E8%93%89%E8%AF%84%E5%89%A7%E3%80%8A%E8%8A%B1%E4%B8%BA%E5%AA%92%E3%80%8B%E9%80%89%E6%AE%B5%E3%80%8A%E6%8A%A5%E8%8A%B1%E5%90%8D%E3%80%8B%E5%88%B6%E4%BD%9C_862692577c12ab0514e34bcb4faaa068.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://up.mediy.cn/%E8%B5%B5%E4%B8%BD%E8%93%89%E8%AF%84%E5%89%A7%E3%80%8A%E8%8A%B1%E4%B8%BA%E5%AA%92%E3%80%8B%E9%80%89%E6%AE%B5%E3%80%8A%E6%8A%A5%E8%8A%B1%E5%90%8D%E3%80%8B%E5%88%B6%E4%BD%9C_ace7e2f3d0053d9a05056f312735bc94.mp4" loop muted autoplay=""></video>
</p>
<p class="zxx-slide-a">
<video class="zxx-slide-img" src="https://up.mediy.cn/%E8%B5%B5%E4%B8%BD%E8%93%89%E8%AF%84%E5%89%A7%E3%80%8A%E8%8A%B1%E4%B8%BA%E5%AA%92%E3%80%8B%E9%80%89%E6%AE%B5%E3%80%8A%E6%8A%A5%E8%8A%B1%E5%90%8D%E3%80%8B%E5%88%B6%E4%BD%9C_ace7e2f3d0053d9a05056f312735bc94.mp4" loop muted autoplay=""></video></p>
<p class="zxx-slide-a">
<video class="zxx-slide-img" src="https://up.mediy.cn/%E8%AF%84%E5%89%A7%E7%8E%B0%E5%9C%BA%E5%94%B1%E8%A7%86%E9%A2%91%E7%94%9F%E6%88%90_91563451259d86d794aac3df6797fade.mp4" loop muted autoplay=""></video></p>
<p class="zxx-slide-a">
<video class="zxx-slide-img" src="https://up.mediy.cn/%E8%AF%84%E5%89%A7%E7%8E%B0%E5%9C%BA%E5%94%B1%E8%A7%86%E9%A2%91%E7%94%9F%E6%88%90%20(1)_c072e23ef9c7d84cd3e3365036ffe734.mp4" loop muted autoplay=""></video></p>
<p class="zxx-slide-a">
<video class="zxx-slide-img" src="https://up.mediy.cn/%E8%B5%B5%E4%B8%BD%E8%93%89%E8%AF%84%E5%89%A7%E3%80%8A%E8%8A%B1%E4%B8%BA%E5%AA%92%E3%80%8B%E9%80%89%E6%AE%B5%E3%80%8A%E6%8A%A5%E8%8A%B1%E5%90%8D%E3%80%8B%E5%88%B6%E4%BD%9C_ace7e2f3d0053d9a05056f312735bc94.mp4" loop muted autoplay=""></video></p>
<p class="zxx-slide-a">
<video class="https://up.mediy.cn/%E8%AF%84%E5%89%A7%E7%8E%B0%E5%9C%BA%E5%94%B1%E8%A7%86%E9%A2%91%E7%94%9F%E6%88%90_91563451259d86d794aac3df6797fade.mp4" loop muted autoplay=""></video></p>
<p class="zxx-slide-a">
<video class="zxx-slide-img" src="https://up.mediy.cn/%E8%AF%84%E5%89%A7%E7%8E%B0%E5%9C%BA%E5%94%B1%E8%A7%86%E9%A2%91%E7%94%9F%E6%88%90%20(1)_c072e23ef9c7d84cd3e3365036ffe734.mp4" loop muted autoplay=""></video></p>
<p class="zxx-slide-a">
<video class="zxx-slide-img" src="https://up.mediy.cn/%E8%B5%B5%E4%B8%BD%E8%93%89%E8%AF%84%E5%89%A7%E3%80%8A%E8%8A%B1%E4%B8%BA%E5%AA%92%E3%80%8B%E9%80%89%E6%AE%B5%E3%80%8A%E6%8A%A5%E8%8A%B1%E5%90%8D%E3%80%8B%E5%88%B6%E4%BD%9C_ace7e2f3d0053d9a05056f312735bc94.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://up.mediy.cn/%E8%B5%B5%E4%B8%BD%E8%93%89%E8%AF%84%E5%89%A7%E3%80%8A%E8%8A%B1%E4%B8%BA%E5%AA%92%E3%80%8B%E9%80%89%E6%AE%B5%E3%80%8A%E6%8A%A5%E8%8A%B1%E5%90%8D%E3%80%8B_c527e90b1ab63ee8f16e62cb847051fa.mp3"loopautoplay controlslist="nodownload"></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();
});
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 = ` 姑娘，您得等，等。
嗯？等什么？
等着，我还得报花名呢。
嘿嘿嘿。
您笑什么？
你连一年四季开什么花你都不知道，
您还会报花名呢？
我听了姑娘的，那我就知道了。
你当真要报？
当真要报
好吧，那你就报吧。
嗨，你要是忘了啊，姑娘我给你提个醒。
对，我要忘了，您提醒。我说报就报，
我的五姑娘啊！
正月里开迎春，十四五六，阮妈呀！
你错了。
没错啊。
正月里你怎么出来个六呢？
是六
六不对
六，六，六月六看谷秀，春打六九头
二月里开杏花，杏子如豆。
什么呀？你可又错了。
我没错。
二月里开杏花，你怎么出来个豆呢？
是，豆豆，到我们老家都是豆
豆豆腐脑，就切糕，啊，还有两个大馒头。
三月里开桃花，清明以后，
后生子去上坟，哭他的舅舅。
四月里开梨花，大雨没下透，下不透，
种高粱净出些秼头。
五月里开石榴，锅底儿漏。
漏了锅，撒了米，没有法子熬粥。
六月里开荷花，荷莲生藕，
藕坑里去摸鱼，我就摸啊！
你摸什么呀？
我就摸了一个——大泥鳅！
你看多逗啊，我摸一大泥鳅。
七月里开什么花啊？
开开开，去，当然，开花开花，
七月开什么花啊？
您看看，我给忘了。
您先歇一会，我一会就想起来。
那你就好好想想。
哎，到我们那七月八月都开花。
啊，阮妈妈！
哎呦，我的大相公啊！
阮妈妈，你怎么才来呀？
你都活活把我给急死了！
啊，阮妈妈！
别嚷啊，啊，姑娘在这呢。
哦，带我去看。
别去看。
那我就回去。
别走。
我怎么办呐？
你，你蹲下。
哎，相亲哪有蹲下的道理呀？
相亲都蹲着。
哎，你蹲下，我把你带进去。
叫我呢？
那还叫我呢！
哎呦，蹲下呗。
七月里开菱花，
八月里开桂花，
九月里开菊花，
十月里也开花。
十一月，月……
十一月开什么花啊？
哎呀，开……
啊，阮妈妈！
哎。
我往哪里去呀？
大树后边假山石。
假山石？
啊
哎，
假山石里头也开花。
十二月开什么花啊？
十二月不是天冷吗？
哎呦，就把那花啊，
都给冻死了啊！
阮儿妈妈！
哎呦，你，你别出来，进进进进！
啊哈，开什么花啊，就不开花。
`;
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>
页:
[1]