司南 - 吹灭小山河 - 音乐沙龙 - 花潮论坛

马黑黑 发表于 2022-8-30 07:00

司南 - 吹灭小山河

马黑黑 发表于 2022-8-30 07:01

原创代码：
<style>
#papa { left: -214px; width: 1024px; height: 640px; box-shadow: 3px 3px 20px #000; background: lightblue url('https://638183.freep.cn/638183/Pic/2022/xsh.webp') no-repeat center/cover; user-select: none; position: relative; z-index: 2; }
#btnwrap { position: absolute; right: 20px; top: 20px; width: 100px; height: 100px; display: grid; place-items: center; }
#btnwrap span { position: absolute; transition: all 1.2s; }
#h5player { width: 100px; height: 100px; border-radius: 50%; background: tan conic-gradient(from 0deg, red, green, red 1%, snow 0); mask: radial-gradient(transparent 60%, red 61%, red 0); -webkit-mask: radial-gradient(transparent 60%, red 61%, red 0); }
#btnplay { left: 15px; width: 20px; height: 20px; background: #eee; clip-path: polygon(0 0, 0% 100%, 100% 50%); cursor: pointer; }
#btnplay:hover { background: tomato; }
#btnpause { left: 20px; width: 2px; height: 20px; border-style: solid; border-width: 0px 4px; border-color: transparent #eee; display: none; cursor: pointer; }
#btnpause:hover{ border-color: transparent tomato; }
#tmsg { left: 40px; font: normal 16px sans-serif; color: #ddd; }
#lrctext { position: absolute; right: 140px; top: 50px; font: bold 1.5em sans-serif; color: tomato; text-shadow: 1px 1px 1px #000; transition: 1.2s; }
#lrctext:hover, #tmsg:hover { color: orange; }
</style>

<div id="papa">
<div id="btnwrap">
<span id="h5player"></span><span id="btnplay"></span><span id="btnpause"></span>
<span id="tmsg">00:00<br>00:00</span>
</div>
<div id="lrctext">lrc歌词</div>
</div>

<script>
let aud = new Audio();
let lrcAr = [
['0.00','吹灭小山河 - 国风堂 / 司南'],
['5.02','词：季知拙'],
['10.04','曲：WH宇恒'],
['15.06','曾羡慕闲云野鹤作客人间'],
['19.00','寄情于天地有灵草木无邪'],
['22.04','此生不做万人杰'],
['25.01','赴一株水仙白头约'],
['29.04','当如愿往来山川出入云烟'],
['32.06','萦怀却朝寡夕淡悲欢难辨'],
['35.10','贪过了新鲜便无聊'],
['38.09','倒头梦大千'],
['42.05','始忆依稀烂醉间'],
['44.08','想开怀抱明月'],
['46.06','却潦倒他一身缠绵'],
['49.03','少年轻狂都散尽'],
['51.08','笑敢与他换名姓发誓言'],
['57.06','这天下风情千万般'],
['60.00','值得觊觎一眼'],
['62.03','桃花醒自然'],
['63.04','星斗睡河汉'],
['65.02','不必再舍近求远'],
['66.08','就在他山眉海目间寻风月'],
['71.05','何须问生平长短'],
['73.07','应问何人相伴'],
['75.08','千万人赴宴'],
['77.00','千万人退却'],
['78.08','独他极力上前'],
['80.07','争得你一席并肩'],
['98.09','待重逢秉烛游夜一种悠闲'],
['102.04','人间是万象横看竖成诗篇'],
['106.00','好风比酒还讨人醉'],
['108.06','欠它两碗钱'],
['112.03','手上正挈的灯盏'],
['114.08','他绘海纳百川'],
['116.05','随烛火苗乍明乍现'],
['119.01','任你挑灯看河山'],
['121.06','随手指得哪一座改日看'],
['127.03','这天下风情千万般'],
['129.08','值得觊觎一眼'],
['132.01','桃花醒自然'],
['133.02','星斗睡河汉'],
['134.09','不必再舍近求远'],
['136.06','就在他山眉海目间寻风月'],
['141.02','何须问生平长短'],
['143.04','应问何人相伴'],
['145.05','千万人赴宴'],
['146.08','千万人退却'],
['148.05','独他极力上前'],
['150.06','争得你一席并肩'],
['154.06','此心也曾渴慕千山'],
['157.00','如今爱等风闲'],
['159.02','临窗听雨夜'],
['160.04','笔忆话梦谈'],
['162.04','当年万里觅风月夜航船'],
['165.00','如今江南也不眼馋'],
['168.05','在他山眉海目间'],
['170.06','寻到风花雪月'],
['172.08','温柔而凛冽'],
['173.10','在心上撒野'],
['175.02','覆盖了所有的'],
['177.06','山河岁月天地远']
];
aud.src = 'https://music.163.com/song/media/outer/url?id=1412559986.mp3';
aud.autoplay = true;
aud.loop = true;
btnplay.onclick = () => aud.play();
btnpause.onclick = () => aud.pause();
h5player.onmousemove = (e) => h5player.style.cursor =isHover(e.offsetX, e.offsetY) ? 'pointer' : 'default';
h5player.onclick = (e) => {
if (isHover(e.offsetX, e.offsetY)) {
let deg = Math.atan2(e.offsetY - 50, e.offsetX - 50) * 180 / Math.PI;
deg += (e.offsetX < 50 && e.offsetY < 50) ?450 : 90;
aud.currentTime = aud.duration * deg / 360;
}
}
aud.addEventListener('pause', () => btnstate());
aud.addEventListener('play',() => btnstate());
aud.addEventListener('timeupdate', () => {
tmsg.innerHTML = toMin(aud.currentTime) + '<br>' + toMin(aud.duration);
h5player.style.background = 'conic-gradient(from 0deg, red, green, red ' + aud.currentTime / aud.duration * 100 + '%, snow 0)';
for (j = 0; j < lrcAr.length;j ++) {
if (aud.currentTime >= lrcAr) lrctext.innerHTML = lrcAr;
}
});
let isHover = (x,y) => Math.pow(x - 50, 2) + Math.pow(y - 50, 2) >= Math.pow(40, 2);
let btnstate = () => aud.paused ? (btnplay.style.display = 'block', btnpause.style.display = 'none') : (btnplay.style.display = 'none', btnpause.style.display = 'block');
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-8-30 07:16

