梦里的梦梦里的你-韩小欠,播放器版,纳兰音画网,音画设计分享诗词朗诵音乐欣赏播放器设计论坛 - Bbs.CnzV.cC

亚伦影音工作室 发表于 2025-8-27 20:22:09

梦里的梦梦里的你-韩小欠

本帖最后由亚伦影音工作室于 2025-8-27 20:22 编辑 <br /><br /><style>
#papa{margin: 10px 0 20px calc(50% - 721px); background:#000080 url(https://pic1.imgdb.cn/item/68ae59f458cb8da5c8532c14.jpg)no-repeat center/cover;width: 1286px; height: 720px; box-shadow: 3px 3px 6px gray; overflow: hidden; z-index: 1234567; position: relative;}
#bfq{ bottom: 34px;left:30%;position: absolute;width: 120px; height: 40px;overflow: hidden;z-index: 6;}
#cndpt{ bottom: 0px;
   left:35px; z-index: 60;
position: absolute;width: 40px; height: 40px;
background: url(https://pic.imgdb.cn/item/675813f6d0e0a243d4e14a48.png)no-repeat 0px 0px/cover; }
#enopg{
position: absolute;width: 40px; height: 40px;
background: url(https://pic.imgdb.cn/item/675813e7d0e0a243d4e14a18.png) no-repeat 0px 0px/cover;
display:none;
}
#tmsg {position: absolute;z-index: 6;
   font: normal 14px sans-serif;
   color: #fff;
      bottom: 10px;
   left:0;}

#mypic {top:40%; left:65%;z-index: 6;
display: block;position: absolute;
width: 400px; height: 400px;
background: url(https://pic1.imgdb.cn/item/68ae7e8c58cb8da5c8540144.png)no-repeat center/5200px 400px;
animation: heart-burst steps(13) 3s infinite;
}
@keyframes heart-burst {
0% {background-position: 0px 0;}
100% {background-position: -5200px 0;}
}

#mypicc {top:25%; left:35%;z-index: 6;
display: block;position: absolute;
width: 120px; height: 120px;
background: url(https://pic1.imgdb.cn/item/68ae68c258cb8da5c85381a4.png)no-repeat center/1560px 120px;
animation: heart-bburst steps(13) 3s infinite; transform: rotateY(3.142rad);
}
@keyframes heart-bburst {
0% {background-position: 0px 0;}
100% {background-position: -1560px 0;}
}
#lrc {--state: paused;--motion: cover2;--tt: 2s;--bg: linear-gradient(0deg, #880000, #880000, #880000);
position: absolute;z-index: 6;left: 18%; top: 10%;transform: translate(0%);letter-spacing: 2px;font:normal 2.8em/1em 华文隶书; font-weight:400;color: #000080;white-space: pre;writing-mode: vertical-lr;-webkit-background-clip: text;filter:drop-shadow(#FFFFFF 1px 0 0)drop-shadow(#FFFFFF 0 1px 0)drop-shadow(#FFFFFF -1px 0 0) drop-shadow(#FFFFFF 0 -1px0);}
#lrc::before {position: absolute;content: attr(data-lrc);width: 100%; height: 0%;color: transparent;overflow: hidden;white-space: pre;background: var(--bg);
background-clip: text; /* 重设背景剪裁风格（重要） */-webkit-background-clip: text;animation: var(--motion) var(--tt) linear forwards;animation-play-state: var(--state);}
@keyframes cover1 { from { height: 0; }to { height: 100%; } }
@keyframes cover2 { from { height: 0; }to { height: 100%; } }
</style>
<div id="papa">
<div id="bfq">
<div id="cndpt" onclick="pic()" >
<div id="enopg" ></div>
</div>
<div id="tmsg"></div>
</div>
<div id="mypic" ></div>
<div id="mypicc" ></div>
<div data-lrc="" id="lrc"></div>

</div>
<audio id="aud" src="http://chuangshicdn.data.mvbox.cn/music/fc/25/08/10/25081021075145375454.mp3" autoplay loop ></audio>
<script >
function pic(){
varimgElement= document.getElementById('enopg');
if (imgElement.style.display === 'none' || imgElement.style.display === '') {
   imgElement.style.display = 'block';
   aud.pause();
   mypic.style.animationPlayState = 'paused';
   mypicc.style.animationPlayState = 'paused';
} else {
imgElement .style.display = 'none';
aud.play();
mypic.style.animationPlayState = 'running';
mypicc.style.animationPlayState = 'running';
}
}
aud.addEventListener('timeupdate', () => {
         tmsg.innerText = toMin(aud.currentTime) + '******' + toMin(aud.duration);
   });

   function toMin(val) {
         if (!val) return '00:00';
         val = Math.floor(val);
         let min = parseInt(val / 60);
         let sec = parseFloat(val % 60);
         if (min < 10) min = '0' + min;
         if (sec < 10) sec = '0' + sec;
         return min + ':' + sec;
   }
