继续HIGH歌（转自马黑黑）
<div class="t_fsz"><table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_1701880"><br><br><br><br><br><br><br>
<style>
#papa { left: -214px; width: 1024px; height: 738px; background: #666 url('https://pic.imgdb.cn/item/6316c85816f2c2beb169e4bd.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; }
</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">黄龄 - HIGH歌</text>
</svg>
</div>
<script>
let lrcAr = [
['0.00','黄龄 - High歌'],
['6.00','作词/作曲：常石磊'],
['9.00','歌词编辑：孟德良'],
['17.04','Mountain top'],
['19.05','就跟着一起来'],
['21.09','没有什么 阻挡着未来'],
['26.04','Deeping night'],
['28.05','就你和我的爱'],
['30.07','没有什么 阻挡着未来'],
['35.03','Mountain top'],
['37.03','就跟着一起来'],
['39.06','没有什么 阻挡着未来'],
['44.01','Deeping night'],
['46.01','就你和我的爱'],
['48.05','没有什么 阻挡着未来'],
['53.00','Mountain top'],
['54.09','就跟着一起来'],
['57.04','没有什么 阻挡着未来'],
['61.10','Deeping night'],
['63.09','就你和我的爱'],
['66.03','没有什么 阻挡着未来'],
['70.08','Yi Yi Yi 你不在 我不在'],
['75.03','Yi Yi Yi 谁还会在'],
['79.07','Yi Yi Yi 你不在 我不在'],
['84.02','Yi Yi Yi 谁还会在'],
['124.02','Mountain top'],
['126.00','就跟着一起来'],
['128.05','没有什么 阻挡着未来'],
['132.10','Deeping night'],
['135.00','就你和我的爱'],
['137.04','没有什么 阻挡着未来'],
['141.09','Yi Yi Yi 你不在 我不在'],
['146.04','Yi Yi Yi 谁还会在'],
['150.07','Yi Yi Yi 你不在 我不在'],
['155.03','Yi Yi Yi 谁还会在'],
['204.03','Mountain top'],
['208.04','就一起来'],
['213.00','Mountain top'],
['217.03','就一起来'],
['221.08','Mountain top'],
['225.10','就一起来'],
['230.07','Mountain top'],
['235.01','就一起来']
];
let aud = new Audio();
aud.src = 'https://music.163.com/song/media/outer/url?id=238634.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>
</td></tr></table>
<br><br><br><br><br>
登陆一看，黑黑在HIGH歌…… 顺手把前二天拍的片，也合一个{:4_170:}
@马黑黑 安宁为表示感谢，建议@大猫咪 亲自献上现场版HIGH歌{:4_195:}
@大猫咪 要努力、要酷，要做一只可爱的猫 {:4_197:}猫回广州时记得去顺德陈村走走
长堤逶迤，水色碧明，日落、渔舟、白鹭、游人、柠檬茶。。
https://pic.imgdb.cn/item/631700b116f2c2beb1a893e7.jpg
https://pic.imgdb.cn/item/631700b616f2c2beb1a89adb.jpg
https://pic.imgdb.cn/item/6316fc1b16f2c2beb1a2ac2c.jpg
https://pic.imgdb.cn/item/6316fc2216f2c2beb1a2b528.jpg
安将军来啦。制作得真漂亮。照片也挺漂亮的。{:4_199:} 江风飒飒，长堤上当然最适合两轮车，城里可没这些待遇。
https://pic.imgdb.cn/item/6316fc2a16f2c2beb1a2be06.jpg
https://pic.imgdb.cn/item/6316fc2e16f2c2beb1a2c3bc.jpg
加林森 发表于 2022-9-6 16:43
安将军来啦。制作得真漂亮。照片也挺漂亮的。
队长好{:4_190:} 代码是黑黑滴，照片归我。好久不见哦，来杯柠茶~？（去糖飞冰吧、将军埋单哈） 安宁 发表于 2022-9-6 16:50
队长好 代码是黑黑滴，照片归我。好久不见哦，来杯柠茶~？（去糖飞冰吧、将军埋单哈）
要得要得。好久不见，很忙吧？ 加林森 发表于 2022-9-6 16:51
要得要得。好久不见，很忙吧？
还好，走走，逛逛，吃吃，喝喝，混日子。只是没玩论坛。发个帖子手生的，比抖音还抖抖抖。。 安宁 发表于 2022-9-6 17:00
还好，走走，逛逛，吃吃，喝喝，混日子。只是没玩论坛。发个帖子手生的，比抖音还抖抖抖。。
很幸福啊。手抖没关系，多万万就熟悉了。 制作漂亮，欣赏安宁好帖{:4_204:} 来喝奶茶，欣赏老师的精彩！{:6_240:} 安宁 发表于 2022-9-6 16:29
登陆一看，黑黑在HIGH歌…… 顺手把前二天拍的片，也合一个
@马黑黑 安宁为表示感谢，建议@ ...
小安将军晚上好 红影 发表于 2022-9-6 20:00
制作漂亮，欣赏安宁好帖
影宝宝早，好久没见，长发飘飘气质女神依旧美丽动人{:4_204:} 梦缘 发表于 2022-9-6 20:22
来喝奶茶，欣赏老师的精彩！
梦梦早！这老师一声把我给吓醒了{:5_117:}让我茫然失措，嗯，失措中。。
PS：以后不许吓我哦，老人家不耐摔{:5_106:} 马黑黑 发表于 2022-9-6 20:55
小安将军晚上好
黑黑醉心研学，吾辈之楷模，当学之典范{:4_190:} 安宁 发表于 2022-9-7 10:44
黑黑醉心研学，吾辈之楷模，当学之典范
玩玩而已，别把俺抬得太高 哈那饮料名字真有意思 {:4_189:} 猫也想喝，去广州小安宁就请猫喝这 {:4_173:}
顺德陈村猫记住了，摄影好棒！正是嗨的时候 {:4_170:} 谢谢安宁美帖，老喜欢了！收藏！
祝中秋节快乐，幸福安康！
{:4_204:}{:4_191:}{:4_179:}
页:
[1]