本帖播放器HTML文档，要求放置于 position 设定为 relative 的父元素。以下HTML代码的完整性在帖子代码中应保持原样：

   <div id="btnwrap">
            <span id="h5player"></span><span id="btnplay"></span><span id="btnpause"></span>
            <span id="tmsg">00:00<br>00:00</span>
   </div>

其中，id 为 btnwrap 的 div 是播放器的归拢元素，它在CSS中已经设定为绝对定位，所有播放器部件（歌词除外）将跟随它进行物理定位。要部署播放器在帖子中的物理位置，请两两配套更改其 left、right ↔ top、bottom 属性。

lrc歌词所在元素的位置设定独立于播放器，更改相关属性请修改CSS中的 #lrctext 选择器对应属性。

JS代码，能修改的部分主要是歌词与进度颜色，若在CSS中修改了播放器的尺寸，则JS代码中，如下一行中的红色数字，要相应改为 btnwrap 的宽高尺寸的一半（其下子元素可能也需要更改相关CSS属性）：

let deg = Math.atan2(e.offsetY - 50, e.offsetX - 50) * 180 / Math.PI;

马黑黑 发表于 2022-8-30 07:19

本帖背景图片来源于网络，除使用中设定了显示尺寸，未做任何改动

马黑黑 发表于 2022-8-30 07:37

播放器中的播放、暂停按钮，播放按钮用 clip-path 剪裁做成，暂停按钮用边框模拟。

红影发表于 2022-8-30 09:06

这个圆圈播放器还加了播放按钮，真是越来越完善了{:4_187:}

梦油发表于 2022-8-30 17:11

黑黑朋友下午好！我没听过这支歌曲，但很好听，节奏欢快、婉转动听。

马黑黑 发表于 2022-8-30 18:46

梦油发表于 2022-8-30 17:11
黑黑朋友下午好！我没听过这支歌曲，但很好听，节奏欢快、婉转动听。

司南唱的歌速度偏快

小辣椒 发表于 2022-8-30 19:30

这个是昨天后来修改的那个吧，果然黑黑每天有精彩{:4_199:}

梦油发表于 2022-8-30 20:12

马黑黑发表于 2022-8-30 18:46
司南唱的歌速度偏快

是的，我也感觉到了。

马黑黑 发表于 2022-8-30 20:17

梦油发表于 2022-8-30 20:12
是的，我也感觉到了。

去年，看过一部电视剧，有她的演唱，所以记得

马黑黑 发表于 2022-8-30 20:21

小辣椒发表于 2022-8-30 19:30
这个是昨天后来修改的那个吧，果然黑黑每天有精彩

还行的吧

绿叶清舟 发表于 2022-8-30 20:25

就是没听懂唱的是啥了

马黑黑 发表于 2022-8-30 20:26

绿叶清舟发表于 2022-8-30 20:25
就是没听懂唱的是啥了

没听懂就看看歌词

绿叶清舟 发表于 2022-8-30 20:29

马黑黑发表于 2022-8-30 20:26
没听懂就看看歌词

没文化啊，现在的很多新歌，歌词大多是看不懂的了

马黑黑 发表于 2022-8-30 20:31

绿叶清舟发表于 2022-8-30 20:29
没文化啊，现在的很多新歌，歌词大多是看不懂的了

这个歌词，如果度过金庸琼瑶，一点都不会感到陌生

绿叶清舟 发表于 2022-8-30 20:39

马黑黑发表于 2022-8-30 20:31
这个歌词，如果度过金庸琼瑶，一点都不会感到陌生

他俩的看过不少的啊，咋没感觉有联系的啊

加林森 发表于 2022-8-31 19:16

制作得真漂亮，还付代码与讲解，老黑真好！{:4_199:}

马黑黑 发表于 2022-8-31 19:18

加林森发表于 2022-8-31 19:16
制作得真漂亮，还付代码与讲解，老黑真好！

{:5_108:}

加林森 发表于 2022-8-31 19:20

马黑黑发表于 2022-8-31 19:18

{:4_191:}

页: [1]

花潮论坛's Archiver

司南 - 吹灭小山河