|
|

楼主 |
发表于 2022-6-13 13:17
|
显示全部楼层
【附件三】歌词同步帖子模板
- <style>
- /*帖子外层盒子*/
- .mama { position: relative; margin: auto; width: 1000px; height: 600px; background: transparent linear-gradient(to right bottom, darkgreen, snow); box-shadow: 2px 2px 2px #444; }
- /*播放器外层盒子*/
- .lrcWrap { position: absolute; top: 10px; left: 10px; padding: 20px; width: fit-content; height: fit-content; text-align: center; background: transparent linear-gradient(rgba(255,255,255,.25), rgba(255,255,255,.15)); box-shadow: 2px 2px 4px #eee; display: flex; flex-direction: column;align-items: center; }
- /*播放控制外层盒子*/
- .meterWrap { position: relative; display: flex; align-items: center; width: fit-content; height: 50px; }
- /*播放按钮*/
- .playbtn { width: 10px; height: 20px; background: #eee; clip-path: polygon(0 0, 0% 100%, 100% 50%); cursor: pointer; }
- /*播放按钮鼠标滑过*/
- .playbtn:hover { background: red; }
- /*暂停按钮*/
- .pausebtn { width: 2px; height: 20px; border-style: solid; border-width: 0px 4px; border-color: transparent #eee; display: none; cursor: pointer; }
- /*暂停按钮鼠标滑过*/
- .pausebtn:hover { border-color: transparent red; }
- /*进度条*/
- .meter { position: relative; width:300px; height: 11px; cursor: pointer; background: linear-gradient(transparent 5px, snow 6px,transparent 0); }
- /*进度滑块*/
- .slider { display: block; position: absolute; width: 4px; height: 100%; background: white; }
- /*歌词面板外层盒子*/
- .lrcWrap p { margin: 0 0 12px 0; padding: 0px; color: #ccc; font: normal 1.2em sans-serif; text-shadow: 1px 1px 1px #333; }
- /*歌词区域限制层*/
- .lrcBox { margin: 0; padding: 0; width: 400px; height: 72px; overflow: hidden; user-select: none; position: relative; }
- /*歌词ul标签*/
- .lrcUl { position: relative; top: 0; margin: 0; padding: 0; }
- /*歌词li标签*/
- .lrcUl li { margin: 0; padding: 0; height: 24px; font: normal 18px / 24px sans-serif; color: gray; text-shadow: 1px 1px 1px black; list-style-type: none; }
- </style>
- <div class="mama">
- <!-- 播放器开始 -->
- <div class="lrcWrap">
- <p>帖子标题</p>
- <div class="lrcBox"><ul class="lrcUl"></ul></div>
- <div class="meterWrap">
- <div class="playbtn"></div>
- <div class="pausebtn"></div>
- <div class="meter"><span class="slider"></span></div>
- </div>
- <!-- 播放器结束 -->
- </div>
- </div>
- <audio class="aud" src="音频地址" autoplay="autoplay" loop="loop"></audio>
- <script>
- //N多盒子句柄
- let aud = document.querySelector('.aud'),
- playbtn = document.querySelector('.playbtn'),
- pausebtn = document.querySelector('.pausebtn'),
- meter = document.querySelector('.meter'),
- slider = document.querySelector('.slider'),
- lrcUl = document.querySelector('.lrcUl');
- let slip = 0; //误差修正
- //lrc歌词数组
- let lrcAr = [
- ['0.00','第一句'],
- ['3.84','第二句'],
- //...第N句
- ['331.05','最后一句']
- ];
- //将歌词写入li标签
- for(j=0; j<lrcAr.length; j++){
- lrcUl.innerHTML += '<li id="li' + lrcAr[j][0] + '" style="list-style-type: none">' + lrcAr[j][1] + '</li>';
- }
- //监听进度
- aud.addEventListener('timeupdate', () => {
- let prog = (meter.clientWidth - slider.clientWidth) * aud.currentTime / aud.duration;
- slider.style.transform = 'translate(' + prog + 'px)';
- let tt = aud.currentTime;
- for(j=0; j<lrcAr.length; j++){
- if(tt >= lrcAr[j][0] - slip){
- if(j > 0){
- let idxLast = lrcAr[j-1][0];
- document.getElementById('li' + idxLast).style.color = 'gray';
- lrcUl.style.top = '-' + (j * 24 - 24) + 'px';
- }
- let idx = lrcAr[j][0];
- document.getElementById('li' + idx).style.color = 'ghostwhite';
- }
- }
- })
- //监听结束事件
- aud.addEventListener('ended', () => {
- document.getElementById("li" + lrcAr[lrcAr.length-1][0]).style.color = 'gray';
- lrcUl.style.top = 0;
- })
- //监听暂停与播放
- aud.addEventListener('pause', () => btnstate(1));
- aud.addEventListener('play',() => btnstate(0));
- //进度条点击事件
- meter.onclick = (e) => {
- e = e || event;
- aud.currentTime = (e.clientX - offset(meter,"left")) * aud.duration / meter.clientWidth;
- }
- //暂停与播放按钮点击事件
- pausebtn.onclick = () => { aud.pause(); btnstate(1); }
- playbtn.onclick = () => { aud.play(); btnstate(0); }
- //获取进度条偏移总量
- let offset = (obj,direction) => {
- let offsetDir = "offset" + direction[0].toUpperCase() + direction.substring(1);
- let realNum = obj[offsetDir];
- let positionParent = obj.offsetParent;
- while(positionParent != null){
- realNum += positionParent[offsetDir];
- positionParent = positionParent.offsetParent;
- }
- return realNum;
- }
- //按钮状态
- let btnstate = (paused) => {
- paused == 1 ? (playbtn.style.display = 'block', pausebtn.style.display = 'none') : (playbtn.style.display = 'none', pausebtn.style.display = 'block');
- }
- //初始化按钮状态
- aud.paused ? btnstate(1) : btnstate(0);
- </script>
复制代码
|
评分
-
| 参与人数 2 | 威望 +80 |
金钱 +160 |
经验 +80 |
收起
理由
|
小辣椒
| + 50 |
+ 100 |
+ 50 |
赞一个! |
加林森
| + 30 |
+ 60 |
+ 30 |
很给力! |
查看全部评分
|