《清晨鸟鸣声流水声》- Noble Music（根据老黑黑白世界制作） - 第2页 - 欢乐水吧 - 花潮论坛

加林森 发表于 2022-7-6 22:07

醉美水芙蓉发表于 2022-7-6 21:51
队长这个创意不错！越做越漂亮了！

谢谢水芙蓉支持！{:4_180:}

加林森 发表于 2022-7-6 22:27

本帖最后由加林森于 2022-9-5 20:51 编辑 <br /><br />红影发表于 2022-7-6 22:02
问好，给队长点赞
谢谢！

<style>
#papa { left: -214px; width: 1024px; height: 640px; background: #666 url('https://pic.imgdb.cn/item/6315b9f416f2c2beb1682410.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; user-select: none; position: relative; z-index: 1;}
#mplayer { position: absolute; padding: 0; margin: 20px; width: 120px; height: 120px; border-radius: 50%; overflow: hidden; }
#prog, #track { stroke: url(#gradient); }
#lrc { position: absolute; display: block; left: 20px; bottom: 0; }
#lrctxt { dominant-baseline: middle; fill: url(#gradient); font: bold 2em sans-serif; text-shadow: 0 4px 0 #000; letter-spacing: 2px; }
#disc { position: absolute; width: 60px; height: 60px; left: 110px; top: 600px; background: conic-gradient(red,orange,yellow,green,teal,blue,purple); mask: radial-gradient(transparent 4px,red 0); -webkit-mask: radial-gradient(transparent 4px,red 0); border-radius: 50%; cursor: pointer; animation: rot 2s linear infinite; }
</style>

<div id="papa">
            <div id="mplayer">
            <svg width="100%" height="100%" shape-rendering="geometricPrecision">
                     <g transform="rotate(-90, 60, 60)">
                           <circle id="track" cx="60" cy="60" r="55" fill="none" stroke="rgba(255,255,255,.5)" stroke-width="10" stroke-dasharray="2" stroke-opacity="0.45" />
                           <circle id="prog" cx="60" cy="60" r="55" fill="none" stroke="red" stroke-width="10" />
                     </g>
                     <text fill="orange">
                           <tspan id="cur" x="40" y="55">00:00</tspan>
                           <tspan id="dur" x="40" y="75">00:00</tspan>
                     </text>
            </svg>
   </div>
   <svg id="lrc" width="400" height="50">
            <defs>
                     <linearGradient id="gradient" x1="0" y1="0" x2="0" y2="1">
                           <stop offset="0%" stop-color="green"/>
                           <stop offset="50%" stop-color="orange"/>
                           <stop offset="100%" stop-color="red"/>
                     </linearGradient>
            </defs>
            <text id="lrctxt" x="0" y="25">纸上雪 - 许嵩</text>
   </svg>
</div>

<script>
let lrcAr = [
   ['00.00','纸上雪- 许嵩'],
['28.12','墙影晃烛我提笔却清楚'],
['32.86','宣白上行书蘸墨了几行路'],
['38.14','暗夜风惊竹谁在窗外起舞'],
['43.28','而冷风隔窗我静静地读'],
['51.19','炊烟不安袅袅了几道弯'],
['56.33','俗事万般不敌雪落轻叹'],
['61.12','眼前雪满山咫尺纷飞不断'],
['66.86','门开不远处与天地对谈'],
['75.91','雪霁一壶酒与你共饮春秋'],
['81.15','盼前尘回首三生亦师友'],
['86.53','千年画卷不寂寞不沉默'],
['92.17','江岸垂钓的是洒脱'],
['96.35','雪霁一壶酒与你共饮春秋'],
['101.47','天涯话不多浮生继续走'],
['106.92','青史无载不犯愁不落寞'],
['113.43','话桑麻谁开口唯挚友'],
['132.78','洒空谁落定巷深人寂静'],
['137.82','群山皑皑谁来命名'],
['142.72','积素雪如琴音落不停'],
['148.41','广庭闲不语却动听'],
['154.61','雪霁一壶酒与你共饮春秋'],
['162.81','盼前尘回首三生亦师友'],
['168.29','千年画卷不寂寞不沉默'],
['171.91','江岸垂钓的是洒脱'],
['178.17','雪霁一壶酒与你共饮春秋'],
['183.16','天涯话不多浮生继续走'],
['188.59','青史无载不犯愁不落寞'],
['195.08','话桑麻谁开口'],
['198.82','雪霁一壶酒与你共饮春秋'],
['203.76','盼前尘回首三生亦师友'],
['208.90','千年画卷不寂寞不沉默'],
['214.79','江岸垂钓的是洒脱'],
['218.97','雪霁一壶酒与你共饮春秋'],
['224.21','天涯话不多浮生继续走'],
['229.44','青史无载不犯愁不落寞'],
['235.86','话桑麻谁开口唯挚'],
   ['238.00','谢谢欣赏']
];
let aud = new Audio();
aud.src = 'https://music.163.com/song/media/outer/url?id=1978137630.mp3';
aud.autoplay = true;
aud.loop = true;

