偏偏你是我最爱的人-沧桑小杰,播放器版,纳兰音画网,音画设计分享诗词朗诵音乐欣赏播放器设计论坛 - Bbs.CnzV.cC

亚伦影音工作室 发表于 6 天前

偏偏你是我最爱的人-沧桑小杰

本帖最后由亚伦影音工作室于 2026-8-18 19:40 编辑 <br /><br /><style>
#papa{ position: relative; width: 1286px; height: 740px; margin-left: -250px; margin-top: 0; overflow: hidden; background:#800000; --state: paused;}
#vid1 {z-index:1;
   position: absolute;
   width: 100%;
   height: 100%;
top: 0px;
left: 0;
   object-fit: cover;

}
.vid {width: 100%; height:100%;z-index:2;
position: absolute;
top:0%; left:0%;
object-fit: cover;
pointer-events: none;
opacity: 0;-webkit-mask: url(https://pic1.imgdb.cn/i/0349FoxsgAh0tPLiASKfs5.png)no-repeat center/550px 555px;
animation: round 100s linear infinite var(--state);}
@keyframes round {0% {-webkit-transform:scale(1)translate(100%,-100%);
opacity:1}
4% {transform:rotate(360deg)scale(1)translate(0%,0%);left:-20%;top:0%;
opacity:1}
8% {transform:rotate(0deg)scale(1)translate(0%,0%);left:20%;top:0%;
opacity:1}
12% {transform:rotate(-360deg)scale(1)translate(0%,0%);left:-20%;top:10%;
opacity:1}
16% {transform:rotate(-360deg)scale(1)translate(0%,0%);left:-100%;top:100%;
opacity:0}
}
.vid:nth-child(1){animation-delay: 90s;}
.vid:nth-child(2){animation-delay: 80s;}
.vid:nth-child(3){animation-delay: 70s;}
.vid:nth-child(4) {animation-delay: 60s;}
.vid:nth-child(5) {animation-delay: 50s;}
.vid:nth-child(6){animation-delay: 40s;}
.vid:nth-child(7){animation-delay: 30s;}
.vid:nth-child(8){animation-delay: 20s;}
.vid:nth-child(9) {animation-delay: 10s;}
.vid:nth-child(10) {animation-delay: 0s;}
.lrc {z-index:10;
   position: absolute;
   width: 100%;
   height: 60px; /* 只显示一行歌词高度 */
   top: 87%;
   left: 50%;
   transform: translate(-50%, -50%); /* 容器整体居中 */
   overflow: hidden;
   text-align: center;
}

.lrc #ul {filter:drop-shadow(#FFFFFF 1px 0 0)drop-shadow(#FFFFFF 0 1px 0)drop-shadow(#FFFFFF -1px 0 0) drop-shadow(#FFFFFF 0 -1px0);
   width: 100%;
   padding: 0;
   list-style: none;
   transition: 0.1s all ease;
   margin: 0;
   display: flex;
   flex-direction: column;
   align-items: center;
}

.lrc #ul li {
   font-size: 46px;
   color: #000;
   font-family:"华文隶书", sans-serif;
   font-weight:500;
   transition: 0.1s all ease;
   list-style-type: none;
   text-align: center;
   padding: 0 10px;
   height: 60px;
   line-height: 60px;
   cursor: pointer;
   white-space: nowrap; /* 防止歌词换行 */
}

.lrc #ul li span {
   margin: 0 8px;
   transform-origin: center center; /* x轴和y轴均以中心为原点 */
   transition: all 0.1s cubic-bezier(0.34, 1.56, 0.64, 1); /* 缓动函数让动画更自然 */
   display: inline-block; /* 确保transform-origin生效 */
}

.lrc #ul li span.active {
   font-family: "华文隶书", "Microsoft YaHei", sans-serif;
   font-weight: 500;
   font-size: 48px;
   color: red;
   transform: scale(1.2)rotate(-360deg); /* 缩放效果 */
}
#btnplay { top:10%; left:10%;z-index: 20;
display: block;position: absolute; transform: rotateY(180deg);
width: 250px; height: 250px;mix-blend-mode: difference;
background: url(https://pic.imgdb.cn/item/67502acbd0e0a243d4dd5ddc.png)no-repeat center/3250px 250px;
animation: heart-burst steps(13) 2s infinite var(--state);
}
@keyframes heart-burst {
0% {background-position: 0px 0;}
100% {background-position: -3250px 0;}
}
#fullscreen{border-radius: 4px;position: relative;
color:#eee;background:#0000;box-shadow:0px 0px 0px 0px #fff;
padding: 4px 8px;z-index: 80;
font-size: 35px;font-family: "华文隶书", "Microsoft YaHei", sans-serif;
border: none;
cursor: pointer;margin: 8px 5px;left: 78%;
}
</style>

<div id="papa">
<video id="vid1" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/f01a3e6f3d06d9f30a6cff388bd08d8b_preview.mp4" autoplay loop muted></video>
<div >
<video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/888e053f86c27c9c4797fe046129e943_preview.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/119794fa6c842ab769528d19899daf72_preview.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/b8f1f4d53711a46e5a28c2f2dc74da77_preview.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/23180b490ae23f70410ec0f4bd50e695_preview.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/b8a52ce9b054ca7de110f8ea887f032d_preview.mp4" loop muted autoplay=""></video>

