|
|
楼主 |
发表于 2022-9-23 07:22
|
显示全部楼层
代码：
- <style>
- #papa { margin: auto; width: 1024px; height: 640px; background: url('/data/attachment/forum/202209/23/071140hqavv7a5d0vd4viv.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; box-shadow: 3px 3px 20px #000; display: flex; justify-content: center; overflow: hidden; position: relative; z-index: 1; }
- #mplayer { position: absolute; bottom: 10px; }
- #btnwrap { fill: lightblue; cursor: pointer; }
- #btnwrap:hover { fill: lightgreen; }
- #tmsg { fill: tan; stroke: lightblue; stroke-width: 1px; font: bold 1em sans-serif; }
- #lrc { position: absolute; top: 10px; font: bold 2.4em sans-serif; color: transparent; background: linear-gradient(-90deg, tomato, tan) 0 0 / 200% 200%; filter: drop-shadow(2px 2px 4px #000); background-clip: text; -webkit-background-clip: text; text-stroke: 1px lightgreen; -webkit-text-stroke: 1px lightblue; }
- #mpic {position: absolute; left: 0; top: 0; width: 60px;offset-distance: 0;offset-path: path("M0 40 Q500 180, 600 160 T1024 40");animation: move 8s linear infinite;}
- @keyframes bgMove1 { from { background-position: 0 0; } to { background-position: -100% 0; } }
- @keyframes bgMove2 { from { background-position: 0 0; } to { background-position: -100% 0; } }
- @keyframes move { to { offset-distance: 100%;} }
- </style>
- <div id="papa">
- <img id="mpic" alt="" src="/data/attachment/forum/202209/23/071315t6o896f1t6mtyzbp.gif" />
- <div id="lrc">花潮lrc在线</div>
- <svg id="mplayer" width="120" height="120">
- <g id="mama" transform="rotate(-90, 60, 60)" style="cursor: pointer">
- <circle id="track" cx="60" cy="60" r="50" fill="none" stroke-width="10" stroke="rgba(255,255,255,0.65)" />
- <circle id="prog" cx="60" cy="60" r="50" fill="none" stroke-width="4" stroke="rgba(50,120,40,0.75)" />
- </g>
- <g id="btnwrap">
- <path id="btnplay" d="M 50 50,50 70,70, 60 z"></path>
- <path id="btnpause" d="M 52 50,52 70,57 70,57 50,52 50 z M 60 50,60 70,65 70,65 50,60 50 z" style="display:none"></path>
- <path d="M 57 50,60 50,60 70,57 70 z" fill="transparent" />
- </g>
- <path id="curPath" d="M 20 70 Q 60 0 100 70" fill="none" stroke="none"/>
- <path id="durPath" d="M 20 55 Q 60 110 100 55" fill="none" stroke="none"/>
- <g id="tmsg">
- <text x="34" y="0"><textPath id="curMsg" xlink:href="#curPath" dominant-baseline="text-after-edge">00:00</textPath></text>
- <text x="29" y="0"><textPath id="durMsg" xlink:href="#durPath" dominant-baseline="text-before-edge">00:00</textPath></text>
- </g>
- </svg>
- </div>
- <script>
- let lrcAr = [[0,"呼伦贝尔 - 海东青乐团",8.7],[8.74,"词 曲 唱 - 穆腾",15.3],[24,"你是否向往见到最蓝的天",3.0],[27.65,"你是否梦里到过无边的草原",3.0],[31.25,"你是否也想跨上那骏马",3.2],[34.76,"自由的奔腾向天边",3.1],[38.6,"你是否也想像雄鹰",3.0],[41.92,"展翅翱翔天地间",3.2],[45.63,"洁白的云朵",2.7],[49.31,"飘在空中俯瞰",2.7],[52.8,"有多少动听的歌在回荡",3.9],[59.95,"有多少传说永远在传唱",4.6],[67,"这就是我的家 我的草原",4.1],[74.1,"毕洽迈 海日泰",2.3],[76.38,"最美的草原",1.3],[80.78,"呼伦贝尔 大草原",3.1],[84.17,"白云蓝天 一望无边",3.1],[87.93,"呼伦贝尔 大草原",3.2],[91.28,"骏马奔腾 雄鹰盘旋",3.5],[94.92,"呼伦贝尔 大草原",2.9],[98.44,"白云蓝天 一望无边",3.2],[102.06,"呼伦贝尔 大草原",3.3],[105.6,"骏马奔腾 雄鹰盘旋",3.4],[139.51,"你是否向往见到最蓝的天",2.7],[143.01,"你是否梦里到过无边的草原",3.3],[146.73,"你是否也想跨上那骏马",3.0],[150.38,"自由的奔腾向天边",2.8],[155.39,"呼伦贝尔 大草原",3.3],[159.04,"白云蓝天 一望无边",3.3],[162.58,"呼伦贝尔 大草原",3.0],[165.95,"骏马奔腾 雄鹰盘旋",3.3],[169.59,"呼伦贝尔 大草原",3.3],[173.16,"白云蓝天 一望无边",3.4],[176.71,"呼伦贝尔 大草原",3.3],[180.15,"骏马奔腾 雄鹰盘旋",3.3],[183.77,"呼伦贝尔 大草原",3.4],[187.48,"白云蓝天 一望无边",3.3],[190.89,"呼伦贝尔 大草原",3.2],[194.41,"骏马奔腾 雄鹰盘旋",3.7],[198.05,"呼伦贝尔 大草原",3.3],[201.49,"白云蓝天 一望无边",3.3],[205.16,"呼伦贝尔 大草原",3.2],[208.74,"骏马奔腾 雄鹰盘旋",3.8]];
- let mKey = 0, mFlag = true, aud = new Audio();
- let cc = {
- x: 1*track.getAttribute('cx'),
- y: 1*track.getAttribute('cy'),
- r: 1*track.getAttribute('r'),
- len: track.getTotalLength(),
- };
- prog.style.strokeDasharray = prog.style.strokeDashoffset =cc.len;
- aud.src = 'https://music.163.com/song/media/outer/url?id=1886833453.mp3';
- aud.autoplay = true;
- aud.loop = true;
- mama.onclick = (e) => {
- let deg = Math.atan2(e.offsetY - cc.y, e.offsetX - cc.x) * 180 / Math.PI;
- deg += (e.offsetX < cc.x && e.offsetY < cc.y) ? 450 : 90;
- aud.currentTime = aud.duration * deg / 360;
- };
- btnwrap.onclick = () => aud.paused ? aud.play() : aud.pause();
- aud.addEventListener('pause', () => mState());
- aud.addEventListener('play', () => mState());
- aud.addEventListener('seeked', () => calcKey());
- aud.addEventListener('timeupdate', () => {
- prog.style.strokeDashoffset = cc.len - cc.len * aud.currentTime / aud.duration;
- curMsg.textContent = toMin(aud.currentTime);
- durMsg.textContent = toMin(aud.duration);
- for(j=0; j<lrcAr.length; j++) {
- if(aud.currentTime >= lrcAr[j][0]) {
- if(mKey === j) showLrc(lrcAr[j][2] || 5);
- else continue;
- }
- }
- });
- let mState = () => aud.paused ? (btnplay.style.display = 'block', btnpause.style.display = 'none', lrc.style.animationPlayState = 'paused') : (btnplay.style.display = 'none', btnpause.style.display = 'block', lrc.style.animationPlayState = 'running');
- let showLrc = (time) => {
- lrc.style.animation = (mFlag ? 'bgMove1 ' : 'bgMove2 ') + time + 's linear forwards';
- lrc.innerHTML = lrcAr[mKey][1];
- mKey += 1;
- mFlag = !mFlag;
- }
- let calcKey = () => {
- for(j = 0; j < lrcAr.length; j ++) {
- if(aud.currentTime <= lrcAr[j][0]) {
- mKey = j - 1;
- break;
- }
- }
- if(mKey <0) mKey = 0;
- if(mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;
- let mtime = lrcAr[mKey][2] - (aud.currentTime - lrcAr[mKey][0]);
- showLrc(mtime);
- }
- 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>
|
|
发表于 2022-9-23 07:15
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
发表于 2022-9-23 08:23
发表于 2022-9-23 09:16
发表于 2022-9-23 11:34