//设置圆环进度偏移
let girth = prog.getTotalLength();
prog.style.strokeDasharray = prog.style.strokeDashoffset = girth+ 'px';
//圆环鼠标经过
mplayer.onmousemove = (e) => {
   if (isHover(e.offsetX, e.offsetY))mplayer.style.cursor = 'pointer';
}
//圆环点击
mplayer.onclick = (e) => {
   if (isHover(e.offsetX, e.offsetY)) { //轨道
            let deg = Math.atan2(e.offsetY - 60, e.offsetX - 60) * 180 / Math.PI;
            deg += (e.offsetX < 60 && e.offsetY < 60) ?450 : 90;
            aud.currentTime = aud.duration * deg / 360;
   } else { //内区域
            aud.paused ? aud.play() : aud.pause();
   }
}
//监听播放进度
aud.addEventListener('timeupdate', () => {
   prog.style.strokeDashoffset = girth - girth * aud.currentTime / aud.duration + 'px';
   cur.textContent = toMin(aud.currentTime);
   dur.textContent = toMin(aud.duration);
   for(j=0; j<lrcAr.length; j++) {
            if(aud.currentTime >= lrcAr) lrctxt.textContent = lrcAr;
   }
});
//圆检测鼠标经过
let isHover = (x,y) => Math.pow(x - 60, 2) + Math.pow(y - 60, 2) >= Math.pow(45, 2);
//时间信息格式化
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-7-7 10:43

加林森发表于 2022-7-6 18:08
这个是原音配置的声音。

哦，知道了。

加林森 发表于 2022-7-7 13:49

梦油发表于 2022-7-7 10:43
哦，知道了。

嗯嗯。

樵歌发表于 2022-7-7 20:21

小鸟好可爱。这个比小美女养眼。{:4_173:}

加林森 发表于 2022-7-7 20:49

樵歌发表于 2022-7-7 20:21
小鸟好可爱。这个比小美女养眼。

就是。小鸟多乖啊。

樵歌发表于 2022-7-7 21:11

加林森发表于 2022-7-7 20:49
就是。小鸟多乖啊。

小猫咪小狗狗也不错哈

加林森 发表于 2022-7-7 21:16

樵歌发表于 2022-7-7 21:11
小猫咪小狗狗也不错哈

看来老兄与我一样的啊。

樵歌发表于 2022-7-9 10:07

加林森发表于 2022-7-7 21:16
看来老兄与我一样的啊。

嗯，俺们都是善良人{:4_189:}

大猫咪 发表于 2022-7-9 11:08

很舒服的大自然旋律，配上图片真棒！队长好制作！赞！

{:4_187:}{:4_179:}

加林森 发表于 2022-7-9 13:08

樵歌发表于 2022-7-9 10:07
嗯，俺们都是善良人

是的。

加林森 发表于 2022-7-9 13:09

大猫咪发表于 2022-7-9 11:08
很舒服的大自然旋律，配上图片真棒！队长好制作！赞！

猫猫下午好。我的电脑出问题了。正在恢复中！

大猫咪 发表于 2022-7-9 13:13

加林森发表于 2022-7-9 13:09
猫猫下午好。我的电脑出问题了。正在恢复中！

队长辛苦了{:4_187:} 应该没问题吧 {:4_190:}

加林森 发表于 2022-7-9 13:16

大猫咪发表于 2022-7-9 13:13
队长辛苦了应该没问题吧

系统有点问题。我自己在恢复。

大猫咪 发表于 2022-7-9 13:18

加林森发表于 2022-7-9 13:16
系统有点问题。我自己在恢复。

好的{:4_179:}

加林森 发表于 2022-7-9 13:19

大猫咪发表于 2022-7-9 13:18
好的

嗯嗯。{:4_179:}

页: 1 [2]

花潮论坛's Archiver