</script >
<script >
(function() {
/*原始lrc歌词*/
let lrcStr = `梦里的梦梦里的你-韩小欠
词：宋普照
曲：人生感悟
梦里的梦梦里的你
梦里的爱离我远去
梦里的人藏在心底
梦里梦里全都是你
心里的情心里的你
心里的缘随风散去
心里的人啊你在哪里
心里心里有太多惋惜
我想你想你我想着你
我爱你爱你我爱着你
你就是我今生的唯一
一夜一夜的想你
一声一声的叹息
我们的缘分到底停在哪里
我想你想你我想着你
我爱你爱你我爱着你
你就是我今生最美的相遇
一天一天的想你
一次一次的哭泣
我们的回忆你是否会想起
心里的情心里的你
心里的缘随风散去
心里的人啊你在哪里
心里心里有太多惋惜
我想你想你我想着你
我爱你爱你我爱着你
你就是我今生的唯一
一夜一夜的想你
一声一声的叹息
我们的缘分到底停在哪里
我想你想你我想着你
我爱你爱你我爱着你
你就是我今生最美的相遇
一天一天的想你
一次一次的哭泣
我们的回忆你是否会想起
`;
/*变量：mKey - 当前歌词索引；mFlag ：调用关键帧动画索引；averAdd ：平均值补偿*/
let mKey = 0, mFlag = true, averAdd = 0.3;

/*函数：获取每句歌词用时，歌词用时若超过平均值则取平均值，最后一句歌词则取平均值*/
let 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)) + averAdd;
tmpAr.push(aver);
tmpAr.forEach((item,key) => {
ar = item > aver ? aver : item;
});
return ar;
};

/*函数：从原始lrc歌词获取信息并存入 n*3 数组*/
let getLrcAr = (text) => {
let lrcAr = [];
let calcRule = ;
for(x of text.split('\n')) {
let ar = [];
let re = /\d+[\.:]\d+([\.:]\d+)?/g;
let geci = x.replace(re,'');
if(geci) {
geci = geci.replace(/[\[\]\'\"\t,]s?/g,'');
let time = x.match(re);
if(time != null) {
for(y of time) {
let tmp = y.match(/\d+/g);
let sec = 0;
for(z in tmp) sec += tmp * calcRule;
ar = ;
lrcAr.push(ar);
}
}
}
}
lrcAr.sort((a,b)=> a - b);
return(lrcTime(lrcAr));
};

/*函数：模拟显示同步歌词*/
let showLrc = (time) => {
let name = mFlag ? 'cover1' : 'cover2';
lrc.innerHTML = lrcAr;
lrc.dataset.lrc = lrcAr;
lrc.style.setProperty('--motion', name);
lrc.style.setProperty('--tt', time + 's');
lrc.style.setProperty('--state', 'running');
mKey += 1;
mFlag = !mFlag;
};

/*函数：处理当前歌词索引 mKey*/
let calcKey = () => {
for (j = 0; j < lrcAr.length; j++) {
if (aud.currentTime <= lrcAr) {
mKey = j - 1;
break;
}
}
if (mKey < 0) mKey = 0;
if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;
let time = lrcAr - (aud.currentTime - lrcAr);
showLrc(time);
};

/*格式化时间信息*/
let toMin = (val) => {
if (!val) return '000:000';
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;
}

/*函数：关键帧动画状态切换*/
let mState = () => aud.paused ? (lrc.style.setProperty('--state','paused'),player.style.animationPlayState = 'paused') : (lrc.style.setProperty('--state','running'),player.style.animationPlayState = 'running');

/*监听播放进度*/
aud.addEventListener('timeupdate', () => {
for (j = 0; j < lrcAr.length; j++) {
if (aud.currentTime >= lrcAr) {
cKey = j;
if (mKey === j) showLrc(lrcAr);
else continue;
}
}
});
aud.addEventListener('pause', () => mState());/*监听暂停事件*/
aud.addEventListener('play', () => mState());/*监听播放事件*/
aud.addEventListener('seeked', () => calcKey());/*监听查询事件*/
let lrcAr = getLrcAr(lrcStr); /*获得歌词数组*/
})();
</script>

醉美水芙蓉 发表于 2025-8-27 21:08:17

欣赏亚伦老师精彩播放器！

醉美水芙蓉 发表于 2025-8-27 21:09:10

老师的播放器一如既往的精彩！

klxf 发表于 2025-8-28 21:56:40

漂亮！谢谢亚伦老师精彩分享

lvyouwuhan 发表于前天 16:26

支持分享，文章相当出色

shipinchangwu 发表于昨天 10:51

不错！顶LZ

页: [1]

纳兰音画网's Archiver

梦里的梦梦里的你-韩小欠