去看了一下，两张图图的色彩有些接近，感受不出滤镜的效果呢。歌曲很好听
现在我又换了另外一种，你再看看。
<style>
/* 界面及音乐控制 */
.mama { left: -339.5px; width: 1275px; height: 717px; background: #eee url('https://pic.imgdb.cn/item/629c4b240947543129960add.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: 50%; top: 50%; 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://pic.imgdb.cn/item/6247e3c027f86abb2a56f17a.gif" alt="" />
<meter class="meter" min="0" max="100" low="33" high="66" optimum="80" value="0"></meter>
</div>
<audio class="aud" src="http://www.kumeiwp.com/sub/filestores/2022/01/31/eeb6c41d26bae2b2f32fc06bde0ff37c.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=[
['ti:','夜空中最亮的星'],
['ar:','逃跑计划'],
['al:','戴羽彤专辑'],
['by:','毛川/李赤'],
['00:08.40','夜空中最亮的星-戴羽彤'],
['00:09.90','词：逃跑计划'],
['00:10.87','曲：逃跑计划'],
['00:11.91','LRC制作：加林森'],
['00:13.13','夜空中最亮的星 能否听清'],
['00:28.28','那仰望的人 心底的孤独和叹息'],
['00:37.35','夜空中最亮的星 能否记起'],
['00:45.96','曾与我同行 消失在风里的身影'],
['00:53.98','我祈祷拥有一颗透明的心灵'],
['00:59.12','和会流泪的眼睛'],
['01:04.12','给我再去相信的勇气'],
['01:07.78','越过谎言去拥抱你'],
['01:12.46','每当我找不到存在的意义'],
['01:16.74','每当我迷失在黑夜里'],
['01:21.55','夜空中最亮的星'],
['01:24.99','请指引我靠近你'],
['01:28.90','夜空中最亮的星 是否知道'],
['01:48.52','曾与我同行的身影 如今在哪里'],
['01:56.88','夜空中最亮的星 是否在意'],
['02:06.59','是等太阳升起 还是意外先来临'],
['02:14.88','我宁愿所有痛苦都留在心里'],
['02:19.60','也不愿忘记你的眼睛'],
['02:24.77','给我再去相信的勇气'],
['02:28.91','越过谎言去拥抱你'],
['02:33.32','每当我找不到存在的意义'],
['02:37.62','每当我迷失在黑夜里'],
['02:44.18','夜空中最亮的星 请照亮我前行'],
['03:09.01','我祈祷拥有一颗透明的心灵'],
['03:13.91','和会流泪的眼睛'],
['03:18.86','给我再去相信的勇气'],
['03:22.80','越过谎言去拥抱你'],
['03:26.58','每当我找不到存在的意义'],
['03:31.29','每当我迷失在黑夜里'],
['03:37.42','夜空中最亮的星'],
['03:40.72','请照亮我前行'],
['03:45.63','夜空中最亮的星 能否听清'],
['03:54.49','那仰望的人 心底的孤独和叹息'],
['03:58.54','谢谢欣赏']
];
//处理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>
本帖最后由 加林森 于 2022-4-12 23:44 编辑
@马黑黑 有变化变化了。在来看看； 加林森 发表于 2022-4-12 21:20
你等一下，我换另外一种上来你就明白了。
不是明白，是说效果是不是更明显。 队长，这句，
@keyframes roll { to {transform: rotate(360deg); } }
把 360deg 改为 -360deg 就是逆时针的 马黑黑 发表于 2022-4-13 19:48
队长，这句，
@keyframes roll { to {transform: rotate(360deg); } }
好的，我去修改一下看效果。 红影 发表于 2022-4-13 19:45
不是明白，是说效果是不是更明显。
是的是的。 加林森 发表于 2022-4-13 21:08
好的，我去修改一下看效果。
嗯嗯 马黑黑 发表于 2022-4-13 21:09
嗯嗯
修改好了，挺好玩的。 加林森 发表于 2022-4-13 21:12
修改好了，挺好玩的。
就是的 马黑黑 发表于 2022-4-13 21:13
就是的
谢谢老黑！{:4_190:}
页:
1
[2]