醉美水芙蓉 发表于 2022-6-5 20:57

惜别的海岸　　大哲

本帖最后由 醉美水芙蓉 于 2022-6-5 22:06 编辑 <br /><br /><div class="t_fsz">
<table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_1596011">
<style>
/* 界面及音乐控制 */
.mama { left: -339.5px; width: 1275px; height: 817px; background: #eee url('https://s1.ax1x.com/2022/06/05/XwK10I.jpg') no-repeat; position: relative; }
.goose { position: absolute; bottom: 30px; width: 200px; cursor: pointer; }
.meter { position: absolute; left: 50%; bottom: 140px; transform: rotate(-15deg); cursor: pointer; }
/* 歌词同步 */
#lrcDiv { left: 40%; top: 30%; width: 340px; height: 60px; overflow: hidden; position: absolute; padding: 8px; }
#lrcDiv ul, lrcli { margin: 0; padding: 0;}
#lrcUl { position: absolute; top: 0; }
#lrcUl li { height: 24px; font: normal 20px / 24px sans-serif; color: #64b4d5; text-shadow: 1px 1px 1px #333; list-style-type: none; }
#myplayer { outline: none; list-style-type: none; }
</style>

<div class="mama">
        <div id="lrcDiv"><ul id="lrcUl"></ul></div>
        <img class="goose" src="https://638183.freep.cn/638183/t22/51/goose.gi" alt="" />
        <meter class="meter" min="0" max="100" low="33" high="66" optimum="80" value="0"></meter>
</div>
<audio class="aud" src="https://www.qqmc.com/up/kwlink.php?id=67430789&.mp3" autoplay="autoplay" loop="loop"></audio>

<script>
//元素句柄
let aud = document.querySelector('.aud'),
        meter = document.querySelector('.meter'),
        goose = document.querySelector('.goose'),
        lrcUl = document.getElementById('lrcUl');
//lrc歌词
let lrcAr=[
['00:01','惜别的海岸　　大哲'],
['00:28','惜别的海岸(国语版) - 大哲 '],
['00:62','作词：董加铭'],
['00:87','作曲：董加铭'],                              
['00:01.09','宣发：刘芳'],   
['00:01.29','出品人：潘鸿业'],   
['00:01.59','OP：金翼龙唱片'],   
['00:12.26','LRC编辑：醉美水芙蓉'],   
['00:26.39','苦涩的海风阵阵吹送'],   
['00:30.89','海面一片朦胧何处有你影踪'],   
['00:37.18','远处汽笛声声夹着海浪声'],   
['00:41.09','催老我美丽的人生'],   
['00:47.41','想起过去的岁月里'],   
['00:50.14','在这长久的海岸上'],   
['00:52.09','和你朝朝暮暮看日落又日升'],   
['00:59.07','虽然你已不在我身边'],   
['01:04.65','对你的情意永在我心田'],   
['01:09.26','此情此景'],   
['01:11.99','旧日的爱'],   
['01:14.89','只有挥手说再见'],   
['01:32.21','苦涩的海风阵阵吹送'],   
['01:37.04','海面一片朦胧何处有你影踪'],   
['01:43.22','远处汽笛声声夹着海浪声'],   
['01:48.99','催老我美丽的人生'],   
['01:53.53','想起过去的岁月里'],   
['01:56.42','在这长久的海岸上'],   
['01:59.99','和你朝朝暮暮看日落又日升'],   
['02:05.23','虽然你已不在我身边'],   
['02:10.83','对你的情意永在我心田'],   
['02:15.56','此情此景'],   
['02:18.02','旧日的爱'],   
['02:21.99','只有挥手说再见'],   
['02:49.00','想起过去的岁月里'],   
['02:51.59','在这长久的海岸上'],   
['02:54.26','和你朝朝暮暮看日落又日升'],   
['03:00.23','虽然你已不在我身边'],   
['03:06.28','对你的情意永在我心田'],   
['03:10.63','此情此景'],   
['03:13.04','旧日的爱'],   
['03:16.37','只有挥手说再见'],   
];
//处理lrc歌词数组：时间转换成秒、歌词放入li标签
for(j=0; j<lrcAr.length; j++){
        lrcAr = toSec(lrcAr);
        lrcUl.innerHTML += "<li id='li" + lrcAr + "'>" + lrcAr + "</li>";
}
//lrc时间信息转为秒
function toSec(lrcTime) {
        let tmpAr = lrcTime.split(':');
        lrcTime = tmpAr * 60 + parseInt(tmpAr);
        return lrcTime;
}
aud.addEventListener('timeupdate', () => {
        let prog = 100 * aud.currentTime / aud.duration;
        goose.style.transform = 'translate(' + prog * 11 + 'px)';
        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 = "#64b4d5";
                                lrcUl.style.top ="-" + (j * 24 - 24) + "px"; //乘减依据: 行高设定
                        }
                        let idx = lrcAr;
                        document.getElementById("li" + idx).style.color = "#fff";
                }
        }
});
// 播放结束重置歌词样式
aud.onended = function() {
        document.getElementById("li" + lrcAr).style.color = "#64b4d5";
        lrcUl.style.top = 0;
        this.play();
}
//音乐控制
meter.onclick = goose.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>
</td></tr></table>

