论坛 › 马黑黑教程专版 › 毛玻璃+range可控进度+歌词同步帖子模板

马黑黑 发表于 2022-6-22 21:16

毛玻璃+range可控进度+歌词同步帖子模板

<style>
.papa { margin: 0 auto; width: 1024px; height: 640px; background: rgba(0,0,0,.4) url('图片地址'); position: relative; }
.papa input { border: none; outline: none; opacity: .75; cursor: pointer; }
.papa p { margin: 0; padding: 0; }
.playbox { position: relative; left: 10px; top: 10px; padding: 10px; width: fit-content; font: normal 1em sans-serif; color: snow; background: rgba(255,255,255,.25); backdrop-filter: blur(2px); border-radius: 8px; overflow: hidden; box-shadow: 1px 2px 2px #000; }
#btnplay { width: 30px; height: 30px; border-radius: 50%; }
#btnplay:hover { background: #aaa; color: #ff0000; }
</style>

<div class="papa">
        <div class="playbox">
                <p id="geci">LRC Loading ... </p>
                <p style="display: flex; align-items: center; gap: 4px; margin-top: 10px;">
                        <input id="btnplay" type="button" value=">" />
                        <input id="slider" type="range" min="0" max="100" value="0" />
                        <span id="per">0:0 | 0:0</span>
                </p>
        </div>
        <audio id="aud" src="音频地址" autoplay="autoplay" loop="loop"></audio>
</div>

<script>

let slider = document.querySelector('#slider'),
        aud = document.querySelector('#aud'),
        per = document.querySelector('#per'),
        btnplay = document.querySelector('#btnplay'),
        geci = document.querySelector('#geci');
let slip = 0; //误差值
let lrcAr = [
        ['0.06','歌词1'],
        ['0.51','歌词2'],
        ['218.85','歌词n'],
];

slider.onmousedown = () => aud.pause();
slider.onchange = () => { aud.currentTime = slider.value * aud.duration / 100; aud.play(); }
btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('playing', () => btnplay.value = '||');
aud.addEventListener('pause', () => btnplay.value = '>');

aud.addEventListener('timeupdate', () => {
        let prog = 100 * aud.currentTime / aud.duration;
        slider.value = prog;
        per.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);
                for(j=0; j<lrcAr.length; j++){
                if(aud.currentTime >= lrcAr - slip){
                        geci.innerHTML = lrcAr;
                }
        }
});

let toMin = (sec) => {
        if(!sec) return '0:00';
        sec = parseInt(sec);
        return parseInt(sec / 60) + ':' +parseFloat(sec % 60).toString().padStart(2,'0');
}

</script>

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

说明：

一、毛玻璃是用 backdrop-filter 做的，Firefox 不支持，IE不支持；

二、播放器显示进度的同时还显示当前播放时间和总时间，格式为 0:00；

三、range可用拖动方式调整播放进度；

四、歌词面板可以自动伸缩，再也不担心歌词显示不齐。播放器可以自由定位，比如放右下：

right: 20px;
bottom: 20px;

放左下：

left: 20px;
bottom: 20px;

放右上：

right: 20px;
top: 20px;

樵歌 发表于 2022-6-23 08:10

先围观{:4_174:}

加林森 发表于 2022-6-23 08:22

马黑黑 发表于 2022-6-22 21:26
说明：

一、毛玻璃是用 backdrop-filter 做的，Firefox 不支持，IE不支持；


这个好。老黑辛苦啦！

红影 发表于 2022-6-23 09:43

这个有进度条，可以操作进度，毛玻璃的背景也很漂亮。黑黑真棒{:4_187:}

红影 发表于 2022-6-23 09:47

开始和暂停的播放按钮咋用符号了，我记得你专门做过那个按钮的{:4_173:}

马黑黑 发表于 2022-6-23 12:17

红影 发表于 2022-6-23 09:47
开始和暂停的播放按钮咋用符号了，我记得你专门做过那个按钮的

这是为了简洁

红影 发表于 2022-6-23 16:18

马黑黑 发表于 2022-6-23 12:17
这是为了简洁

嗯嗯，也不错{:4_187:}

马黑黑 发表于 2022-6-23 19:54

红影 发表于 2022-6-23 16:18
嗯嗯，也不错

这个是用标准字符，不会出现乱码等现象

红影 发表于 2022-6-24 14:01

马黑黑 发表于 2022-6-23 19:54
这个是用标准字符，不会出现乱码等现象

考虑很周全{:4_204:}

马黑黑 发表于 2022-6-24 19:13

红影 发表于 2022-6-24 14:01
考虑很周全

被逼的

红影 发表于 2022-6-24 21:07

马黑黑 发表于 2022-6-24 19:13
被逼的

能实现功能就好{:4_204:}

马黑黑 发表于 2022-6-24 21:08

红影 发表于 2022-6-24 21:07
能实现功能就好

对。变异的lrc，也需要能够解析

红影 发表于 2022-6-24 22:19

马黑黑 发表于 2022-6-24 21:08
对。变异的lrc，也需要能够解析

变异的可以不管，谁让它们变异呢{:4_173:}

马黑黑 发表于 2022-6-24 22:24

红影 发表于 2022-6-24 22:19
变异的可以不管，谁让它们变异呢

这不符合编程的精神。一般来说，只要是可以的，我们就会去兼容，不可以再说（比如IE，兼容它太麻烦了，所以大家都抛弃它）

红影 发表于 2022-6-25 10:06

马黑黑 发表于 2022-6-24 22:24
这不符合编程的精神。一般来说，只要是可以的，我们就会去兼容，不可以再说（比如IE，兼容它太麻烦了，所 ...

海纳百川的精神，为程序编写者们点赞{:4_199:}

马黑黑 发表于 2022-6-25 10:31

红影 发表于 2022-6-25 10:06
海纳百川的精神，为程序编写者们点赞

这是一种普遍的主张

红影 发表于 2022-6-25 20:14

马黑黑 发表于 2022-6-25 10:31
这是一种普遍的主张

这和别的专业不一样，别的专业都是能简单就简单{:4_173:}

马黑黑 发表于 2022-6-25 20:32

红影 发表于 2022-6-25 20:14
这和别的专业不一样，别的专业都是能简单就简单

编程也力求简洁，但该有的要有，能支持的尽量支持

红影 发表于 2022-6-26 08:36

马黑黑 发表于 2022-6-25 20:32
编程也力求简洁，但该有的要有，能支持的尽量支持

嗯，也就是说考虑要复杂，语句要简单，是这样的吧。

查看完整版本: 毛玻璃+range可控进度+歌词同步帖子模板