跟着感觉走－赵丽蓉
<style>#papa{position: relative;
width: 1186px;
height: 640px;
margin-left:-180px;
margin-top: 0px;
overflow: hidden;z-index:12345;
background:url('https://pan.suyanw.cn/view.php/64ebd1b1cd6b25e14e89626681f09652.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://pan.suyanw.cn/view.php/3b6b90db3f01f55f11f39745f7935807.mp4" loop muted autoplay=""></video>
</p>
<p class="zxx-slide-a">
<video class="zxx-slide-img" src="https://pan.suyanw.cn/view.php/3b6b90db3f01f55f11f39745f7935807.mp4" loop muted autoplay=""></video></p>
<p class="zxx-slide-a">
<video class="zxx-slide-img" src="https://pan.suyanw.cn/view.php/3b6b90db3f01f55f11f39745f7935807.mp4" loop muted autoplay=""></video></p>
<p class="zxx-slide-a">
<video class="zxx-slide-img" src="https://pan.suyanw.cn/view.php/3b6b90db3f01f55f11f39745f7935807.mp4" loop muted autoplay=""></video></p>
<p class="zxx-slide-a">
<video class="zxx-slide-img" src="https://pan.suyanw.cn/view.php/3b6b90db3f01f55f11f39745f7935807.mp4" loop muted autoplay=""></video></p>
<p class="zxx-slide-a">
<video class="https://pan.suyanw.cn/view.php/3b6b90db3f01f55f11f39745f7935807.mp4" loop muted autoplay=""></video></p>
<p class="zxx-slide-a">
<video class="zxx-slide-img" src="https://pan.suyanw.cn/view.php/3b6b90db3f01f55f11f39745f7935807.mp4" loop muted autoplay=""></video></p>
<p class="zxx-slide-a">
<video class="zxx-slide-img" src="https://pan.suyanw.cn/view.php/3b6b90db3f01f55f11f39745f7935807.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://pan.suyanw.cn/view.php/406129533363e44a4547bc001b07053c.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]