蒋雪儿《风夜行》（学习马老师代码）
本帖最后由 梦缘 于 2022-9-5 21:08 编辑 <br /><br /><style>#papa { left: -214px; width: 1024px; height: 640px; top:120px; background: #666 url('https://www.huachaowang.com/data/attachment/forum/202209/05/203350m3zxlx84lvovl1ld.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">蒋雪儿-《风夜行》</text>
</svg>
</div>
<script>
let lrcAr = [
['00.00','蒋雪儿-《风夜行》'],
['2.00','【最新古风】'],
['4.00','演唱：蒋雪儿'],
['6.00','作词：祝何'],
['8.00','作曲：黄钧泽'],
['10.00','※※※※※※※※※'],
['11.00','LRC编制：梦缘'],
['14.00','※※※※※※※※※'],
['15.00','岂合巴山雪夜 相望别离'],
['21.00','我自乘风去'],
['24.00','留下一轮血月 不过宿命'],
['30.00','回首往事皆成雨'],
['33.00','再提笔 咦'],
['40.00','对酒当歌 应几许 吁'],
['49.00','一付笑谈尽往矣'],
['54.00','红尘的故事都忘了'],
['58.00','说书人已不再年少'],
['62.00','那残碑谁还在寻找'],
['67.00','斩不断恩怨和纷扰'],
['71.00','（那结局）马蹄声是否不太安静'],
['74.00','何必去在意'],
['77.00','夜色中何处传来一声叹息'],
['80.00','而这 荒野不再孤寂'],
['83.00','乱箭如星雨'],
['85.00','照亮了天际'],
['87.00','（拂袖拭尘衣）岂合巴山雪夜 相望别离'],
['93.00','我自乘风去'],
['96.00','留下一轮血月 不过宿命'],
['102.00','回首往事皆成雨'],
['105.00','再提笔 咦'],
['112.00','对酒当歌 应几许 吁'],
['121.00','一付笑谈尽往矣'],
['126.00','红尘的故事都忘了'],
['130.00','说书人已不再年少'],
['134.00','那残碑谁还在寻找'],
['139.00','斩不断恩怨和纷扰'],
['143.00','（那结局）马蹄声是否不太安静'],
['147.00','何必去在意'],
['149.00','夜色中何处传来一声叹息'],
['152.00','而这 荒野不再孤寂'],
['155.00','乱箭如星雨'],
['157.00','照亮了天际'],
['159.00','（拂袖拭尘衣）岂合巴山雪夜 相望别离'],
['165.00','我自乘风去'],
['168.00','留下一轮血月 不过宿命'],
['174.00','回首往事皆成雨'],
['177.00','再提笔 咦'],
['184.00','对酒当歌 应几许 吁'],
['193.00','一付笑谈尽往矣'],
['197.00','谢谢马老师代码'],
['200.00','谢谢大家欣赏支持']
];
let aud = new Audio();
aud.src = 'http://txcdn-file-m.mvbox.cn/upload/a2328729d708c75a1dda6a656e882a23.m4a';
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>
<br><br><br><br><br><br><br><br><br><br> 这个音乐我没有听到，不晓得是不是我电脑问题 音乐没有动起来。 尾巴太多代码了。 现在有声音了{:4_199:} 很奇怪怎么你编辑也是
本帖最后由 梦缘 于 2022-9-5 21:08 编辑 现在对了！ 好听的歌儿，梦缘也做成了，聪明。给梦缘点赞{:4_187:} svg 也是HTML元素，可以在定义为 position: absolute 之后随意进行物理定位 小辣椒 发表于 2022-9-5 21:09
现在有声音了
{:4_191:}谢谢老师的欣赏支持，问好！ 加林森 发表于 2022-9-5 21:13
现在对了！
谢谢老师的欣赏支持，问好！{:4_190:} 红影 发表于 2022-9-5 21:19
好听的歌儿，梦缘也做成了，聪明。给梦缘点赞
感谢老师的欣赏支持，问好！{:4_191:} 马黑黑 发表于 2022-9-5 21:20
svg 也是HTML元素，可以在定义为 position: absolute 之后随意进行物理定位
谢谢老师的代码，问好！{:4_190:} 很雅致的图图，赞{:4_199:} 梦缘 发表于 2022-9-5 21:47
感谢老师的欣赏支持，问好！
客气了，制作非常漂亮{:4_187:} 梦缘 发表于 2022-9-5 21:47
谢谢老师的代码，问好！
{:4_199:} 梦缘 发表于 2022-9-5 21:46
谢谢老师的欣赏支持，问好！
不客气。 绿叶清舟 发表于 2022-9-5 21:53
很雅致的图图，赞
谢谢老师的欣赏支持，问好！{:4_191:} 梦缘 发表于 2022-9-6 11:19
谢谢老师的欣赏支持，问好！
梦缘下午好{:4_191:}
页:
[1]