论坛 › 『唯美音画』 › 远走高飞----金志文 徐佳莹

宁静 发表于 2022-9-16 22:04

远走高飞----金志文 徐佳莹

<style>
.mama { left: -280px; width: 1400px; height:711px; top: 150px;background: #eee url('https://wj.zp68.com/lxx/yunhua/2022/06/07/1400X711.jpg') no-repeat; box-shadow: 2px 2px 2px #333; position: relative; }
.meter { position: absolute; left: 680px; top: 588px; width: 100px; transform: rotate(-90deg); cursor: pointer; }
.stone { position: absolute;left: 700px;top: 300px; right: 50px; width: 50px; height: 50px; background-color: rgba(255,255,255,.35); background-image: radial-gradient(rgba(255,255,255,.25),rgba(255,255,255,.65)); border-radius: 35% 65% 69% 31% / 53% 53% 47% 47%;box-shadow: inset 10px 10px 10px rgba(0,0,0,.05), 15px 25px 10px rgba(0,0,0,.1), 15px 20px 20px rgba(0,0,0,.05), inset -10px -10px 15px rgba(255,255,255,.9); }
#lrcDiv_outer { position: absolute; left: 730px; top: 550px; width: fit-content; height: fit-content;padding: 10px 14px; background: transparent linear-gradient(rgba(255,255,255,.25), rgba(255,255,255,.15)); box-shadow: 2px 2px 4px #2E63A5; border-radius: 6px; }
#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; }
#d1{ position: absolute; width: 436px; height: 82px; top: 80px; left: 150px;opacity: 0.85; }
#d2{ position: absolute; width: 75px; height: 28px; top: 270px; left: 670px;opacity: 0.95; }


</style>

<div class="mama">

<img id="d1" src="https://wj.zp68.com/lxx/yunhua/2022/06/07/002.gif" alt="" />
<img id="d2" src="https://wj.zp68.com/lxx/yunhua/2022/06/07/001.gif" alt="" />

        <div class="stone"></div>
        <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://wj.zp68.com/lxx/yunhua/2022/06/07/04.mp3" autoplay="autoplay" loop="loop"></audio>


<script>
let aud = document.querySelector('.aud'),
        meter = document.querySelector('.meter'),
        lrcUl = document.getElementById('lrcUl');

let lrcAr=[
['00:03.00','远走高飞'],
['00:06.94','歌手：金志文 徐佳莹'],
['00:12.08','帖赠：沉默'],
['00:18.46','我一路看过千山和万水'],
['00:22.78','我的脚踏遍天南和地北'],
['00:27.09','日晒或是风吹'],
['00:29.72','我都无所谓'],
['00:31.92','路边那朵蔷薇'],
['00:34.17','鲜红的纯粹'],
['00:36.36','关掉了手机管他谁是谁'],
['00:40.55','不要去理会是是与非非'],
['00:45.11','天亮走到天黑 从不觉疲惫'],
['00:49.68','黄昏中的堡垒 多颓废'],
['00:53.13','如果迎着风就飞'],
['00:57.57','俯瞰这世界有多美'],
['01:02.07','让烦恼都灰飞'],
['01:04.58','别去理会自我藉慰'],
['01:10.77','如果还有梦就追'],
['01:15.54','至少不会遗憾后悔'],
['01:20.03','迎着光勇敢追 远走高飞'],
['01:24.41','说走就走一回'],
['01:27.60','LRC编辑：宁静'],
['01:34.66','翻过了山坡又踏过了水'],
['01:39.11','跟心走别管东南和西北'],
['01:43.55','前行还是后退'],
['01:45.98','靠直觉发挥'],
['01:48.17','落日下的余晖'],
['01:50.48','有一点凄美'],
['01:52.60','拥挤的城市布满了虚伪'],
['01:56.91','何必去辩解是错或是对'],
['02:01.09','就让一切回归 童真的滋味'],
['02:06.04','那自由的感觉 不会累'],
['02:09.79','如果迎着风就飞'],
['02:13.92','俯瞰这世界有多美'],
['02:18.36','让烦恼都灰飞'],
['02:20.73','别去理会自我藉慰'],
['02:27.47','如果还有梦就追'],
['02:32.22','至少不会遗憾后悔'],
['02:36.78','迎着光勇敢追 远走高飞'],
['02:40.72','说走就走一回'],
['02:45.42','为沉默加油'],
['02:59.36','如果迎着风就飞'],
['03:03.56','俯瞰这世界有多美'],
['03:07.94','让烦恼都灰飞'],
['03:10.38','别去理会自我藉慰'],
['03:16.89','如果还有梦就追'],
['03:21.39','至少不会遗憾后悔'],
['03:25.92','迎着光勇敢追 远走高飞'],
['03:34.36','说走就走一回'],
['03:34.05','争取冲刺20000步'],
['03:47.63','谢谢大家欣赏']
];

let toSec = (lrcTime) => {
        let tmpAr = lrcTime.split(':');
        lrcTime = tmpAr * 60 + parseInt(tmpAr);
        return lrcTime;
}

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 = 'lightgreen';
                                lrcUl.style.top = '-' + (j * 24 - 24) + 'px';
                        }
                        let idx = lrcAr;
                        document.getElementById('li' + idx).style.color = 'gold';
                }
        }
})

aud.addEventListener('ended', () => {
        document.getElementById("li" + lrcAr).style.color = 'lightgreen';
        lrcUl.style.top = 0;
})

meter.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>
<br><br><br><br><br><br><br><br><br><br>

宁静 发表于 2022-9-16 22:06

这个播放器是列表边上的圆柱

宁静 发表于 2022-9-16 22:06

@沉默

祝一切安好{:10_402:}

宁静 发表于 2022-9-16 22:15

也是算老歌了，一起欣赏

小沫 发表于 2022-9-16 22:16

沙发卡位听歌

宁静 发表于 2022-9-16 22:18

小沫 发表于 2022-9-16 22:16
沙发卡位听歌

谢谢小沫欣赏{:10_401:}

小沫 发表于 2022-9-16 22:18

好漂亮，播放器做的很特别，宁静友情提醒，我还找了好几秒{:9001:}

宁静 发表于 2022-9-16 22:18

小沫 发表于 2022-9-16 22:18
好漂亮，播放器做的很特别，宁静友情提醒，我还找了好几秒

哈哈~~~这个播放器比较隐蔽

墨羽 发表于 2022-9-17 09:05

白色的圆柱红色的进度条，很漂亮的播放器！{:9001:}

沉默 发表于 2022-9-17 13:18

宁静 发表于 2022-9-16 22:06
@沉默

祝一切安好

来了，谢谢{:10_402:}

查看完整版本: 远走高飞----金志文 徐佳莹