简简单单—心上人的心上人 - 李乐乐【控】
本帖最后由 亚伦影音工作室 于 2023-11-20 10:59 编辑 <br /><br /><style>#papa {margin: 0px 0 0 calc(50% - 681px); width: 1164px;height:680px;box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 6px #880000; overflow: hidden;place-items: center; position: relative;z-index: 12345;}
#mydiv {
width: 1164px;
height: 680px;
background: #333 url('https://pic.imgdb.cn/item/64e9ee70661c6c8e544cd94a.jpg') no-repeat center/cover;
position: absolute;
--state: paused;
}
#tu{position: absolute;top:0%; left:0%;
width: 100%;background:url('https://pic.imgdb.cn/item/64e9ee70661c6c8e544cd94a.jpg') no-repeat center/cover;
height: 100%;animation: round 4s linear infinite; }
@keyframes round{
0% {
-webkit-transform:rotate(0)scale(1)translate(0%,0%);filter:hue-rotate(360deg);
opacity:1}
100% {
-webkit-transform:rotate(0deg)scale(4)translate(0%,0%);filter:hue-rotate(0deg);
opacity:0}
}
#lrc { --motion: cover2; --tt: 2s; position: absolute; left: 50%;top:82%;transform: translate(-50%); font:normal 3.2em 华文新魏; color:#0000;filter:drop-shadow(#FFFFFF 1px 0 0)drop-shadow(#FFFFFF 0 1px 0)drop-shadow(#FFFFFF -1px 0 0) drop-shadow(#FFFFFF 0 -1px0); z-index: 6; place-items: center; overflow: hidden; }
#lrc::before { position: absolute; content: attr(data-lrc); width: 20%; height: 100%; color: transparent; overflow: hidden; white-space: pre;background:#ff0000;-webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards; place-items: center;}
@keyframes cover1{0% { width: 100%;transform: rotateY(-100deg)rotatex(100deg);filter: hue-rotate(180deg)brightness(850%)}
20% { transform:rotateY(0deg) rotatex(0deg);filter: hue-rotate(360deg)brightness(150%) }
100% { transform: rotateY(0deg)rotatex(0deg);filter: hue-rotate(0deg)brightness(150%);width: 100%;}
}
@keyframes cover2 { 0% { width: 100%;transform: rotateY(-100deg)rotatex(100deg);filter: hue-rotate(180deg)brightness(150%)}
20% { transform:rotateY(0deg) rotatex(0deg);filter: hue-rotate(360deg)brightness(150%) }
100% { transform: rotateY(0deg)rotatex(0deg);filter: hue-rotate(0deg)brightness(150%);width: 100%;}
}
</style>
<div id="papa">
<div id="mydiv"><div id='tu'></div><div id="lrc" data-lrc="HCPlayer">HCPlayer</div></div>
<audio id="aud" src="https://www.qqmc.com/mp3/music300954270.mp3" autoplay loop></audio>
</div>
<script>
let script = document.createElement('script');
script.charset = 'utf-8';
script.src ='https://638183.freep.cn/638183/web/api/simpleplayer.js';
document.body.appendChild(script);
script.onload = () => {
HCPlayer({
papa: '#mydiv',
player_css: 'left: 12%; bottom: 5%;',
img: {
enter: '',/* 进入全屏按钮地址 */
quit: '',/* 退出全屏按钮地址 */
play: '',/* 播放按钮地址 */
pause: '',/* 暂停按钮地址 */
}
});
};
tu.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>tu.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>tu.style.animationPlayState = 'paused');
</script>
<script>
(function() {
let mKey = 0, mFlag = true;
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;};
let averAdd = 0, offset = 0;
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 geci = `心上人的心上人 - 李乐乐
词：宋普照
曲：灰色幽默
编曲：毅然音乐
和声：雪无影
混音：毅然音乐
制作人：亚伦
OP：亚伦影音
为什么我的心上人住着他的心上人
而我只配是个孤独人
爱他迷失了红尘惹了一身的伤痕
爱的落叶自此再无根
可能我对他来说只是替身
都怪我想的太天真
这结局注定枉费我的情深
拥抱着只能各自浮沉
可能我根本没资格胜任
他根本没有放弃他们
我不该为了我的爱祈求些许的分寸
最后只配承受幸福的残忍
为什么我的心上人住着他的心上人
而我只配是个孤独人
爱他迷失了红尘惹了一身的伤痕
爱的落叶自此再无根
为什么我的心上人住着他的心上人
而我只配是个寂寞人
此生为他被情困坠入相思旋转门
也许这是最好的缘分
可能我根本没资格胜任
他根本没有放弃他们
我不该为了我的爱祈求些许的分寸
最后只配承受幸福的残忍
为什么我的心上人住着他的心上人
而我只配是个孤独人
爱他迷失了红尘惹了一身的伤痕
爱的落叶自此再无根
为什么我的心上人住着他的心上人
而我只配是个寂寞人
此生为他被情困坠入相思旋转门
也许这是最好的缘分
为什么我的心上人住着他的心上人
而我只配是个孤独人
爱他迷失了红尘惹了一身的伤痕
爱的落叶自此再无根
为什么我的心上人住着他的心上人
而我只配是个寂寞人
此生为他被情困坠入相思旋转门
也许这是最好的缘分
`;
let lrcAr = getLrcAr(geci);
let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = lrcAr;lrc.dataset.lrc = lrcAr.replace(/<br>/, '\n');lrc.style.setProperty('--motion', name);lrc.style.setProperty('--tt', time + 's');papa.style.setProperty('--state', 'running');mKey += 1;mFlag = !mFlag;};
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 '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;}
let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('pause', () => mState());
aud.addEventListener('play', () => mState());
aud.addEventListener('seeked', () => calcKey());
aud.addEventListener('timeupdate', () => {for (j = 0; j < lrcAr.length; j++) {if (aud.currentTime >= lrcAr) {if (mKey === j) showLrc(lrcAr);else continue;}}});
mplayer.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
})();
</script>
嘿嘿的最新效果呢，亚伦老师做得真快{:4_199:} 欣赏亚伦老师好帖{:4_187:} 这样的最简播放器也很漂亮呢{:4_204:}
页:
[1]