亚伦影音工作室 发表于 2025-1-19 20:39

爱的渡口(DJ默涵版)-王馨

<style>
#papa{left: -38%; top: 23%; width:1286px;position: relative; height:750px; border-radius:0px; border:0px solid #333;overflow: hidden; align-items: center; background:linear-gradient(0deg, #000000 2%,#000000    8%,rgba(2, 2, 2, 0) 20%,rgba(52, 152, 219, 0) 100%,rgba(2, 2, 2, 0) 100%,black 100%),url('https://img2.oldkids.cn/upload/2024/08/17/photo_0_20240817110400624.png') no-repeat center/cover;position: relative;}
.mnBox {
        top: 0px;
        position: relative;
        background: #0000;
        height: 100%;
        width: 100%;
      left: 0px;overflow: hidden;
        border: 1px solid;
        box-shadow: 0px 0px 0px 2px tan;
}
.rain {
        width: 1px;
        height: 8px;
        top: -20px;
        left: 400px;
        background: #eee;
        position: relative;
        display: block;
        animation: rain 0.5s linear infinite;
}

.rain::before, .rain::after{
        content: "";
        position: absolute;
        left: 10px;
        top: -120px;
        width: 1px;
        height: 15px;
        background: #eee;
}



.circle {
        position:absolute;
        width: 3px;
        height: 1px;
        left: 85px;
        top: 90%;
        background:none;
        border: 1px solid #FFF;
        border-radius: 50%;
        animation:circle 2s ease-out infinite;
}

@keyframes circle {
        0% { width:0; height:0; }
        50% { opacity:0.1; width:2%; height:2%; }
        60% { opacity:0.2; width:2%; height:2%; }
        100% { opacity:0; width:2%; height:2%; }
}

@keyframes rain {
        0% { opacity:0.5; }
        100% { opacity:0.5; top:40%;}
}
.progress {display: flex;align-items: center;
      justify-content: space-between;width: 98%;
      position: absolute;bottom: 5px;
   left: 1%;height:30px;
    }

    .progress-bar {
      position:relative;
      width: 94%;
      height: 3px;
      background-color: #fff;
   left: 0px;border-radius: 20px;
      cursor: pointer;
    }

    .now {
      position: absolute;
      left: 0%;
      display: inline-block;
      height: 3px;border-radius: 20px;
      width: 94%;
      background: #ff0000;
    }

    .now::after {
      content: '';
      position: absolute;
      left: 100%;
      width: 8px;margin: -2px -2px;
      height: 8px;border-radius: 50px;
      background-color: #ff0000;
    }
.start{color: #fff; font: 400 12px sans-serif; }
.end{color: #fff; font: 400 12px sans-serif;}

#mypic { bottom: 32px; right: 54px;z-index: 4;
display: block;position: absolute;
    width: 20px; height: 20px;
    background: url(https://pic.imgdb.cn/item/674f8e7ed0e0a243d4dce5ed.png) no-repeat center/100px 20px;
animation: burst steps(5) 1s infinite;
}
@keyframes burst {
0% {background-position: 0px 0;}
100% {background-position: -100px 0;}
}
#bnt{left: 20px;bottom: 24px;position:absolute; z-index: 40;border: 0px solid #ff3300; width:50px;overflow: hidden;
      height: 50px;
             border-radius: 0%;cursor: pointer;}

#pic{position:absolute;top:25px; left:28px;background:#ccc;
transform: translate(-50%, -50%);
clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 0, 50% 0, 50% 100%, 75% 100%, 75% 0);
      width:25px;
      height: 25px;}
#picc{opacity:0;position:absolute;top:25px; left:30px;background:#ccc; transform: translate(-50%, -50%);
   clip-path: polygon(75% 50%, 0 0, 0 100%);
      width:25px;
      height: 25px;}
#fullscreen { opacity:1;position: absolute; width: 25px; height: 25px;   bottom: 32px; cursor: pointer;right: 14px;z-index: 40;}
#papa:hover #fullscreen { opacity:1;}
#全屏{ width: 25px; height: 25px; position: absolute;background:url(https://pic1.imgdb.cn/item/6774df83d0e0a243d4ed4fd7.png)no-repeat center/cover;
}
#退出{ width: 25px; height: 25px; position: absolute;opacity:0;background:url(https://pic1.imgdb.cn/item/6774df8bd0e0a243d4ed4fd9.png)no-repeat center/cover; }

#lrc {--state: paused;--motion: cover2;--tt: 2s;--bg: linear-gradient(0deg, #880000, #880000, #880000);
position: absolute;z-index: 16;left: 50%;bottom: 80px;transform: translate(-50%);font:300 3.5em/1em 华文隶书;font-style:italic; color: #000080;white-space: pre;-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: 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); } }
</style>

<div id="papa">
<divclass="mnBox"id="mnBox">
<span class="rain"></span>
<span class="circle"></span>
</div>
<div class="progress">
      <span class="end">00:00</span>

      <div class="progress-bar">
      <div class="now"></div>
      </div>
   <span class="start">00:00</span>
</div>

<div id="mypic" ></div>
   <span id="fullscreen" title="全屏展示/退出全屏">
<div id="全屏"></div>
<div id="退出" ></div>
</span>

<div id="bnt"title="暂停/播放" >
<div id="pic"></div>
<div id="picc"></div>
</div>

<div data-lrc="" id="lrc"></div>
</div>

    <audio id="aud"src="https://img2.oldkids.cn/upload/2024/08/12/blog_260848378_20240812201508760.mp3" autoplay loop></audio>

