竖排歌词不滚动，请马老师让它动起来，谢谢[已解决] - 第2页 - 〖互。助〗求助探讨 - 花潮论坛

马黑黑 发表于 2025-4-8 22:42

杨帆发表于 2025-4-8 21:39
由衷感谢，谢谢马老师鼓励！

我多次点刷新按钮，可只有前5句，看不到第6句及以后的歌词呀

原因是音乐此刻缓冲太慢

杨帆发表于 2025-4-9 01:09

马黑黑发表于 2025-4-8 22:42
原因是音乐此刻缓冲太慢

点击进度条歌词不滚动，应是代码问题，请老师抽空对代码修正、完善，由衷感谢{:4_191:}

夕阳黄昏 发表于 2025-4-9 11:16

杨帆发表于 2025-4-8 17:30
是，适当套用就好，可全套会失去探索过程的乐趣

<style>
#papa {
position: absolute;
left: 50%;
transform: translateX(-50%);
width: clamp(800px, 75vw, 1280px);
height: clamp(450px, 75vh, 750px);
background: #eee url('https://pic.imgdb.cn/item/668a84acd9c307b7e9437ddf.jpg') no-repeat center/cover;
z-index: 1;
}

.zw {
height: clamp(450px, 75vh, 750px);
margin: 30px;
--state: paused;
z-index: 1;
}

#lrcDiv {
writing-mode: vertical-rl;
--hlcolor: #FF44AA;
position: absolute;
top: 1%;
right: 10%;
display: flex;
flex-direction: column;
gap: 6px;
width: 145px;
height: 650px;
overflow: hidden;
font: normal 18px/24px 'Microsoft YaHei', sans-serif;
text-align: center;
color: #FFBB66;
background: none;
z-index: 5;
}

#lrcDiv>p {
margin: 0;
padding: 0;
transition: .95s;
}

#lrcDiv>p.hlight {
color: var(--hlcolor);
font-size: 28px;
font-weight: bold;
}

#mplayer {
z-index: 5;
--track: silver;
--prog: red;
--percent: 0;
display: flex;
left: 300px;
top: 580px;
gap: 15px;
flex-direction: column;
align-items: center;
width: 650px;
background: none;
color: white;
padding: 15px;
position: absolute;
}

#btns-area {
width: 100%;
display: flex;
justify-content: space-between;
margin-top: 15px;
}

#btn-play {
width: 20px;
height: 20px;
cursor: pointer;
position: relative;
}

#btn-play:hover::after {
opacity: .7;
filter: alpha(opacity:.5);
}

#btn-play::after {
position: absolute;
content: '';
width: 100%;
height: 100%;
background: var(--prog);
clip-path: var(--clip);
}

#progDiv {
z-index: 5;
width: 100%;
height: 10px;
background: linear-gradient(to right, var(--prog) var(--percent), var(--track) var(--percent), var(--track) 0) no-repeat 0 50% / 100% 2px;
cursor: pointer;
}

.play {
--clip: polygon(10% 0, 100% 50%, 10% 100%);
}

.pause {
--clip: polygon(40% 0, 40% 100%, 20% 100%, 20% 0, 80% 0, 80% 100%, 60% 100%, 60% 0);
}

.vid {
position: absolute;
width: 100%;
height: 100%;
opacity: .8;
object-fit: cover;
mask: radial-gradient(transparent 20%, red);
-webkit-mask: radial-gradient(transparent 20%, red);
pointer-events: none;
left: 0px;
top: 0px;
}
</style>
<div id="papa">
<div id="lrcDiv"></div>
<div id="mplayer">
<div id="btns-area">
   <div id="time1">00:00</div>
   <div id="btn-play" class="pause"></div>
   <div id="time2">00:00</div>
</div>
<div id="progDiv"></div>
</div>
<video class="vid " src="https://bpic.588ku.com/video_listen/588ku_video/22/11/03/14/51/00/video636364d43e50d.mp4" loop muted autoplay=""></video>
<audio src="https://cccimg.com/view.php/d05d8a08510c3c47ab212b4fa6668f52.mp3" autoplay loop></audio>
</div>
<div class="zw"></div>

<script>
const mplayer = document.querySelector('#mplayer');
const aud = document.querySelector('audio');
const lrcDiv = document.querySelector('#lrcDiv');
const progDiv = document.querySelector('#progDiv');
const btnPlay = document.querySelector('#btn-play');
   const vids = document.querySelectorAll('video');

   let lrcAr = [], isFScreen = false;
   let lineHeight = 40, showLines = 5; // 滚动需要的关键参数
