学习套用亚伦老师代码
本帖最后由 老谟深虑 于 2025-5-2 08:45 编辑 <br /><br /><style>
#bj{position: relative;width: 1286px;height: 720px;MARGIN-LEFT:-300px;margin-top:120px;;overflow:hidden;background:url(https://cccimg.com/view.php/9b15f70f7a9fe94df747d610347a71aa.jpg)no-repeat center / cover;border-radius: 0px;box-shadow:0px 0px 0px 1px #fff,0px 0px 0px 6px #227700; --state:paused;}
#papa{position: absolute;width: 100%;height: 100%;MARGIN-LEFT:0px;margin-top:0px;background:url(https://cccimg.com/view.php/818a8e4a077d34e40e5a1f4548ace791.jpg)no-repeat center / cover;}
#tu{position: absolute;top:5%; left:50%;
width: 100%;
height: 100%;animation: round 10s linear infinite var(--state); }
#tu img{width: 40%;-webkit-mask-image: radial-gradient(black 25% ,transparent 65%);transform: rotateY(180deg);
}
@keyframes round{
0% {
-webkit-transform:rotate(0deg)scale(3)translate(-100%,50%);
opacity:0}
30% {
-webkit-transform:rotate(0deg)scale(1)translate(-20%,0%);
opacity:1}
80% {
-webkit-transform:rotate(0deg)scale(1)translate(-20%,0%);
opacity:1}
100% {
-webkit-transform:rotate(0deg)scale(3)translate(-20%,-50%);
opacity:0}
}
#tuu{position: absolute;top:4%; left:10%;
width: 100%;
height: 100%;animation: roud 10s linear infinite var(--state); }
#tuu img{width: 40%;-webkit-mask-image: radial-gradient(black 25% ,transparent 65%);
}
@keyframes roud{
0% {
-webkit-transform:rotate(0)scale(3)translate(100%,-50%);
opacity:0}
30% {
-webkit-transform:rotate(0)scale(1)translate(40%,0%);
opacity:1}
80% {
-webkit-transform:rotate(0deg)scale(1)translate(40%,0%);
opacity:1}
100% {
-webkit-transform:rotate(0deg)scale(3)translate(100%,50%);
opacity:0}
}
#geci{--motion:cover2;--tt:2s;--state:paused;--bg:#880000;position:absolute;left: 50%; transform: translate(-50%);top: 70%;font:300 2.8em 华文隶书;color:#227700;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: 95%;transform: translate(-50%); left: 50%;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: 400px;height: 2px; accent-color: darkgreen; outline: none; cursor: pointer; }
#btnplay {position: relative;width: 60px; height: 60px; cursor: pointer; animation: rotating 6s infinite linear var(--state);margin: -90px 0px;border-radius: 50px;box-shadow:0px 0px 0px 1px #fff,0px 0px 0px 4px #227700;}
@keyframes rotating { to { transform: rotate(360deg); } }
.playbtn, .pausebtn,#world,#zs,#bjqh{border-radius: 4px;position: relative;
color:#fff;background:#0000;box-shadow:0px 0px 0px 1px #fff;
padding: 4px 8px;
font-size: 12px;
border: none;
cursor: pointer;margin: 8px 5px;left: 66%;
}
</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:300 1.2em 微软雅黑;
color: #ccc;
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:450 1.6em 微软雅黑;
color: #fff;
text-align: center; filter:drop-shadow(#000 1px 1px 0px);
}
</style>
<div id="bj">
<div id="papa"></div>
<div id="tu">
<img src="https://sirius.130014.xyz/2025/04/23/-4.jpg" alt="">
</div>
<div id="tuu">
<img src="https://sirius.130014.xyz/2025/04/23/-1.jpg" alt="">
</div>
<div id="mplayer" data-tt="00:00 00:00" >
<img id="btnplay" src="https://sirius.130014.xyz/2024/04/19/99906964_3.png" title="播放/暂停" alt="" /><br>
<input id="mprog" type="range" min="0" max="50" step="any" value="0" title="调节进度" />
</div>
<audio id="audio" src="https://s2.ananas.chaoxing.com/sv-w9/audio/e4/ba/31/008b7b75fd7aefe56e7b998de8299662/audio.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="播放器模式">播放器隐藏</button>
<button id="bjqh" onclick="btn4()"title="背景模式">背景TWO</button>
<buttonid="zs"onclick="btnClick()"title="屏展模式" >屏展模式</button>
<div id="全屏"></div><div id="退出" ></div>
</div>
<script>
let lrc = `伤了的心怎么能复原-影子
词：李勇军
曲：李勇军
编曲：大约冬季
后期：鲁晓锋
制作人：李勇军工作室
LRC：老谟深虑
往事它如云烟
还残留在心间
回想以往那些事
仿佛就在眼前
你把爱欺骗
旧梦换新颜
为何爱让人心痛
谁能给我答案
伤了的心又怎么能复原
爱你的心被撕成一片片
倘若被你伤的如此可怜
不如退出红尘一刀两断
伤了的心又怎么能复原
一段情缘被狠心拆散
如其被你伤的心如箭穿
不如相忘红尘不再相恋
往事它如云烟
还残留在心间
回想以往那些事
仿佛就在眼前
你把爱欺骗
旧梦换新颜
为何爱让人心痛
谁能给我答案
伤了的心又怎么能复原
爱你的心被撕成一片片
倘若被你伤的如此可怜
不如退出红尘一刀两断
伤了的心又怎么能复原
一段情缘被狠心拆散
如其被你伤的心如箭穿
不如相忘红尘不再相恋
伤了的心又怎么能复原
一段情缘被狠心拆散
如其被你伤的心如箭穿
不如相忘红尘不再相恋
不如相忘红尘不再相恋
`;
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'), bj.style.setProperty('--state', 'paused'),btnplay.title = '点击播放' ) :
( btnplay.style.setProperty('--state', 'running'),bj.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=="播放器隐藏"){
mplayer.className="hide";
document.getElementById("world").innerHTML="显示播放器";
}else{
mplayer.className="";
document.getElementById("world").innerHTML="播放器隐藏";
}
}
function btn4(){
var img=document.getElementById("papa");
if(document.getElementById("bjqh").innerHTML=="背景TWO"){
papa.className="hide";
document.getElementById("bjqh").innerHTML="背景ONE";
}else{
papa.className="";
document.getElementById("bjqh").innerHTML="背景TWO";
}
}
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> 欣赏佳作，问候老谟深虑。 漂亮的制作 欣赏了 感谢分享 制作很漂亮，貌似单行歌词不显示？ 问好老谟 我给你上面露出的尺寸修改了一下，这样亚纶就可以看见你的提问了 发现2个AI人物制作的很美
这个亚纶的源码我还没有看见，不知道是那个帖 梦油 发表于 2025-4-29 13:26
欣赏佳作，问候老谟深虑。
谢谢老师的欣赏，问好！
世外桃源 发表于 2025-4-29 20:57
漂亮的制作
谢谢老师的支持，下午好！
世外桃源 发表于 2025-4-29 20:57
欣赏了
谢谢老师欣赏，问好！
世外桃源 发表于 2025-4-29 20:57
感谢分享
谢谢老师的分享，下午好！
红影 发表于 2025-4-29 21:36
制作很漂亮，貌似单行歌词不显示？
是的，单行歌词不显示，求教亚伦老师。
小辣椒 发表于 2025-4-29 21:53
问好老谟 我给你上面露出的尺寸修改了一下，这样亚纶就可以看见你的提问了
谢谢小辣椒修改，下午好！
小辣椒 发表于 2025-4-29 21:55
发现2个AI人物制作的很美
这个亚纶的源码我还没有看见，不知道是那个帖
源码是亚伦老师的音画“结果2024”，我换上我的歌曲和同步歌词，单行的歌词就不显示。无知啥原因。
老谟深虑 发表于 2025-4-30 15:11
谢谢老师的欣赏，问好！
祝老谟深虑朋友节日快乐！ 老谟深虑 发表于 2025-4-30 15:20
源码是亚伦老师的音画“结果2024”，我换上我的歌曲和同步歌词，单行的歌词就不显示。无知啥 ...
等亚纶老师看看再说了，小长假有时间我会做一次的 老谟深虑 发表于 2025-4-30 15:15
是的，单行歌词不显示，求教亚伦老师。
你艾特他一下，否则可能看不到呢。 @老谟深虑
将 伤了的心怎么能复原-影子， 改为 伤了的心怎么能复原-影子
将 制作人：李勇军工作室，改为 制作人：李勇军工作室
试试！ 梦油 发表于 2025-4-30 15:55
祝老谟深虑朋友节日快乐！
谢谢老师的祝福，祝你五一节快乐！
页:
[1]
2