|
|
请马上登录,朋友们都在花潮里等着你哦:)
您需要 登录 才可以下载或查看,没有账号?立即注册
x
HTML代码结构中,歌词显示板加入一个div,负责外观表现,即毛玻璃效果,同时能令内里的歌词显示板仅专注于规范尺寸从而更容易控制:
- <style>
- /* 界面及音乐控制 */
- .mama { left: -202px; width: 1000px; height: 664px; background: #eee url('https://638183.freep.cn/638183/Pic/2022/9.jpg') no-repeat; position: relative; }
- .meter { position: absolute; left: 50%; bottom: 215px; transform: rotate(-90deg); cursor: pointer; }
- /* 歌词同步 */
- #lrcDiv_outer { position: absolute; width: fit-content; height: fit-content; padding: 10px 14px; right: 10px; bottom: 160px; background: transparent linear-gradient(rgba(255,255,255,.35), rgba(255,255,255,.45)); }
- #lrcDiv_inner { width: 340px; height: 72px; padding: 0px; overflow: hidden; }
- #lrcUl { position: relative; top: 0; margin: 0; padding: 0; }
- #lrcUl li { margin: 0; padding: 0; height: 24px; font: normal 18px / 24px sans-serif; color: lightseagreen; text-shadow: 1px 1px 1px #333; list-style-type: none; }
- </style>
- <div class="mama">
- <div id="lrcDiv_outer">
- <div id="lrcDiv_inner"><ul id="lrcUl"></ul></div>
- </div>
- <meter class="meter" min="0" max="100" low="33" high="66" optimum="80" value="0"></meter>
- </div>
- <audio class="aud" src="https://music.163.com/song/media/outer/url?id=30569502.mp3" autoplay="autoplay" loop="loop"></audio>
- <script>
- //元素句柄
- let aud = document.querySelector('.aud'),
- meter = document.querySelector('.meter'),
- lrcUl = document.getElementById('lrcUl');
- //lrc歌词
- let lrcAr=[
- ['0:02','歌名 : 愿'],
- ['0: 05','歌手 : 崔子格'],
- ['0:28','所属专辑 : 热门华语260'],
- ['0: 31','身如箭,血如焰,轮回一念。'],
- ['0:37','心无垢,思无邪,身陨谁怜。'],
- ['0:42','眉间一点朱砂艳,'],
- ['0: 47','灯花不负相见。'],
- ['0:53','红线连,素手牵,茫茫无言。'],
- ['0:58','梦几时,忆几时,天命难变。'],
- ['1:04','执伞并行前路远,'],
- ['1:09','莫忘旧日诺言。'],
- ['1:15','几世孤寂几重魂梦几度流年,'],
- ['1:21','终不过生死人间。'],
- ['1:27','谁的追寻远在天边,'],
- ['1:35','谁的约定犹在眼前,'],
- ['1:42','谁曾为你许下救赎誓言,'],
- ['1:49','谁的身躯化为云烟。'],
- ['2:10','谁的追寻远在天边,'],
- ['2:17','谁的约定犹在眼前,'],
- ['2:24','谁曾为你许下救赎誓言,'],
- ['2:31','谁的身躯化为云烟。'],
- ['2:38','待到行至天边,日落惊弦,'],
- ['2:45','惟愿以身为箭,在日光下长眠。'],
- ['3:00','--End--']
- ];
- //lrc时间信息转为秒
- let toSec = (lrcTime) => {
- let tmpAr = lrcTime.split(':');
- lrcTime = tmpAr[0] * 60 + parseInt(tmpAr[1]);
- return lrcTime;
- }
- //处理lrc歌词数组:时间转换成秒、歌词放入li标签
- for(j=0; j<lrcAr.length; j++){
- lrcAr[j][0] = toSec(lrcAr[j][0]);
- lrcUl.innerHTML += '<li id="li' + lrcAr[j][0] + '">' + lrcAr[j][1] + '</li>';
- }
- aud.addEventListener('timeupdate', () => {
- let prog = 100 * aud.currentTime / aud.duration;
- meter.value = prog;
- //歌词同步
- let tt = aud.currentTime;
- for(j=0; j<lrcAr.length; j++){
- if(tt > lrcAr[j][0]){
- if(j > 0){
- let idxLast = lrcAr[j-1][0];
- document.getElementById('li' + idxLast).style.color = 'lightseagreen';
- lrcUl.style.top ='-' + (j * 24 - 24) + 'px'; //乘减依据: li高度
- }
- let idx = lrcAr[j][0];
- document.getElementById('li' + idx).style.color = 'lightgreen';
- }
- }
- })
- // 播放结束重置歌词样式
- aud.addEventListener('ended', () => {
- document.getElementById("li" + lrcAr[lrcAr.length-1][0]).style.color = 'lightseagreen';
- lrcUl.style.top = 0;
- })
- //音乐控制
- meter.onclick = () => aud.paused ? aud.play() : aud.pause();
- </script>
复制代码
|
评分
-
| 参与人数 2 | 威望 +80 |
金钱 +160 |
经验 +80 |
收起
理由
|
加林森
| + 30 |
+ 60 |
+ 30 |
很给力! |
红影
| + 50 |
+ 100 |
+ 50 |
赞一个! |
查看全部评分
|