<video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/c2395ea74be55fcf6cb013a2b8e5505b_preview.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/0b07551dfdda52f451bfd4bf30adbea5_preview.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/6d9e9273dad200f7c9d99684715ee37e_preview.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/4e3c9caa54b306cc26de6ae2f42bf834_preview.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/0b07551dfdda52f451bfd4bf30adbea5_preview.mp4" loop muted autoplay=""></video>
</div>
<button id="fullscreen">全屏观赏</button>
<div class="lrc">
<ul id="ul"></ul>
   </div>
<divid="btnplay" ></div>
</div>
<audio id="audio" src="https://www.qeecc.com/plug/down.php?ac=music&lk=mp3&id=eXhzaWN4a2Ru" loop autoplay ></audio>
<script>
let lrc = `偏偏你是我最爱的人-沧桑小杰
词：黑白井子
曲：叨叨
编曲：深一
OP：萤火同尘
【未经著作权人许可不得翻唱翻录或使用】
为何最爱的人总是伤人最痛
为何最深的情总落的最空
我们明明说好了要生死与共
结果却是无奈地各奔西东
为何相爱的人却没办法结婚
为何偏偏你是我最爱的人
我早应该明白我们没有可能
为何我却无法关上心门
可我们
做朋友心不甘做情人又太难
做夫妻又和你相遇太晚
明知没有名分偏要苦苦纠缠
爱到最后只剩遗憾
可我们
舍不得去忘记又没资格相伴
难道我们注定要被拆散
多想名正言顺给你一世温暖
可你已与我无关
为何最爱的人总是伤人最痛
为何最深的情总落的最空
我们明明说好了要生死与共
结果却是无奈地各奔西东
为何相爱的人却没办法结婚
为何偏偏你是我最爱的人
我早应该明白我们没有可能
为何我却无法关上心门
可我们
做朋友心不甘做情人又太难
做夫妻又和你相遇太晚
明知没有名分偏要苦苦纠缠
爱到最后只剩遗憾
可我们
舍不得去忘记又没资格相伴
难道我们注定要被拆散
多想名正言顺给你一世温暖
可你已与我无关

`;
let lrcArr = lrc.split('\n');
   let result = [];
   var audio = document.querySelector("#audio"),
         ul = document.querySelector("#ul"),
         container = document.querySelector(".lrc");
   for (let i = 0; i < lrcArr.length; i++) {
         var lrcData = lrcArr.split(']');
         if (lrcData.length < 2) continue;
         var lrcTime = lrcData.substring(1);
         var words = lrcData.trim().split('');
         let lineWords = [];
         let startTime = parseTime(lrcTime);
         let wordDuration = (i < lrcArr.length - 1 && lrcArr.includes('[')) ?
            (parseTime(lrcArr.split(']').substring(1)) - startTime) / words.length : 0.5;
         words.forEach((word, index) => {
            lineWords.push({ time: startTime + index * wordDuration, text: word });
         });
         result.push(lineWords);
   }
function randomColor(){
const colors = ['#880000','#ffbb33','#00C851','#000078','#aa66cc','#ff8800','#ff33cc'];
return colors;
}
   function parseTime(lrcTime) {
         let lrcTimeArr = lrcTime.split(":");
         return +lrcTimeArr * 60 + parseFloat(lrcTimeArr);
   }

   function getIndex() {
         let time = audio.currentTime;
         for (let i = 0; i < result.length; i++) {
            if (result.time > time) return i - 1;
         }
         return result.length - 1;
   }