lrcDiv.style.width = lineHeight * showLines + 'px'; // 根据行数计算容器的宽度

   const getLrcAr = (text) => {
const ar = text.trim().split(/[\r\n]+/g);
var reg = /\[(\d+)[.:](\d+)[.:](\d+)\](.*)/;
ar.forEach(item => {
let result = item.match(reg);
let tmsg = parseInt(result) * 60 + parseInt(result) + parseInt(result) / 1000;
lrcAr.push(.trim()]);
let p = document.createElement('p');
p.textContent = result.trim();
lrcDiv.appendChild(p);

});
lrcAr.sort((a, b) => a - b);
};

const updatePlayerDatas = () => {
const percent = (aud.currentTime / aud.duration) * 100;
time1.innerText = formatTime(aud.currentTime);
time2.innerText = formatTime(aud.duration);
mplayer.style.setProperty('--percent', percent + '%');
for (let i = 0; i < lrcAr.length; i ++) {
const lrc = {time: lrcAr[ i ], text: lrcAr[ i ]};
const next = i < lrcAr.length - 1 ? lrcAr : null;
const p = lrcDiv.children[ i ];
if (aud.currentTime >= lrc.time && (!next || aud.currentTime < next)) {
p.classList.add('hlight');
//lrcDiv.scroll({left: 0, top: p.offsetLeft - lrcDiv.offsetHeight / 2 + 12, behavior: 'smooth'});
// 滚动的关键代码，与原来的比较下就知道为什么不动了。
lrcDiv.scroll({left: p.offsetLeft - (Math.ceil(showLines / 2) * lineHeight) + lineHeight, top: 0, behavior: 'smooth'});
} else {
p.classList.remove('hlight');
}
}
};

const formatTime = (seconds) => {
const mins = Math.floor(seconds / 60);
const secs = Math.floor(seconds % 60);
return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
};

const mState = () => {
if (aud.paused) {
btnPlay.className = 'play';
btnPlay.title = '点击播放';
playvids(false);
papa.style.setProperty('--state', 'paused');
} else {
btnPlay.className = 'pause';
btnPlay.title = '点击暂停';
playvids(true);
papa.style.setProperty('--state', 'running');
}
};

   const playvids = (flag) => {
if(!vids) return;
vids.forEach(vid => flag ? vid.play() : vid.pause());
};

progDiv.addEventListener('click', (e) => aud.currentTime = e.offsetX / progDiv.offsetWidth * aud.duration);
progDiv.addEventListener('mousemove', (e) => progDiv.title = formatTime(e.offsetX / progDiv.offsetWidth * aud.duration));

const lrc = `
时光匆匆如流水（Live 合唱版)-付飞社
词：未子夫
曲：李勇军
编曲：姜凯升
后期：鲁晓锋
和声：凌菲
制作人：李勇军工作室
OP：新创焦桐文化
【曲库专用】
来到人世间受苦又受累
尝尽了人生百般滋味
一路坎坷雨打又风吹
回首这半生我太过狼狈
春去秋来花开花枯萎
转眼我青丝已经成了灰
想找个地方好好醉一回
又害怕醉了没人可依偎
时光匆匆岁月如流水
往事随风一去不再回
不知不觉容颜已憔悴
我这辈子遭了太多罪
时光匆匆岁月如流水
人到了中年没路可以退
看遍了人间是是与非非
我若心碎谁给我安慰
谁给我安慰
春去秋来花开花枯萎
转眼我青丝已经成了灰
想找个地方好好醉一回
又害怕醉了没人可依偎
时光匆匆岁月如流水
往事随风一去不再回
不知不觉容颜已憔悴
我这辈子遭了太多罪
时光匆匆岁月如流水
人到了中年没路可以退
看遍了人间是是与非非
我若心碎谁给我安慰
谁给我安慰

`;

getLrcAr(lrc);

aud.addEventListener('timeupdate', updatePlayerDatas);
aud.addEventListener('playing', mState);
aud.addEventListener('pause', mState);
btnPlay.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());

</script>

夕阳黄昏 发表于 2025-4-9 11:19

杨帆发表于 2025-4-9 12:50

夕阳黄昏发表于 2025-4-9 11:19

终于实现预期，由衷感谢老师帮助解决了困扰好久的问题，夕阳老师您辛苦了{:4_190:}

页: 1 [2]

花潮论坛's Archiver