论坛 › 欢乐水吧 › 秋水伊人[花潮小播]

亚伦影音工作室 发表于 2026-4-28 08:53

秋水伊人[花潮小播]

本帖最后由 亚伦影音工作室 于 2026-5-11 12:44 编辑 <br /><br /><style>@import url("https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap");
#papa{margin: 10px -250px;
        width: 1186px;
        height: 680px;
        background:linear-gradient(203deg, #ff0000 0%,rgba(285, 0, 0, 0) 0%),url(https://static.oldkids.com.cn/upload/2026/04/28/photo_0_20260428161816674.png) no-repeat center/cover;
        box-shadow: 0px 0px 0px 2px #eee, 0px 0px 0px 8px #880000;
        position: relative;overflow: hidden;
        z-index: 12345;}
#xiaobo {z-index: 100;
      width: 350px;
      height: 220px;
      margin: 100px 740px;
      position: absolute;
      overflow: hidden;
      -state:paused;
      }
#bnt{margin: 182px 10px ; width: 20px; height: 20px;position: relative; cursor: pointer; z-index: 100;transition: all 1s;}
#cndpt{position: absolute; width: 100%; height: 100%;
   background:#ff0000;
clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 0, 50% 0, 50% 100%, 75% 100%, 75% 0);}
#enopg{ position: absolute;width: 100%; height: 100%;
opacity:0;background:#ff0000;
   clip-path: polygon(75% 50%, 0 0, 0 100%)
}
#tmsg {position: absolute;
      font: 400 10px sans-serif;
      color: #ff0000;
         bottom: 10px;
      left:140px;}
#prog {position:absolute;
      width: 98%;
      height: 2px;background:#aaa;
      cursor: pointer;
         bottom: 2px;border-radius: 10px;
left:1%;}
#prog-bar {border-radius: 20px;
            height: 100%;
            background: #FF0000;
            width: 0%;
      }