小辣椒 发表于 2022-6-5 21:02

和队长第一次发的那个一样，按钮是斜的，毛玻璃效果没有的那种
{:4_199:}

醉美水芙蓉 发表于 2022-6-5 21:17

小辣椒 发表于 2022-6-5 21:02
和队长第一次发的那个一样，按钮是斜的，毛玻璃效果没有的那种

小辣椒晚上好！还在学习中！

小辣椒 发表于 2022-6-5 21:17

醉美水芙蓉 发表于 2022-6-5 21:17
小辣椒晚上好！还在学习中！

学习很快呢{:4_187:}

马黑黑 发表于 2022-6-5 21:20

完美

醉美水芙蓉 发表于 2022-6-5 21:21

小辣椒 发表于 2022-6-5 21:17
学习很快呢

学了半天呢，太难了，还有好多不会呢？

醉美水芙蓉 发表于 2022-6-5 21:23

马黑黑 发表于 2022-6-5 21:20
完美

只能说将就！还有不懂呢？

马黑黑 发表于 2022-6-5 21:26

醉美水芙蓉 发表于 2022-6-5 21:23
只能说将就！还有不懂呢？

慢慢都会懂得

小辣椒 发表于 2022-6-5 21:31

醉美水芙蓉 发表于 2022-6-5 21:21
学了半天呢，太难了，还有好多不会呢？

这个歌词还是可以再上去一点，不要被界面的山挡住

醉美水芙蓉 发表于 2022-6-5 21:38

马黑黑 发表于 2022-6-5 21:20
完美

黑黑老师，哪个是移动歌词的，我想把歌词放在空白地方！

马黑黑 发表于 2022-6-5 21:53

醉美水芙蓉 发表于 2022-6-5 21:38
黑黑老师，哪个是移动歌词的，我想把歌词放在空白地方！

#lrcDiv 选择器是歌词主面板

醉美水芙蓉 发表于 2022-6-5 22:00

马黑黑 发表于 2022-6-5 21:53
#lrcDiv 选择器是歌词主面板

OK!非常感谢黑黑老师指导！

醉美水芙蓉 发表于 2022-6-5 22:01

小辣椒 发表于 2022-6-5 21:31
这个歌词还是可以再上去一点，不要被界面的山挡住

谢谢小辣椒精彩点评！已改好！

马黑黑 发表于 2022-6-5 22:12

醉美水芙蓉 发表于 2022-6-5 22:00
OK!非常感谢黑黑老师指导！

不客气

加林森 发表于 2022-6-5 22:14

挺不错的

红影 发表于 2022-6-5 22:44

做得很成功，给水芙蓉点赞{:4_204:}

醉美水芙蓉 发表于 2022-6-5 23:03

加林森 发表于 2022-6-5 22:14
挺不错的

谢谢队长鼓励！

醉美水芙蓉 发表于 2022-6-5 23:03

红影 发表于 2022-6-5 22:44
做得很成功，给水芙蓉点赞

谢谢红影美女，向你学习了！

加林森 发表于 2022-6-5 23:17

醉美水芙蓉 发表于 2022-6-5 23:03
谢谢队长鼓励！

不客气的
页: [1]
查看完整版本: 惜别的海岸　　大哲