阖眸烟云-东篱 送东篱闲人！
本帖最后由 加林森 于 2022-9-1 19:18 编辑 <br /><br /><style>#papa { left: -214px; width: 1024px; height: 884px; background: gray url('https://pic.imgdb.cn/item/630f25bd16f2c2beb1ae1de7.jpg') no-repeat center/cover;box-shadow: 3px 3px 20px #000; position: relative; user-select: none; z-index: 1; }
#mplayer { position: absolute; left: calc(50% - 350px); bottom: 10px; width: 300px; height: 86px; background: rgba(0,0,0,.35); border: 4px double #ccc; border-radius: 3px; border-color: red orange purple tomato; backdrop-filter: blur(4px); display: grid; place-items: center; }
#mplayer span { position: absolute; transition: .5s; }
#lrc { top: 4px; padding: 2px; font: normal 1.4em sans-serif; color: #00BFFF; text-shadow: 1px 1px 1px #000; }
#prog { bottom: 6px; width: 290px; height: 1px; background: #ccc linear-gradient(to right,red,orange,green,red) no-repeat center left; background-size: 1px 4px; cursor: pointer; }
#prog::before { position: absolute; height: 10px; width: 290px; top: -4px; content: ''; }
#btnmain { bottom: 14px; width: 28px; height: 28px; background: #00BFFF; border-radius: 50%; display: grid; place-items: center; cursor: pointer; }
#btnmain:hover { background: orange; }
#btnplay { position: absolute; left: 8px; width: 16px; height: 16px; background: #00BFFF; clip-path: polygon(0 0, 0% 100%, 100% 50%); }
#btnpause { position: absolute; width: 2px; height: 20px; border-style: solid; border-width: 0px 4px; border-color: transparent #bbb; display: none; }
#dur, #cur { font: normal 14px sans-serif; bottom: 14px; color: #eee; }
#dur:hover, #cur:hover, #lrc:hover { color: tomato; }
#cur { left: 5px ; }
#dur { right: 5px; }
</style>
<div id="papa">
<div id="mplayer">
<span id="lrc">lrc歌词</span>
<span id="prog"></span>
<span id="btnmain">
<span id="btnplay"></span>
<span id="btnpause"></span>
</span>
<span id="dur">00:00</span>
<span id="cur">00:00</span>
</div>
</div>
<script>
let lrcAr = [
['00.00','阖眸烟云-东篱'],
['3.98','作词 : 知月倾城'],
['5.88','作曲 : 舜禹'],
['27.31','我来时烟树花落故道'],
['32.71','云霞避处隐现仙宴谈笑'],
['38.23','烟与云追寻拢羽袖角'],
['43.66','沉淀我于亘古破晓'],
['49.62','我居时群芳频催华韶'],
['54.98','落英残垣蜿蜒云水迢遥'],
['61.11','风露间远望满目寂寥'],
['69.78','方知我仍年少'],
['75.96','岁月负我情衷'],
['80.13','羽化我曾摸索的每一双眼眸'],
['87.64','隔烟云千重纵容着我'],
['92.93','徒劳的挽留'],
['97.65','岁月窃我皓首'],
['101.78','懵懂我铭记的恩仇'],
['106.05','最后这烟云还与我'],
['113.82','惘然如旧'],
['147.96','我曾撷十方烟笼桃夭'],
['153.34','云笔涛墨洇作隔世笙箫'],
['158.90','烟与云追寻炊烟小桥'],
['164.42','遗落我于春寒料峭'],
['170.37','迷途中蜃楼更迭尘嚣'],
['176.01','陷我蹒跚行与曦色浩渺'],
['181.99','天海间流光划破衣袍'],
['190.60','泣我仍未苍老'],
['196.16','岁月负我情衷'],
['200.85','羽化我曾摸索的每一双眼眸'],
['208.30','隔烟云千重纵容着我'],
['213.70','徒劳的挽留'],
['218.42','岁月窃我皓首'],
['222.76','懵懂我铭记的恩仇'],
['226.69','最后这烟云还与我'],
['234.37','惘然如旧']
];
let aud = new Audio();
aud.src = 'https://music.163.com/song/media/outer/url?id=31062971.mp3';
aud.autoplay = true;
aud.loop = true;
btnmain.onclick = () => aud.paused ? aud.play() : aud.pause();
prog.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
aud.addEventListener('pause', () => btnstate());
aud.addEventListener('play',() => btnstate());
aud.addEventListener('timeupdate', () => {
prog.style.backgroundSize = prog.offsetWidth * aud.currentTime / aud.duration + 'px 4px';
dur.innerText = toMin(aud.duration);
cur.innerText = toMin(aud.currentTime);
for(j=0; j<lrcAr.length; j++) {
if(aud.currentTime >= lrcAr) lrc.innerText = lrcAr;
}
});
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-31 17:31
@东篱闲人
{:4_187:} 古曲古典有韵味。。{:5_116:} 制作技术含量高！{:5_116:} 图片选的也意境。。。。{:5_112:} 敬加加。。。{:4_176:} 东篱闲人 发表于 2022-8-31 18:04
来啦，老兄收礼开森！ 东篱闲人 发表于 2022-8-31 18:05
古曲古典有韵味。。
我估计你会喜欢的。 东篱闲人 发表于 2022-8-31 18:05
制作技术含量高！
与你比还差得远哈。 加林森 发表于 2022-8-31 18:06
来啦，老兄收礼开森！
有加加这样的好朋友，必须开心。。。。{:5_112:} 加林森 发表于 2022-8-31 18:07
与你比还差得远哈。
别瞎谦虚。。。。{:5_158:} 东篱闲人 发表于 2022-8-31 18:07
有加加这样的好朋友，必须开心。。。。
好的好的。{:5_108:} 东篱闲人 发表于 2022-8-31 18:08
别瞎谦虚。。。。
我还有好多不太清楚的，以后我会向你请教的。 东篱闲人 发表于 2022-8-31 18:06
图片选的也意境。。。。
是的。专门选的。 东篱闲人 发表于 2022-8-31 18:06
敬加加。。。
大家都喝：{:4_176:} 加林森 发表于 2022-8-31 18:21
大家都喝：
你多喝点。。。{:5_117:} 东篱闲人 发表于 2022-8-31 18:23
你多喝点。。。
喝多了容易打醉拳的。。。{:4_189:} 加林森 发表于 2022-8-31 18:24
喝多了容易打醉拳的。。。
一定漂亮！{:5_116:} 东篱闲人 发表于 2022-8-31 18:25
一定漂亮！
我又不是武松。。。。。{:4_203:}
页:
[1]
2