.hexahedron {width: 210px;border: 2px solid #aaa;
      height: 210px;
      margin: 0px 0px;
         position: relative;
      background:url(https://static.oldkids.com.cn/upload/2026/04/28/photo_0_20260428161816674.png)no-repeat 0px -30px/cover;
      border-radius: 12px;mask: radial-gradient(circle at 98% 50%,transparent 40px,#red 0%);-webkit-mask: radial-gradient(circle at 98% 50%,transparent 40px,red 0%); }

#cp { position: relative; top: 0px; left: 0px;width: 200px; height: 200px;transition: 6s;animation:opentop 0.5s linear 1s ;background:repeating-radial-gradient(#8b4513, #8b4513 8px, #aaaaaa 9px);border-radius: 50%;}
.overlay {z-index: 30;
content: '';
left: 0px;
top: 0px;
position: absolute;
width: 200px;
height: 200px;
background: linear-gradient(50deg, transparent, 35%, rgba(254,254,254,0.35),60%,transparent);
border-radius: 50%;
}


.inner {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 70px;
height: 70px;
box-shadow:0px 0px 0px 1px #333,0px 0px 0px 2px #aaa;
background:#6a4532 url()no-repeat center/cover;

border-radius: 50%;
}
.inner::after {
content: '';
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 6px;
height: 6px;
background: #aa2;
border-radius: 50%;
}

#all {position: absolute;width:200px; height:200px;top: 7px; left: 110px;z-index: -1; transition: 2s; animation:tion3s linear 1.5s infinite}
@keyframes opentop { 0% {transform: translatex(-50px);} 100% { transform:rotateX(0px);}}
@keyframes tion { 0% {} 100% { transform:rotate(360deg) } }
#smsvg{ z-index: 10;position: relative;
    left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}

#lrc { --motion: cover2; --tt: 1s; --bg: linear-gradient(90deg,#e56420, #c22525, #3d9c31, #37bbde, #000080,#ff0000) ; position: absolute;bottom: 60px; left: 50%; text-align: center;transform: translateX(-50%);font: 350 4em "Ma Shan Zheng","SimHei", "Arial", "sans-serif"; 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); pointer-events: none; z-index: 100;}
      #lrc::before { position: absolute; content: attr(data-lrc); width: 0%; height: 100%; color: transparent; overflow: hidden; white-space: pre; background: var(--bg);background-clip: text; -webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards var(--state); }
@keyframes cover1 { from { width: 0; } to { width: 100%; } }
@keyframes cover2 { from { width: 0; } to { width: 100%; } }

</style>
<div id="papa">
<div id="xiaobo">
<div class="hexahedron">
<div id="bnt" >
<div id="cndpt"></div>
<div id="enopg" ></div>
</div>
<div id="tmsg">00:00/00:00</div>
<div id="prog" title="播放进度条"><div id="prog-bar"></div></div>
</div>
<div id="all">
<divid="cp" ><div class="inner"><svgid="smsvg"width="200px" height="200px">
        <defs>
                <path id="path" d="M0 100 A100 100 0 1 1 200 100 A100 100 0 1 1 0 100"/>
        </defs>
        <text dx="77" dy="77" font-size="10" fill="#fff000"font-family="'楷体'">
                <textPath href="#path" textLength="535"> 花潮论坛 亚伦影音工作室 </textPath>
        </text>
</svg>
</div> <div class="overlay"></div>
</div>
</div>
</div>

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

<audio id="audio" src="https://static.oldkids.com.cn/upload/2026/02/15/blog_260848378_20260215142711105.mp3" loop autoplay></audio>

<script>

var mState = () => audio.paused ?
( bnt.style.setProperty( 'paused'),bnt.title = '点击播放' ) :
( bnt.style.setProperty( 'running'),bnt.title = '点击暂停' );
audio.addEventListener('pause', () => mState());
audio.addEventListener('playing', () => mState());
bnt.onclick = () => audio.paused ? (audio.play(),enopg.style.opacity= '0',cndpt.style.opacity = '1',all.style.left = '110px',all.style.animationPlayState = 'running') : (audio.pause(),enopg.style.opacity = '1',cndpt.style.opacity = '0',all.style.left = '30px',all.style.animationPlayState = 'paused');


prog.onclick = (e) => { audio.currentTime = audio.duration * e.offsetX / prog.offsetWidth;}
var progBar = document.getElementById('prog-bar');
audio.addEventListener('timeupdate', () => {
          varpercent= (audio.currentTime / audio.duration) * 100;
            progBar.style.width = percent + '%';
      });

audio.addEventListener('timeupdate', () => {
                tmsg.innerText = toMin(audio.currentTime) + ' | ' + toMin(audio.duration);});


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;
      };

</script>

<script >
(function() {
let gc=`秋水伊人 - 朱妍
作词：安华
作曲：刘亦敏
演唱：朱妍
☆★Lrc编辑 梅竹★☆
☆★协编 蓝菊★☆
出品:亚伦影音工作室
风儿轻轻地刮
雨儿点点地下
昨夜又是一场春意
谁站在窗前想念远方的她
草儿片片葱绿
水儿静静流淌
眼前又是一幕诗画
她却在亭下拨动忧伤的琵琶
每当这微风吹过额头白发
她就成了心中那挥不去的牵挂
每到这小雨淅淅沥沥地下
谁心中对她总有说不完的话
(Music)
风儿轻轻地刮
雨儿点点地下
昨夜又是一场春意
谁站在窗前想念远方的她
草儿片片葱绿
水儿静静流淌
眼前又是一幕诗画
她却在亭下拨动忧伤的琵琶
每当那芳草遍野满地落花
谁又再放飞那白鸽到天涯
每到那秋水匆匆身边流过
谁总是抓一把红豆
煮上相思茶
每到那秋水匆匆身边流过
谁总是抓一把红豆
煮上相思茶
谁总是抓一把红豆
煮上相思茶
(Music)
☆★谢谢欣赏★☆
=End=
`;

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;
};


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;
};
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 calcKey = () => {
        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);
};

let mState = () => audio.paused ? (lrc.style.setProperty('--state','paused')) : (lrc.style.setProperty('--state','running'));
audio.addEventListener('timeupdate', () => {
        for (j = 0; j < lrcAr.length; j++) {
                if (audio.currentTime >= lrcAr) {
                        cKey = j;
                        if (mKey === j) showLrc(lrcAr);
                        else continue;
                }
        }
});

audio.addEventListener('pause', () => mState());/**/
audio.addEventListener('play', () => mState());/**/
audio.addEventListener('seeked', () => calcKey());/**/
let lrcAr = getLrcAr(gc); /**/

})();
</script>

梦油 发表于 2026-4-28 11:14

欣赏佳作，问候亚伦。

红影 发表于 2026-4-28 20:02

这小播和北京十分相配，相互呼应，真漂亮。
歌曲好听，制作漂亮。欣赏亚伦老师好帖{:4_199:}

小辣椒 发表于 2026-4-29 23:13

欣赏亚纶的精彩制作，{:4_199:}

小辣椒 发表于 2026-4-29 23:14

光盘上的字颜色配的不够明显，我都没有看见上面是上面字，太小了

查看完整版本: 秋水伊人[花潮小播]