<script >
const audio = document.getElementById('aud')
const start = document.querySelector('.start')
const end = document.querySelector('.end')
const progressBar = document.querySelector('.progress-bar')
const now = document.querySelector('.now')

function conversion (value) {
    let minute = Math.floor(value / 60)
    minute = minute.toString().length === 1 ? ('0' + minute) : minute
    let second = Math.round(value % 60)
    second = second.toString().length === 1 ? ('0' + second) : second
    return `${minute}:${second}`
}

aud.onloadedmetadata = function () {
    end.innerHTML = conversion(aud.duration)
    start.innerHTML = conversion(aud.currentTime)
}

progressBar.addEventListener('click', function (event) {
    let coordStart = this.getBoundingClientRect().left
    let coordEnd = event.pageX
    let p = (coordEnd - coordStart) / this.offsetWidth
    now.style.width = p.toFixed(3) * 100 + '%'

    aud.currentTime = p * aud.duration
    aud.play()
})

setInterval(() => {
    start.innerHTML = conversion(aud.currentTime)
    now.style.width = aud.currentTime / aud.duration.toFixed(3) * 100 + '%'
}, 1000)
bnt.onclick = () => aud.paused ? (aud.play(),picc.style.opacity= '0',pic.style.opacity = '1',mypic.style.animationPlayState = 'running') : (aud.pause(),picc.style.opacity = '1',pic.style.opacity = '0',mypic.style.animationPlayState = 'paused');

aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());

let fs= true;
fullscreen.onclick = () => {
      fs ? (papa.requestFullscreen(),全屏.style.opacity= '0',退出.style.opacity = '1') : ( document.exitFullscreen(),全屏.style.opacity = '1',退出.style.opacity = '0');
      fs = !fs;
}
</script >
<script >
(function() {
/*lrc*/
let lrcStr = `爱的渡口(DJ默涵版)-王馨
作词：王馨
作曲：王馨/梦秋
专辑：爱的渡口
演唱：王馨
☆★Lrc编辑 梅竹★☆
☆★协编 蓝菊★☆
● ● ● ● ● ● ●
繁华中把风景看透
相遇是一生的守候
历经风雨停泊在爱的渡口
幸福就是安宁无忧
岁月里看细水长流
相牵今生注定一起走
心力交瘁停泊在爱的渡口
朝夕相伴彼此拥有
悠然情怀 几许温柔
烟雨红尘守在爱的渡口
今生的约定与相逢
放逐我们爱情的心舟
流年芳华 携手白头
一帘幽梦藏在爱的渡口
来世让我们再邂逅
深情陪伴在我们左右
(Music)
岁月里看细水长流
相牵今生注定一起走
心力交瘁停泊在爱的渡口
朝夕相伴彼此拥有
悠然情怀 几许温柔
烟雨红尘守在爱的渡口
今生的约定与相逢
放逐我们爱情的心舟
流年芳华 携手白头
一帘幽梦藏在爱的渡口
来世让我们再邂逅
深情陪伴在我们左右
悠然情怀 几许温柔
烟雨红尘守在爱的渡口
今生的约定与相逢
放逐我们爱情的心舟
流年芳华 携手白头
一帘幽梦藏在爱的渡口
来世让我们再邂逅
深情陪伴在我们左右
(Music)
☆★梅竹谢谢欣赏★☆
=End=
`;
/* 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 '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 = () => aud.paused ? (lrc.style.setProperty('--state','paused')) : (lrc.style.setProperty('--state','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>
<script >
function rain() {
      var str = "";
      for(i=0; i<50; i++) {
                var l = Math.ceil(Math.random()*1286);
                str += "<span class='rain' style='left:" + l +"px;'></span>";
      }
      for(j=0;j<40; j++){
                var k1 = Math.ceil(Math.random()*100);
                var k2 = Math.round(Math.random()*40+70);
                str += "<span class='circle' style='left:" + k1 +"%;top:" + k2 +"%;'></span>";
      }
      document.getElementById('mnBox').innerHTML += str;
}

rain();

let raindrops = mnBox.querySelectorAll('.rain');
let rainpops = mnBox.querySelectorAll('.circle');

let rainState = () => {
      aud.paused ? (raindrops.forEach( drop => {drop.style.animationPlayState='paused'}) , rainpops.forEach( pop => {pop.style.animationPlayState='paused'}))
                              : (raindrops.forEach( drop => {drop.style.animationPlayState='running'}) , rainpops.forEach( pop => {pop.style.animationPlayState='running'}));
}

let mState = () => {rainState();aud.paused ?(raindrops.forEach( drop => {drop.style.animationPlayState='paused'}) , rainpops.forEach( pop => {pop.style.animationPlayState='paused'}))
                              : (raindrops.forEach( drop => {drop.style.animationPlayState='running'}) , rainpops.forEach( pop => {pop.style.animationPlayState='running'}))}
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
</script>

小辣椒 发表于 2025-1-19 21:04

欣赏亚伦的精彩制作{:4_187:}

小辣椒 发表于 2025-1-19 21:05

亚伦这个播放器全屏图标，感觉不错的

小辣椒 发表于 2025-1-19 21:09

亚伦这个下雨的效果加的漂亮{:4_199:}

红影 发表于 2025-1-19 21:36

很漂亮的制作。欣赏亚伦老师好帖{:4_199:}

杨帆 发表于 2025-1-19 22:21

谢谢亚伦老师精彩分享{:4_191:}

冬天的雨 发表于 2025-1-19 22:24

个个精彩，掌声送上{:4_199:}{:4_199:}

梦油 发表于 2025-1-20 09:28

欣赏精彩，问候亚伦。
页: [1]
查看完整版本: 爱的渡口(DJ默涵版)-王馨