|
|

楼主 |
发表于 2022-6-16 13:09
|
显示全部楼层
完整帖子:有注释- <style>
- /* 帖子外层 */
- .outer {
- left: -214px; /* 水平定位*/
- width: 1024px; /* 帖子宽度 */
- height: 577px; /* 帖子高度 */
- background: #ccc url('/data/attachment/forum/202206/16/130423gisx9ksrr59zk9x6.jpg') no-repeat; /* 帖子背景 */
- box-shadow: 0 4px 18px #000; /* 盒子阴影 */
- position: relative; /* 重要 帖子定位依赖 */
- }
- /* 歌词同步显示框 */
- .lrcbox {
- transform: translate(20px, 20px); /* 定位 */
- font: bold 1em sans-serif; /* 文本 */
- color: #fff; /* 字体颜色 */
- text-shadow: 1px 1px 2px #000; /* 文本阴影 */
- background: black linear-gradient(transparent,lightgreen); /* 盒子背景*/
- border-radius: 100% 0; /* 盒子边框 */
- cursor: pointer; /* 手型指针 */
- position: absolute; /* 关键 歌词显示框依赖于此 */
- }
- </style>
- <div class="outer">
- <div class="lrcbox">
- <p id="geci" style="padding: 0;margin: 4px 0">Loading ...</p>
- <meter id="meter" value="0" min="0" max="100" low="33" high="66" optimum="70"></meter>
- </div>
- </div>
- <audio id="aud" src="https://music.163.com/song/media/outer/url?id=252786.mp3" autoplay="autoplay" loop="loop"></audio>
- <script>
- //盒子句柄
- let lrcbox = document.querySelector('.lrcbox'),
- geci = document.querySelector('#geci'),
- aud = document.querySelector('#aud'),
- meter = document.querySelector('#meter');
- let prog = (tt, cc) => 100 * cc / tt;//计算播放进度
- //歌词数组
- let lrcAr = [
- ['0.20','作词 : 高地'],
- ['1.35','作曲 : 高地'],
- ['1.50','演唱 : 侃侃'],
- ['26.56','滴答滴答滴答滴答'],
- ['32.62','时针它不停在转动'],
- ['38.38','滴答滴答滴答滴答'],
- ['44.29','小雨它拍打着水花'],
- ['50.13','滴答滴答滴答滴答'],
- ['56.01','是不是还会牵挂他'],
- ['61.87','滴答滴答滴答滴答'],
- ['67.78','有几滴眼泪已落下'],
- ['76.77','滴答滴答滴答滴答'],
- ['82.31','寂寞的夜和谁说话'],
- ['88.15','滴答滴答滴答滴答'],
- ['93.98','伤心的泪儿谁来擦'],
- ['99.94','滴答滴答滴答滴答'],
- ['105.85','整理好心情再出发'],
- ['111.68','滴答滴答滴答滴答'],
- ['117.42','还会有人把你牵挂'],
- ['149.82','滴答滴答滴答滴答'],
- ['155.53','寂寞的夜和谁说话'],
- ['161.45','滴答滴答滴答滴答'],
- ['167.10','伤心的泪儿谁来擦'],
- ['173.11','嘀嗒嘀嗒嘀嗒嘀嗒'],
- ['179.01','整理好心情再出发'],
- ['184.81','嘀嗒嘀嗒嘀嗒嘀嗒'],
- ['190.60','还会有人把你牵挂']
- ];
- //歌词框单击事件
- lrcbox.onclick = () => aud.paused ? aud.play() : aud.pause();
- //audio进度监听事件
- aud.addEventListener('timeupdate', () => {
- meter.value = prog(aud.duration, aud.currentTime);
- let tt = aud.currentTime;
- for(j=0; j<lrcAr.length; j++){
- if(tt >= lrcAr[j][0]){
- geci.innerHTML = lrcAr[j][1];
- }
- }
- })
- </script>
复制代码
代码:
|
评分
-
| 参与人数 1 | 威望 +50 |
金钱 +100 |
经验 +50 |
收起
理由
|
小辣椒
| + 50 |
+ 100 |
+ 50 |
赞一个! |
查看全部评分
|