把根留住-童安格（学习老黑“游戏人间”制作）
本帖最后由 加林森 于 2022-8-31 11:34 编辑 <br /><br /><style>#papa { left: -214px; width: 1024px; height: 677px; background: gray url('https://pic.imgdb.cn/item/630ec94616f2c2beb175aad9.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% - 150px); 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: #FFD700; 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: #fff; border-radius: 50%; display: grid; place-items: center; cursor: pointer; }
#btnmain:hover { background: orange; }
#btnplay { position: absolute; left: 8px; width: 16px; height: 16px; background: #bbb; 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.32','作词 : 黄庆元/童安格'],
['4.63','作曲 : 童安格'],
['36.28','多少脸孔茫然随波逐流'],
['45.10','他们在追寻什么'],
['52.27','为了生活人们四处奔波'],
['59.71','却在命运中交错'],
['66.86','多少岁月凝聚成这一刻'],
['74.01','期待着旧梦重圆'],
['81.19','万涓成水终究汇流成河'],
['88.34','像一首澎湃的歌'],
['95.80','一年过了一年'],
['98.72','啊一生只为这一天'],
['102.68','让血脉再相连'],
['109.85','擦干心中的血和泪痕'],
['117.33','留住我们的根'],
['153.24','多少岁月凝聚成这一刻'],
['160.43','期待着旧梦重圆'],
['167.59','万涓成水终究汇流成河'],
['174.74','像一首澎湃的歌'],
['182.07','一年过了一年'],
['185.10','啊一生只为这一天'],
['189.03','让血脉再相连'],
['196.34','擦干心中的血和泪痕'],
['202.61','留住我们的根'],
['211.15','一年过了一年'],
['213.68','啊一生只为这一天'],
['218.07','让血脉再相连'],
['225.17','擦干心中的血和泪痕'],
['232.47','留住我们的根']
];
let aud = new Audio();
aud.src = 'https://music.163.com/song/media/outer/url?id=150904.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>
@马黑黑 学习制作了一个出来。老黑帮着看看。谢谢！{:4_190:} 队长有一个精美作品问世{:4_199:} 马黑黑 发表于 2022-8-31 12:19
队长有一个精美作品问世
谢谢老黑支持！中午好！{:4_190:} 黑黑的最新播放器版式，队长学得真快{:4_187:} 制作很漂亮，给队长点赞{:4_199:} 红影 发表于 2022-8-31 12:31
黑黑的最新播放器版式，队长学得真快
没事干跟到学。 红影 发表于 2022-8-31 12:31
制作很漂亮，给队长点赞
谢谢啦。中午好！ 美呀 上海朝阳 发表于 2022-8-31 12:44
美呀
队长做帖速度一流、质量一流 加林森 发表于 2022-8-31 12:39
没事干跟到学。
这个图图配得不错，制作很赞{:4_187:} 上海朝阳 发表于 2022-8-31 12:44
美呀
谢谢！ 红影 发表于 2022-8-31 13:23
这个图图配得不错，制作很赞
我换了三张图片的。 这个好看好听。。赞了{:4_204:} 白开水 发表于 2022-8-31 16:39
这个好看好听。。赞了
谢谢水水！{:4_204:} 这个好做不？俺也想整一个{:4_173:} 白开水 发表于 2022-8-31 16:42
这个好做不？俺也想整一个
好做的。去制作吧。 加林森 发表于 2022-8-31 16:43
好做的。去制作吧。
得先学习呀。。{:4_173:} 加加睿智，重要的东西一定要留住！{:5_112:} 白开水 发表于 2022-8-31 16:44
得先学习呀。。
你去看老黑发的帖吧。
页:
[1]
2