绿叶清舟 发表于 2022-9-15 21:16

美丽笨女人


<style>
/* 界面及音乐控制 */
.mama { left: -250px; width: 1100px; height: 700px; background: #eee url('https://pic.imgdb.cn/item/632321c616f2c2beb174cffb.jpg') no-repeat; position: relative; }
.meter { position: absolute;left: 400px; top: 170px; transform: rotate(-90deg); cursor: pointer; }
/* 歌词同步 */
#lrcDiv { position: absolute; right: 0;top: 60px; width: 10px; height: 108px; overflow: hidden; background: transparent linear-gradient(rgba(255,255,255,.35), rgba(255,255,255,.45)); }
#lrcDiv ul, lrcli { margin: 0; padding: 0;}
#lrcUl { position: absolute; top: 100; }
#lrcUl li { height: 24px; padding: 6px 0; font: normal 20px / 24px sans-serif; color: lightseagreen; text-shadow: 1px 1px 1px #333; list-style-type: none; }
</style>

<div class="mama">
      <div id="lrcDiv"><ul id="lrcUl"></ul></div>
      <meter class="meter" min="0" max="100" low="33" high="66" optimum="80" value="0"></meter>
</div>
<audio class="aud" src="http://music.163.com/song/media/outer/url?id=255497.mp3" autoplay="autoplay" loop="loop"></audio>

<script>
//元素句柄
let aud = document.querySelector('.aud'),
      meter = document.querySelector('.meter'),
      lrcUl = document.getElementById('lrcUl');
//lrc歌词
let lrcAr=[

];
//lrc时间信息转为秒
let toSec = (lrcTime) => {
      let tmpAr = lrcTime.split(':');
      lrcTime = tmpAr * 60 + parseInt(tmpAr);
      return lrcTime;
}
//处理lrc歌词数组：时间转换成秒、歌词放入li标签
for(j=0; j<lrcAr.length; j++){
      lrcAr = toSec(lrcAr);
      lrcUl.innerHTML += '<li id="li' + lrcAr + '">' + lrcAr + '</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){
                        if(j > 0){
                              let idxLast = lrcAr;
                              document.getElementById('li' + idxLast).style.color = 'lightseagreen';
                              lrcUl.style.top ='-' + (j * 36 - 36) + 'px'; //乘减依据: li高度
                        }
                        let idx = lrcAr;
                        document.getElementById('li' + idx).style.color = 'lightgreen';
                }
      }
})
// 播放结束重置歌词样式
aud.addEventListener('ended', () => {
      document.getElementById("li" + lrcAr).style.color = 'lightseagreen';
      lrcUl.style.top = 0;
})
//音乐控制
meter.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

马黑黑 发表于 2022-9-15 21:47

看着挺好，一点都不笨

绿叶清舟 发表于 2022-9-15 21:58

马黑黑 发表于 2022-9-15 21:47
看着挺好，一点都不笨

那就是不够美丽了{:4_189:}

红影 发表于 2022-9-15 21:58

这么多漂亮的花朵，漂亮{:4_187:}

红芍药 发表于 2022-9-15 22:06

清舟做得漂亮。{:4_199:}{:4_199:}

马黑黑 发表于 2022-9-15 22:26

绿叶清舟 发表于 2022-9-15 21:58
那就是不够美丽了

美丽与聪明并存

梦缘 发表于 2022-9-16 08:44

美丽的美人，感谢分享！{:4_187:}

加林森 发表于 2022-9-16 10:27

那么大的眼睛盯着谁都会让怕的。{:4_189:}

小九 发表于 2022-9-16 11:42

图图和歌完美融合，美，有味道{:4_187:}
页: [1]
查看完整版本: 美丽笨女人