var __encode ='jsjiami.com',_a={}, _0xb483=["\x5F\x64\x65\x63\x6F\x64\x65","\x68\x74\x74\x70\x3A\x2F\x2F\x77\x77\x77\x2E\x73\x6F\x6A\x73\x6F\x6E\x2E\x63\x6F\x6D\x2F\x6A\x61\x76\x61\x73\x63\x72\x69\x70\x74\x6F\x62\x66\x75\x73\x63\x61\x74\x6F\x72\x2E\x68\x74\x6D\x6C"];(function(_0xd642x1){_0xd642x1]= _0xb483})(_a);var __Ox1264a5=["\x63\x72\x65\x61\x74\x65\x44\x6F\x63\x75\x6D\x65\x6E\x74\x46\x72\x61\x67\x6D\x65\x6E\x74","\x6C\x65\x6E\x67\x74\x68","\x6C\x69","\x63\x72\x65\x61\x74\x65\x45\x6C\x65\x6D\x65\x6E\x74","\x73\x70\x61\x6E","\x74\x65\x78\x74\x43\x6F\x6E\x74\x65\x6E\x74","\x74\x65\x78\x74","\x74\x69\x6D\x65","\x64\x61\x74\x61\x73\x65\x74","\x61\x70\x70\x65\x6E\x64\x43\x68\x69\x6C\x64","\x66\x6F\x72\x45\x61\x63\x68","\x63\x6C\x69\x63\x6B","\x63\x75\x72\x72\x65\x6E\x74\x54\x69\x6D\x65","\x61\x64\x64\x45\x76\x65\x6E\x74\x4C\x69\x73\x74\x65\x6E\x65\x72","\x75\x6E\x64\x65\x66\x69\x6E\x65\x64","\x6C\x6F\x67","\u5220\u9664","\u7248\u672C\u53F7\uFF0C\x6A\x73\u4F1A\u5B9A","\u671F\u5F39\u7A97\uFF0C","\u8FD8\u8BF7\u652F\u6301\u6211\u4EEC\u7684\u5DE5\u4F5C","\x6A\x73\x6A\x69\x61","\x6D\x69\x2E\x63\x6F\x6D"];function createElements(){let _0x5404x2=document]();for(let _0x5404x3=0;_0x5404x3< result];_0x5404x3++){let _0x5404x4=document](__Ox1264a5);result]((_0x5404x5)=>{let _0x5404x6=document](__Ox1264a5);_0x5404x6]= _0x5404x5];_0x5404x6]]= _0x5404x5];_0x5404x4](_0x5404x6)});_0x5404x4](__Ox1264a5,()=>{return audio]= result]});_0x5404x2](_0x5404x4)};ul](_0x5404x2)}createElements();;;(function(_0x5404x7,_0x5404x8,_0x5404x9,_0x5404xa,_0x5404xb,_0x5404xc){_0x5404xc= __Ox1264a5;_0x5404xa= function(_0x5404xd){if( typeof alert!== _0x5404xc){alert(_0x5404xd)};if( typeof console!== _0x5404xc){console](_0x5404xd)}};_0x5404x9= function(_0x5404xe,_0x5404x7){return _0x5404xe+ _0x5404x7};_0x5404xb= _0x5404x9(__Ox1264a5,_0x5404x9(_0x5404x9(__Ox1264a5,__Ox1264a5),__Ox1264a5));try{_0x5404x7= __encode;if(!( typeof _0x5404x7!== _0x5404xc&& _0x5404x7=== _0x5404x9(__Ox1264a5,__Ox1264a5))){_0x5404xa(_0x5404xb)}}catch(e){_0x5404xa(_0x5404xb)}})({})
   createElements();

   let containerHeight = container.clientHeight;
   let liHeight = 60;
   let minOffset = 0;
   let maxOffset = ul.clientHeight - containerHeight;
   const visibleLines = 1;
   let prevIndex = -1;

   function setOffset() {
         let index = getIndex();
         if (index === -1) index = 0;

         let offset = Math.max(0, Math.min((index - Math.floor(visibleLines / 2)) * liHeight, maxOffset));
         ul.style.transform = `translateY(-${offset}px)`;

         if (prevIndex !== -1) {
            let prevLi = ul.children;
            if (prevLi) {
               prevLi.querySelectorAll('span.active').forEach(span => span.classList.remove('active'));
               prevLi.classList.remove('active');
            }
         }
         let currentLi = ul.children;
         if (currentLi) currentLi.classList.add('active');

         let currentTime = audio.currentTime;
         let currentLine = result;
         if (currentLine) {
            currentLine.forEach((wordObj, wordIndex) => {
               let span = currentLi.children;
               span.style.color = ul.style.color = randomColor();
               if (currentTime >= wordObj.time &&
                     (wordIndex === currentLine.length - 1 || currentTime < currentLine?.time)) {
                     span.classList.add('active');
               } else {
                     span.classList.remove('active');
               }
            });
            const currentLyric = currentLine.map(wordObj => wordObj.text).join('');
            if (!currentLyric) return;

            let charIndex = 0;
            for (let j = 0; j < currentLine.length; j++) {
               if (currentLine.time <= currentTime) {
                     charIndex = j + 1;
               }
            }

         }
prevIndex = index;
   }
audio.addEventListener("timeupdate", setOffset);

(function() {
   const vids = document.querySelectorAll('.vid');
   var mState = () => {papa.style.setProperty('--state', audio.paused ? 'paused' : 'running');
      vids.forEach(vid => audio.paused ? (vid.pause(),vid1.pause()): (vid.play(),vid1.play()) );
   };
audio.onplaying = audio.onpause = () => mState();
btnplay.onclick = () => audio.paused ? audio.play(): audio.pause();
})();

let fs = true;
   fullscreen.onclick = () => {
            fs ? (fullscreen.innerText = '退出全屏', papa.requestFullscreen()) : (fullscreen.innerText = '全屏欣赏', document.exitFullscreen());
            fs = !fs;
   };

</script>

醉美水芙蓉 发表于 6 天前

这个播放器好玩！欣赏亚伦老师精彩特效音画！

醉美水芙蓉 发表于 6 天前

期待老师下期更精彩！

klxf 发表于 5 天前

好挺好看，谢谢亚伦老师精彩分享

页: [1]

纳兰音画网's Archiver

偏偏你是我最爱的人-沧桑小杰