红影 发表于 2022-6-5 14:37

齐天大圣 TO 马黑黑

<style>
/* 界面及音乐控制 */
.mama { left: -339.5px; width: 1275px; height: 717px; background: #eee url('https://pic.imgdb.cn/item/629caa97094754312916b8af.gif') no-repeat center/cover; position: relative; }
.goose { position: absolute; left:200px;bottom: 40px; width: 167px; cursor: pointer; }
.meter { position: absolute; left: 40px; bottom: 240px; width: 220px; cursor: pointer; transform: rotate(-62deg);}
/* 歌词同步 */
#lrcDiv { left: 540px; top: 300px; 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: #ccff00; 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://pic.imgdb.cn/item/629c3f2d0947543129867224.png" alt="" />
        <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=1818566675.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=[
['0:01','齐天大圣'],
['0:12','TO 马黑黑'],
['0:27','地与天 天与烟 湮没幻灭'],
['0:30','什么风云日月什么鬼怪神仙'],
['0:34','蟠桃美酒 珍馐宴 一望无边'],
['00:37','好一个纸醉金迷花花世界'],
['00:40','是与非 错与对 目空一切'],
['00:43','我此行而来就要让你见识我是谁'],
['00:46','一脚踏破南天门'],
['00:47','打碎那凌霄宝殿'],
['00:49','一去不归 意已决'],
['00:51','我就是'],
['00:53','齐天大圣'],
['00:55','一个筋斗翻过十万八千'],
['00:57','齐天大圣'],
['00:58','一个闪念幻化瞬息万变'],
['00:59','齐天大圣'],
['01:00','一根如意棒打天塌地陷'],
['01:03','齐天大圣'],
['01:04','天生反骨 别对我讲你的规则'],
['01:07','我是从山上仙石里蹦出的一只石猴'],
['01:10','千百万年的日月精华全部都被我吸收'],
['01:13','无论谁在统治谁在威慑我都不会低头'],
['01:17','我就是——'],
['01:18','我是齐天大圣'],
['01:33','无论天有多高地有多厚'],
['01:38','黑暗来临与否'],
['01:41','我都不会低头'],
['01:47','齐天大圣'],
['01:50','一个筋斗翻过十万八千'],
['01:51','齐天大圣'],
['01:52','一个闪念幻化瞬息万变'],
['01:54','齐天大圣'],
['01:55','一根如意棒打天塌地陷'],
['01:57','齐天大圣'],
['01:58',' 天生反骨 别对我讲你的规则'],
['02:01','我无所畏惧 我敢与天下对立'],
['02:03','所有盖世武功 我都不以为奇'],
['02:07','这世界会不会由谎言堆砌'],
['02:09','会不会满是阴谋诡计'],
['02:11','我会不会改变它的规矩'],
['02:13','会不会把强权夷为废墟'],
['02:14','我的名字会不会被世人铭记'],
['02:17','我的名字就是——'],
['02:19','我是齐天大圣'],
['02:22','制作：红影 2022.6.5'],
['02:32','']


];
//处理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 * 8 + '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 = "#ccff00";
                                lrcUl.style.top ="-" + (j * 24 - 24) + "px"; //乘减依据: 行高设定
                        }
                        let idx = lrcAr;
                        document.getElementById("li" + idx).style.color = "#ffcc66";
                }
        }
});
// 播放结束重置歌词样式
aud.onended = function() {
        document.getElementById("li" + lrcAr).style.color = "#ccff00";
        lrcUl.style.top = 0;
        this.play();
}
//音乐控制
meter.onclick = goose.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

红影 发表于 2022-6-5 14:41

感谢黑黑的代码，套用一个送给你，祝你战天斗地，一往无前{:4_173:}@马黑黑

红影 发表于 2022-6-5 14:42

网上找到个动图，借用一下，倒是省得上传了，毕竟动图文件都比较大。

红影 发表于 2022-6-5 14:47

https://pic.imgdb.cn/item/629c516209475431299e3ad0.png

开始本来想用这个孙悟空的，后来还是觉得现在那个笑嘻嘻的萌萌的，更可爱{:4_173:}

红影 发表于 2022-6-5 14:51

这个歌词不知道为什么歌曲播放完在跳转到重新开始的地方有一段滞后，然后才跟上节奏？@马黑黑

加林森 发表于 2022-6-5 15:11

看不见图片呢？

加林森 发表于 2022-6-5 15:13

是同步的，就看见猴子了，背景没有看见！

四海八荒 发表于 2022-6-5 15:26

也许，人家想做白龙马的！

马黑黑 发表于 2022-6-5 16:05

红影 发表于 2022-6-5 14:41
感谢黑黑的代码，套用一个送给你，祝你战天斗地，一往无前@马黑黑

俺又不是战斗佛

加林森 发表于 2022-6-5 16:11

马黑黑 发表于 2022-6-5 16:05
俺又不是战斗佛

老黑能不能看见图片？

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

加林森 发表于 2022-6-5 16:11
老黑能不能看见图片？

图片打不开

加林森 发表于 2022-6-5 16:16

马黑黑 发表于 2022-6-5 16:12
图片打不开

嗯嗯

马黑黑 发表于 2022-6-5 16:29

加林森 发表于 2022-6-5 16:16
嗯嗯

单独去打开图片是可以的，在坛子里不显示

加林森 发表于 2022-6-5 16:32

马黑黑 发表于 2022-6-5 16:29
单独去打开图片是可以的，在坛子里不显示

就是啊，有点晕了。

马黑黑 发表于 2022-6-5 16:40

加林森 发表于 2022-6-5 16:32
就是啊，有点晕了。

好多云盘都是酱紫的吧

加林森 发表于 2022-6-5 16:50

马黑黑 发表于 2022-6-5 16:40
好多云盘都是酱紫的吧

明白的。{:5_103:}

梦油 发表于 2022-6-5 16:56

移动的孙悟空倒是挺可爱的。

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

亲爱的，我给你重新上传了背景图片，你这个有创新呢，按钮斜的现在这个加长效果特别好{:4_178:}

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

这个按钮当齐天大圣的金箍棒更加好{:4_170:}

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

小辣椒 发表于 2022-6-5 21:12
这个按钮当齐天大圣的金箍棒更加好

同感。不过，meter是金箍棒的发生地，更上一层
页: [1] 2
查看完整版本: 齐天大圣 TO 马黑黑