论坛 › 欢乐水吧 › 花潮小播[抖音特火的胶片播放器]

亚伦影音工作室 发表于 2026-4-23 11:17

花潮小播[抖音特火的胶片播放器]

本帖最后由 亚伦影音工作室 于 2026-4-27 06:38 编辑 <br /><br /><style>
#xiaobo {z-index: 100;
      width: 350px;
      height: 220px;
      margin: 100px 140px;
      position: relative;
      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 #8b4523;
      height: 210px;
      margin: 0px 0px;
         position: relative; z-index: 1;
      background:#8E731B url(https://img3.oldkids.cn/upload/2020/10/26/photo_20201026164004496.jpg)no-repeat center/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(#8b4512, #8B4513 8px, #aaaaaa 9px);border-radius: 50%;}
.overlay {
content: '';
left: 0px;
top: 0px;
position: absolute;
width: 200px;
height: 200px;
background: linear-gradient(55deg, transparent, 40%, rgba(255,255,255,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{z-index: 20;text-align: center;
    width: 620px;bottom:0px; left:0%;
    height: 150px;
    overflow: hidden;
    display: block;position: relative;
    margin: 10px auto;}
#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: 300 3em "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="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>


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

<audio id="audio" src="https://img2.oldkids.cn/upload/2026/04/10/blog_260855907_20260410154234661.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=`
受伤的是我(男女对唱版)
词曲：马健涛
编曲：马健涛
混音：马健涛
母带：马健涛
出品：执着文化
你已经变心了
我却还在执着
曾问镜子里的我
快乐不快乐
你开始讨厌我
说话不看着我
开始嫌弃我啰嗦
是不是不爱我了
我招谁惹谁了
受伤的总是我
我将你藏进我心窝
你却用刀刺痛我
该爱的人爱了
该伤的心伤了
不该流的泪流干了
求你别再折磨我
你不再需要我
就算我怎么做
我是不合脚的鞋子
你该脱就要脱
我收拾了行李
悄悄地离开你
等你醒来发现我离去
别难过这都是为你
我招谁惹谁了
受伤的总是我
我将你藏进我心窝
你却用刀刺痛我
该爱的人爱了
该伤的心伤了
不该流的泪流干了
求你别再折磨我
我招谁惹谁了
受伤的都是我
我将你藏进我心窝
你却用刀刺痛我
该爱的人爱了
该伤的心伤了
不该流的泪流干了
求你别再折磨我
不该流的泪流干了
求你别再折磨我
`;

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-23 11:17

本帖最后由 亚伦影音工作室 于 2026-4-23 11:34 编辑 <br /><br /><style>
#qmsvg{ z-index: 10;position: relative;
      left: 5%;cursor: pointer;
      top: 5%;
       animation: rot 10s linear infinite ;
}
@keyframes rot {to { transform: rotate(360deg);filter: hue-rotate(360deg); }}
</style>
<svgid="qmsvg"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="30" dy="30" font-size="30" fill="#ffff00"font-family="'楷体'">
                <textPath href="#path" textLength="600">花潮论坛亚伦影音工作室</textPath>
        </text>
</svg>

杨帆 发表于 2026-4-23 13:36

本帖最后由 杨帆 于 2026-4-23 13:41 编辑

新颖别致，欣赏学习，谢谢亚伦老师再创新品{:4_176:}

梦油 发表于 2026-4-23 14:10

亚伦的制作很别致。

红影 发表于 2026-4-23 21:45

好漂亮的小播，谢谢亚伦老师为花潮制作的漂亮的播放器{:4_199:}

朵拉 发表于 2026-4-25 21:12

问好亚伦老师，如果可以，最好能同步歌词{:4_190:}

亚伦影音工作室 发表于 2026-4-25 21:24

朵拉 发表于 2026-4-25 21:12
问好亚伦老师，如果可以，最好能同步歌词

没有问题这是开始！

小辣椒 发表于 2026-4-25 22:58

亚纶把光盘中间的那个圆加大了{:4_199:}

老谟深虑 发表于 2026-4-27 18:55

         老师的这个播放器真好，学习了！

朵拉 发表于 2026-4-27 20:10

问好亚伦老师，同步歌词了，学习下{:4_204:}

查看完整版本: 花潮小播[抖音特火的胶片播放器]