学习套用亚伦老师的代码《骑着二八闯天涯》
本帖最后由 老谟深虑 于 2025-4-16 12:52 编辑 <br /><br /> 学习套用亚伦老师的代码，向老师致谢。<style>
#bj{position: relative;width: 1100px;height: 700px; margin: 130px 0 50px calc(50% - 651px);;overflow:hidden;background:url('https://cccimg.com/view.php/224f9f294cdcf0b23fe03bdd8f3a4191.jpg')no-repeat center / cover;--state: paused;--opt: .2;border-radius: 1px;box-shadow:0px 0px 0px 1px #fff,0px 0px 0px 3px #EE0B42; }
#geci{--motion:cover2;--tt:2s;--state:paused;--bg:#880000;position:absolute;left: 51%; transform: translate(-50%);top: 60%;font:300 2.6em 华文隶书;color:#000;white-space:pre;-webkit-background-clip:text;filter:drop-shadow(#fff 1px 0 0)drop-shadow(#fff 0 1px 0)drop-shadow(#fff -1px 0 0) drop-shadow(#fff 0 -1px0);z-index: 6;display: none;cursor: pointer;}
#geci::before{position: absolute;content: attr(data-geci);width: 100%; height: 100%;color: transparent;overflow: hidden;white-space: pre;background: var(--bg);clip-path: inset(0 100% 0 0);-webkit-background-clip: text;animation: var(--motion) var(--tt) linear forwards;animation-play-state: var(--state);}
@keyframes cover1{ to { clip-path: inset(0 0 0 0); } }@keyframes cover2 { to { clip-path: inset(0 0 0 0); } }
#mplayer { position: absolute; text-align: center; top: 85%; LEFT:33%;z-index: 60;color:#ffffff;}
.hide{display: none;}
#mplayer::before {position: absolute;content: attr(data-tt);left: 0;bottom: 25px;width: 100%;text-align-last: justify;}
#mprog { width: 500px;height: 2px; accent-color: darkgreen; outline: none; cursor: pointer; }
#btnplay {width: 70px; height: 70px; cursor: pointer; animation: rotating 6s infinite linear var(--state);}
@keyframes rotating { to { transform: rotate(360deg); } }
.playbtn, .pausebtn,#world,#zs{border-radius: 4px;position: relative;
color:#eee;background:#06075a;box-shadow:0px 0px 0px 1px #999;
padding: 4px 8px;
font-size: 12px;
border: none;
cursor: pointer;margin: 8px 5px;left: 5%;
}
#全屏{position: absolute;}
#退出{ position: absolute;opacity:0;}
</style>
<style>
#dhgc{position:absolute;width: 540px;
height: 450px;z-index: 6;
border: 0px solid white;cursor: pointer;
overflow: hidden;margin: 8% 10px;
}
.lrc {position:absolute;width: 100%;
height: 100%;
border: 0px solid white;
margin: 0px 0px;
}
.lrc #ul {width: 100%;
padding: 0;list-style: none;transition: 0.3s all ease;
margin: 0}
.lrc #ul li {
font-family:华文琥珀;
font-size: 20px;
color: #100F54;
font-weight:100;
transition: .3s all ease;
list-style-type: none;
text-align: center;display: block;
width: 100%;
margin: 0 auto;
height: 50px;
line-height: 35px;
}
.lrc #ulli.active{ font-size: 25px;
color: #3790d0;font-weight:100;
text-align: center; filter:drop-shadow(#000 1px 1px 0px);
}
</style>
<div id="bj">
<div id="mplayer" data-tt="00:00 00:00" >
<img id="btnplay" src="https://638183.freep.cn/638183/t23/btn/f3.png " title="播放/暂停" alt="" /><br>
<input id="mprog" type="range" min="0" max="50" step="any" value="0" title="调节进度" />
</div>
<audio id="audio" src="https://cccimg.com/view.php/3ac64961a736d9ed062389cbbbdb8dfc.mp3" loop autoplay></audio>
<div id="geci"></div>
<div id="dhgc"><div class="lrc" >
<ul id="ul">
</ul>
</div>
</div>
<button class="playbtn"onclick="btn1()"title="klok歌词模式">klok歌词</button>
<button class="pausebtn" onclick="btn2()"title="多行歌词模式">多行歌词</button>
<button id="world" onclick="btn3()"title="播放器模式">bfq隐藏</button>
<buttonid="zs"onclick="btnClick()"title="屏展模式" >屏展模式</button>
<div id="全屏"></div><div id="退出" ></div>
</div>
<script>
let lrc = `侯云 - 骑着二八闯天涯（DJ默涵版）
作词：宋友诚
作曲：大飞
骑着二八我勇闯天涯
骑着二八
听说世界很大我得去溜达
一辈子不能过得憋屈巴拉
还没亲眼瞧瞧人间的繁华
也想体验一把四海为家
听说时间很贵青春更无价
可该省就得省该花还得花
兜里没钱那咱就再咬咬牙
沿着国道318去趟拉萨
骑着二八我勇闯天涯
喝完青岛我吹瓶雪花
风浪越大我越要潇洒
心比天高我啥也不怕
骑着二八我勇闯天涯
什么烦恼我全都抛下
人生太短人间太复杂
尽情的绽放我的年华
听说时间很贵青春更无价
可该省就得省该花还得花
兜里没钱那咱就再咬咬牙
沿着国道318去趟拉萨
骑着二八我勇闯天涯
喝完青岛我吹瓶雪花
风浪越大我越要潇洒
心比天高我啥也不怕
骑着二八我勇闯天涯
什么烦恼我全都抛下
人生太短人间太复杂
尽情的绽放我的年华
骑着二八我勇闯天涯
喝完青岛我吹瓶雪花
风浪越大我越要潇洒
心比天高我啥也不怕
骑着二八我勇闯天涯
什么烦恼我全都抛下
人生太短人间太复杂
尽情的绽放我的年华
`;
audio.addEventListener("seeked", myFunction)
audio.addEventListener("timeupdate", mylrc);
let mKey = 0, mFlag = true;
function lrcTime (ar) {
let tmpAr = [];
for(j = 0; j <ar.length - 1; j ++) {
if(j !== ar.length - 1) tmpAr = parseFloat((ar - ar).toFixed(1));
}
let aver = parseInt(tmpAr.reduce((a,b) => a + b) / (tmpAr.length - 1));
tmpAr.push(aver);
tmpAr.forEach((item,key) => {
ar = item > aver ? aver : item;
});
return ar;
};
function getLrcAr(str) {
str = str.trim();
let lines = [], lrcAr = [];
let reg = /\[(\d{1,}:\d{1,}.\d{1,})\](.*)/g;
if(!str.match(reg)) return;
lines = str.replace(reg,'$1-{}-$2').split('\n');
for(k = 0; k < lines.length; k ++) {
lrcAr = [];
for(j = 0; j < 3; j ++) {
let tmpAr = lines.split('-{}-');
lrcAr = j === 0 ? toSecs(tmpAr) : tmpAr;
}
}
return lrcTime(lrcAr);
};
function toSecs (lrcTime){
let reg = /\d{2,}/g;
let ar = lrcTime.match(reg);
return ar*60 + parseInt(ar) + parseInt((ar)/1000);
};
function showLrc(time){
let name = mFlag ? 'cover1' : 'cover2';
geci.innerHTML = lrcAr;
geci.dataset.geci = lrcAr;
geci.style.setProperty('--motion', name);
geci.style.setProperty('--tt', time + 's');
geci.style.setProperty('--state', 'running');
mKey += 1;
mFlag = !mFlag;
};
function myFunction(){
for (j = 0; j < lrcAr.length; j++) {
if (audio.currentTime <= lrcAr) {
mKey = j - 1;
break;
}
}
if (mKey < 0) mKey = 0;
if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;
let time = lrcAr - (audio.currentTime - lrcAr);
showLrc(time);
};
function mylrc() {
for (j = 0; j < lrcAr.length; j++) {
if (audio.currentTime >= lrcAr) {
cKey = j;
if (mKey === j) showLrc(lrcAr);
else continue;
}
}
}
audio.addEventListener('play', playing,false);
audio.addEventListener('pause', playing,false);
function playing() {
geci.style.setProperty('--state', audio.paused ? 'paused' : 'running');
}
let lrcAr = getLrcAr(lrc);
</script>
<script>
var mseek = false;
var mState = () => audio.paused ?
( btnplay.style.setProperty('--state', 'paused'), btnplay.title = '点击播放' ) :
( btnplay.style.setProperty('--state', 'running'), btnplay.title = '点击暂停' );
let toMin = (val) => {
if (!val) return '00:00';
val = Math.floor(val);
let min = parseInt(val / 60),
sec = parseFloat(val % 60);
if (min < 10) min = '0' + min;
if (sec < 10) sec = '0' + sec;
return min + ':' + sec;
}
audio.addEventListener('timeupdate', () => {
if (!mseek) mprog.value = audio.currentTime / audio.duration * mprog.max;
mplayer.dataset.tt = toMin(audio.currentTime) + ' ' + toMin(audio.duration);
});
audio.addEventListener('pause', () => mState());
audio.addEventListener('playing', () => mState());
mprog.onmousedown = () => mseek = true;
mprog.onmouseup = () => mseek = false;
mprog.onchange = () => audio.currentTime = audio.currentTime = mprog.value / mprog.max * audio.duration;
dhgc.onclick =geci.onclick =btnplay.onclick = () => audio.paused ? (audio.play()) : (audio.pause());
</script>
<script>
// 最开始获取到的歌词列表是字符串类型（不好操作）
let lrcArr = lrc.split('\n');
// 接收修正后的歌词数组
let result = [];
// 获取所要用到的dom列表
doms = {
audio: document.querySelector("#audio"),
ul: document.querySelector("#ul"),
container: document.querySelector(".lrc")
}
// 将歌词数组转成由对象组成的数组，对象有time和word两个属性（为了方便操作）
for (let i = 0; i < lrcArr.length; i++) {
var lrcData = lrcArr.split(']');
var lrcTime = lrcData.substring(1);
var obj = {
time: parseTime(lrcTime),
word: lrcData
}
result.push(obj);
}
// 将tiem转换为秒的形式
function parseTime(lrcTime) {
lrcTimeArr = lrcTime.split(":")
return +lrcTimeArr * 60 + +lrcTimeArr;
}
// 获取当前播放到的歌词的下标
function getIndex() {
let Time = doms.audio.currentTime;
for (let i = 0; i < result.length; i++) {
if (result.time > Time) {
return i - 1;
}
}
}
// 创建歌词列表
function createElements() {
let frag = document.createDocumentFragment(); // 文档片段
for (let i = 0; i < result.length; i++) {
let li = document.createElement("li");
li.innerText = result.word;
frag.appendChild(li);
}
doms.ul.appendChild(frag);
}
createElements();
// 获取显示窗口的可视高度
let containerHeight = doms.container.clientHeight;
// 获取歌词列表的可视高度
let liHeight = doms.ul.children.clientHeight;
// 设置最大最小偏移量，防止显示效果不佳
let minOffset = 0;
let maxOffset = doms.ul.clientHeight - containerHeight;
// 控制歌词滚动移动的函数
function setOffset() {
let index = getIndex();
// 计算滚动距离
let offset = liHeight * index - containerHeight / 2 + liHeight / 2;
if (offset < minOffset) {
offset = minOffset;
};
if (offset > maxOffset) {
offset = maxOffset;
};
// 滚动
doms.ul.style.transform = `translateY(-${offset}px)`;
// 清除之前的active
let li = doms.ul.querySelector(".active")
if (li) {
li.classList.remove("active");
}
// 为当前所唱到的歌词添加active
li = doms.ul.children;
if (li) {
li.classList.add("active");
}
};
// 当audio的播放时间更新时，触发该事件
doms.audio.addEventListener("timeupdate", setOffset);
</script>
<script>
function btn1() {
document.getElementById('geci').style.display = 'block';
document.getElementById('dhgc').style.display = 'none';
}
function btn2() {
document.getElementById('geci').style.display = 'none';
document.getElementById('dhgc').style.display = 'block';
}
function btn3(){
var img=document.getElementById("mplayer");
if(document.getElementById("world").innerHTML=="bfq隐藏"){
mplayer.className="hide";
document.getElementById("world").innerHTML="显示bfq";
}else{
mplayer.className="";
document.getElementById("world").innerHTML="bfq隐藏";
}
}
function btnClick() {
var zs= document.getElementById("zs");
if (this.isFullscreen()) {
全屏.style.opacity= '1'; 退出.style.opacity = '0';
zs.style.cursor="ne-resize";
exitFullScreen();
} else {
全屏.style.opacity= '0'; 退出.style.opacity = '1';
zs.style.cursor="se-resize";
zs.style.visibility='visible';
if (zs.requestFullscreen) {
bj.requestFullscreen();
} else if (zs.webkitRequestFullScreen) {
zs.webkitRequestFullScreen();
} else if (zs.mozRequestFullScreen) {
bj.mozRequestFullScreen();
} else if ( zs.msRequestFullscreen) {
zs.msRequestFullscreen();
}
}
}
// 退出全屏
function exitFullScreen() {
let exitFullScreen = document.exitFullScreen || document.mozCancelFullScreen || document.webkitExitFullscreen || document.msExitFullscreen;
if (exitFullScreen) {
exitFullScreen.call(document);
}
}
// 判断是否全屏
function isFullscreen() {
return document.fullscreenElement || document.msFullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || false;
}
</script>
欣赏了 感谢老师分享 欣赏老师音画佳作！{:4_199:} 流水光阴 发表于 2025-4-14 15:36
欣赏了
谢谢老师的欣赏，问好！
流水光阴 发表于 2025-4-14 15:37
感谢老师分享
谢谢老师的支持，问好！
梦江南 发表于 2025-4-14 16:06
欣赏老师音画佳作！
谢谢老师的欣赏。
漂亮的制作，变单行歌词的时候，字体还是变化的。
欣赏老谟深虑老师好帖{:4_199:} 歌曲很有趣。很潇洒的勇闯天涯。
多行歌词的底色最好更改一下，很多字和背景有点分不清呢{:4_204:} 问好老谟，欣赏精彩的制作，你背景颜色浅，把歌词的浅颜色修改一下，效果更加好 我做的背景是深颜色，所以歌词颜色就选了浅色的 红影 发表于 2025-4-14 19:54
漂亮的制作，变单行歌词的时候，字体还是变化的。
欣赏老谟深虑老师好帖
谢谢红影老师的支持和评精鼓励，我要感谢亚伦老师和小辣椒老师。
红影 发表于 2025-4-14 19:56
歌曲很有趣。很潇洒的勇闯天涯。
多行歌词的底色最好更改一下，很多字和背景有点分不清呢
老师说的对，我也想改字体颜色，代码我没找好，没敢改。
小辣椒 发表于 2025-4-14 21:57
问好老谟，欣赏精彩的制作，你背景颜色浅，把歌词的浅颜色修改一下，效果更加好
你说的很对，我没找到那个是多行字的颜色，所以没改。我再试试。
小辣椒 发表于 2025-4-14 21:58
我做的背景是深颜色，所以歌词颜色就选了浅色的
谢谢指导，我一定好好学习。
本帖最后由 老谟深虑 于 2025-4-15 12:11 编辑
小辣椒 发表于 2025-4-14 21:57
问好老谟，欣赏精彩的制作，你背景颜色浅，把歌词的浅颜色修改一下，效果更加好
<style>
#bj{position: relative;width: 1100px;height: 700px; margin: 130px 0 50px calc(50% - 651px);;overflow:hidden;background:url('https://cccimg.com/view.php/224f9f294cdcf0b23fe03bdd8f3a4191.jpg')no-repeat center / cover;--state: paused;--opt: .2;border-radius: 1px;box-shadow:0px 0px 0px 1px #fff,0px 0px 0px 3px #EE0B42; }
#geci{--motion:cover2;--tt:2s;--state:paused;--bg:#880000;position:absolute;left: 51%; transform: translate(-50%);top: 60%;font:300 2.6em 华文隶书;color:#000;white-space:pre;-webkit-background-clip:text;filter:drop-shadow(#fff 1px 0 0)drop-shadow(#fff 0 1px 0)drop-shadow(#fff -1px 0 0) drop-shadow(#fff 0 -1px0);z-index: 6;display: none;cursor: pointer;}
#geci::before{position: absolute;content: attr(data-geci);width: 100%; height: 100%;color: transparent;overflow: hidden;white-space: pre;background: var(--bg);clip-path: inset(0 100% 0 0);-webkit-background-clip: text;animation: var(--motion) var(--tt) linear forwards;animation-play-state: var(--state);}
@keyframes cover1{ to { clip-path: inset(0 0 0 0); } }@keyframes cover2 { to { clip-path: inset(0 0 0 0); } }
#mplayer { position: absolute; text-align: center; top: 85%; LEFT:33%;z-index: 60;color:#191970;}
.hide{display: none;}
#mplayer::before {position: absolute;content: attr(data-tt);left: 0;bottom: 25px;width: 100%;text-align-last: justify;}
#mprog { width: 500px;height: 2px; accent-color: darkgreen; outline: none; cursor: pointer; }
#btnplay {width: 70px; height: 70px; cursor: pointer; animation: rotating 6s infinite linear var(--state);}
@keyframes rotating { to { transform: rotate(360deg); } }
.playbtn, .pausebtn,#world,#zs{border-radius: 4px;position: relative;
color:#eee;background:#06075a;box-shadow:0px 0px 0px 1px #999;
padding: 4px 8px;
font-size: 12px;
border: none;
cursor: pointer;margin: 8px 5px;left: 5%;
}
#全屏{position: absolute;}
#退出{ position: absolute;opacity:0;}
</style>
<style>
#dhgc{position:absolute;width: 540px;
height: 450px;z-index: 6;
border: 0px solid white;cursor: pointer;
overflow: hidden;margin: 8% 10px;
}
.lrc {position:absolute;width: 100%;
height: 100%;
border: 0px solid white;
margin: 0px 0px;
}
.lrc #ul {width: 100%;
padding: 0;list-style: none;transition: 0.3s all ease;
margin: 0}
.lrc #ul li {
font-family:微软雅黑;
font-size: 18px;
color: #ccc;
font-weight:100;
transition: .3s all ease;
list-style-type: none;
text-align: center;display: block;
width: 100%;
margin: 0 auto;
height: 50px;
line-height: 35px;
}
.lrc #ulli.active{ font-size: 25px;
color: #3790d0;font-weight:100;
text-align: center; filter:drop-shadow(#000 1px 1px 0px);
}
</style>
<div id="bj">
<div id="mplayer" data-tt="00:00 00:00" >
<img id="btnplay" src="https://638183.freep.cn/638183/t23/btn/f3.png " title="播放/暂停" alt="" /><br>
<input id="mprog" type="range" min="0" max="50" step="any" value="0" title="调节进度" />
</div>
<audio id="audio" src="https://cccimg.com/view.php/3ac64961a736d9ed062389cbbbdb8dfc.mp3" loop autoplay></audio>
<div id="geci"></div>
<div id="dhgc"><div class="lrc" >
<ul id="ul">
</ul>
</div>
</div>
<button class="playbtn"onclick="btn1()"title="klok歌词模式">klok歌词</button>
<button class="pausebtn" onclick="btn2()"title="多行歌词模式">多行歌词</button>
<button id="world" onclick="btn3()"title="播放器模式">bfq隐藏</button>
<buttonid="zs"onclick="btnClick()"title="屏展模式" >屏展模式</button>
<div id="全屏"></div><div id="退出" ></div>
</div>
<script>
let lrc = `侯云 - 骑着二八闯天涯（DJ默涵版）
作词：宋友诚
作曲：大飞
骑着二八我勇闯天涯
骑着二八
听说世界很大我得去溜达
一辈子不能过得憋屈巴拉
还没亲眼瞧瞧人间的繁华
也想体验一把四海为家
听说时间很贵青春更无价
可该省就得省该花还得花
兜里没钱那咱就再咬咬牙
沿着国道318去趟拉萨
骑着二八我勇闯天涯
喝完青岛我吹瓶雪花
风浪越大我越要潇洒
心比天高我啥也不怕
骑着二八我勇闯天涯
什么烦恼我全都抛下
人生太短人间太复杂
尽情的绽放我的年华
听说时间很贵青春更无价
可该省就得省该花还得花
兜里没钱那咱就再咬咬牙
沿着国道318去趟拉萨
骑着二八我勇闯天涯
喝完青岛我吹瓶雪花
风浪越大我越要潇洒
心比天高我啥也不怕
骑着二八我勇闯天涯
什么烦恼我全都抛下
人生太短人间太复杂
尽情的绽放我的年华
骑着二八我勇闯天涯
喝完青岛我吹瓶雪花
风浪越大我越要潇洒
心比天高我啥也不怕
骑着二八我勇闯天涯
什么烦恼我全都抛下
人生太短人间太复杂
尽情的绽放我的年华
`;
audio.addEventListener("seeked", myFunction)
audio.addEventListener("timeupdate", mylrc);
let mKey = 0, mFlag = true;
function lrcTime (ar) {
let tmpAr = [];
for(j = 0; j <ar.length - 1; j ++) {
if(j !== ar.length - 1) tmpAr = parseFloat((ar - ar).toFixed(1));
}
let aver = parseInt(tmpAr.reduce((a,b) => a + b) / (tmpAr.length - 1));
tmpAr.push(aver);
tmpAr.forEach((item,key) => {
ar = item > aver ? aver : item;
});
return ar;
};
function getLrcAr(str) {
str = str.trim();
let lines = [], lrcAr = [];
let reg = /\[(\d{1,}:\d{1,}.\d{1,})\](.*)/g;
if(!str.match(reg)) return;
lines = str.replace(reg,'$1-{}-$2').split('\n');
for(k = 0; k < lines.length; k ++) {
lrcAr = [];
for(j = 0; j < 3; j ++) {
let tmpAr = lines.split('-{}-');
lrcAr = j === 0 ? toSecs(tmpAr) : tmpAr;
}
}
return lrcTime(lrcAr);
};
function toSecs (lrcTime){
let reg = /\d{2,}/g;
let ar = lrcTime.match(reg);
return ar*60 + parseInt(ar) + parseInt((ar)/1000);
};
function showLrc(time){
let name = mFlag ? 'cover1' : 'cover2';
geci.innerHTML = lrcAr;
geci.dataset.geci = lrcAr;
geci.style.setProperty('--motion', name);
geci.style.setProperty('--tt', time + 's');
geci.style.setProperty('--state', 'running');
mKey += 1;
mFlag = !mFlag;
};
function myFunction(){
for (j = 0; j < lrcAr.length; j++) {
if (audio.currentTime <= lrcAr) {
mKey = j - 1;
break;
}
}
if (mKey < 0) mKey = 0;
if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;
let time = lrcAr - (audio.currentTime - lrcAr);
showLrc(time);
};
function mylrc() {
for (j = 0; j < lrcAr.length; j++) {
if (audio.currentTime >= lrcAr) {
cKey = j;
if (mKey === j) showLrc(lrcAr);
else continue;
}
}
}
audio.addEventListener('play', playing,false);
audio.addEventListener('pause', playing,false);
function playing() {
geci.style.setProperty('--state', audio.paused ? 'paused' : 'running');
}
let lrcAr = getLrcAr(lrc);
</script>
<script>
var mseek = false;
var mState = () => audio.paused ?
( btnplay.style.setProperty('--state', 'paused'), btnplay.title = '点击播放' ) :
( btnplay.style.setProperty('--state', 'running'), btnplay.title = '点击暂停' );
let toMin = (val) => {
if (!val) return '00:00';
val = Math.floor(val);
let min = parseInt(val / 60),
sec = parseFloat(val % 60);
if (min < 10) min = '0' + min;
if (sec < 10) sec = '0' + sec;
return min + ':' + sec;
}
audio.addEventListener('timeupdate', () => {
if (!mseek) mprog.value = audio.currentTime / audio.duration * mprog.max;
mplayer.dataset.tt = toMin(audio.currentTime) + ' ' + toMin(audio.duration);
});
audio.addEventListener('pause', () => mState());
audio.addEventListener('playing', () => mState());
mprog.onmousedown = () => mseek = true;
mprog.onmouseup = () => mseek = false;
mprog.onchange = () => audio.currentTime = audio.currentTime = mprog.value / mprog.max * audio.duration;
dhgc.onclick =geci.onclick =btnplay.onclick = () => audio.paused ? (audio.play()) : (audio.pause());
</script>
<script>
// 最开始获取到的歌词列表是字符串类型（不好操作）
let lrcArr = lrc.split('\n');
// 接收修正后的歌词数组
let result = [];
// 获取所要用到的dom列表
doms = {
audio: document.querySelector("#audio"),
ul: document.querySelector("#ul"),
container: document.querySelector(".lrc")
}
// 将歌词数组转成由对象组成的数组，对象有time和word两个属性（为了方便操作）
for (let i = 0; i < lrcArr.length; i++) {
var lrcData = lrcArr.split(']');
var lrcTime = lrcData.substring(1);
var obj = {
time: parseTime(lrcTime),
word: lrcData
}
result.push(obj);
}
// 将tiem转换为秒的形式
function parseTime(lrcTime) {
lrcTimeArr = lrcTime.split(":")
return +lrcTimeArr * 60 + +lrcTimeArr;
}
// 获取当前播放到的歌词的下标
function getIndex() {
let Time = doms.audio.currentTime;
for (let i = 0; i < result.length; i++) {
if (result.time > Time) {
return i - 1;
}
}
}
// 创建歌词列表
function createElements() {
let frag = document.createDocumentFragment(); // 文档片段
for (let i = 0; i < result.length; i++) {
let li = document.createElement("li");
li.innerText = result.word;
frag.appendChild(li);
}
doms.ul.appendChild(frag);
}
createElements();
// 获取显示窗口的可视高度
let containerHeight = doms.container.clientHeight;
// 获取歌词列表的可视高度
let liHeight = doms.ul.children.clientHeight;
// 设置最大最小偏移量，防止显示效果不佳
let minOffset = 0;
let maxOffset = doms.ul.clientHeight - containerHeight;
// 控制歌词滚动移动的函数
function setOffset() {
let index = getIndex();
// 计算滚动距离
let offset = liHeight * index - containerHeight / 2 + liHeight / 2;
if (offset < minOffset) {
offset = minOffset;
};
if (offset > maxOffset) {
offset = maxOffset;
};
// 滚动
doms.ul.style.transform = `translateY(-${offset}px)`;
// 清除之前的active
let li = doms.ul.querySelector(".active")
if (li) {
li.classList.remove("active");
}
// 为当前所唱到的歌词添加active
li = doms.ul.children;
if (li) {
li.classList.add("active");
}
};
// 当audio的播放时间更新时，触发该事件
doms.audio.addEventListener("timeupdate", setOffset);
</script>
<script>
function btn1() {
document.getElementById('geci').style.display = 'block';
document.getElementById('dhgc').style.display = 'none';
}
function btn2() {
document.getElementById('geci').style.display = 'none';
document.getElementById('dhgc').style.display = 'block';
}
function btn3(){
var img=document.getElementById("mplayer");
if(document.getElementById("world").innerHTML=="bfq隐藏"){
mplayer.className="hide";
document.getElementById("world").innerHTML="显示bfq";
}else{
mplayer.className="";
document.getElementById("world").innerHTML="bfq隐藏";
}
}
function btnClick() {
var zs= document.getElementById("zs");
if (this.isFullscreen()) {
全屏.style.opacity= '1'; 退出.style.opacity = '0';
zs.style.cursor="ne-resize";
exitFullScreen();
} else {
全屏.style.opacity= '0'; 退出.style.opacity = '1';
zs.style.cursor="se-resize";
zs.style.visibility='visible';
if (zs.requestFullscreen) {
bj.requestFullscreen();
} else if (zs.webkitRequestFullScreen) {
zs.webkitRequestFullScreen();
} else if (zs.mozRequestFullScreen) {
bj.mozRequestFullScreen();
} else if ( zs.msRequestFullscreen) {
zs.msRequestFullscreen();
}
}
}
// 退出全屏
function exitFullScreen() {
let exitFullScreen = document.exitFullScreen || document.mozCancelFullScreen || document.webkitExitFullscreen || document.msExitFullscreen;
if (exitFullScreen) {
exitFullScreen.call(document);
}
}
// 判断是否全屏
function isFullscreen() {
return document.fullscreenElement || document.msFullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || false;
}
</script>
请老师帮我哪行是改多行字体颜色的？
老谟深虑 发表于 2025-4-15 11:09
谢谢红影老师的支持和评精鼓励，我要感谢亚伦老师和小辣椒老师。
这个帖子的主题也有意思，歌曲很有道理{:4_187:} 老谟深虑 发表于 2025-4-15 11:11
老师说的对，我也想改字体颜色，代码我没找好，没敢改。
嗯，这个还是需要找准了才好改呢{:4_187:} 老谟深虑 发表于 2025-4-15 12:08
请老师帮我哪行是改多行字体颜色的？
43行 color: #ccc;我给你改了黑的 #000 但背景颜色衬托还是不够明显，底色以后玩的时候就看看这种歌词同步类型的基本要纯色的可以自己按底色改歌词颜色，你现在图片底色有几种，所以用起来都不会很相配，字体颜色可以在花潮下面连接中去找自己喜欢的代码替换
小辣椒 发表于 2025-4-15 22:40
43行 color: #ccc;我给你改了黑的 #000 但背景颜色衬托还是不够明显，底色以后玩的时候就看看这种歌词 ...
谢谢老师，您辛苦了。我再试试。
页:
[1]
2