|
|

楼主 |
发表于 2022-6-10 19:45
|
显示全部楼层
完整帖子代码:
- <style>
- .mama { position: relative; left: -202px; width: 1000px; height: 600px; background: #ccc url('/data/attachment/forum/202206/10/193911lsstrj9qs9s8tcet.jpg') no-repeat; box-shadow: 2px 2px 2px #444; }
- .lrcWrap { position: absolute; right: 10px; top: 10px; padding: 20px; width: fit-content; height: fit-content; text-align: center; background: rgba(20,20,20,.6) 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; }
- .btn { width: 24px; height: 24px; background: olive; color: #ccc; border: none; font-size: 14px; outline: none; cursor: pointer; }
- .btn:hover { color: 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: olive; }
- .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; }
- .lrcUl { position: relative; top: 0; margin: 0; padding: 0; }
- .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>Audio Player for HTML5</p>
- <div class="lrcBox"><ul class="lrcUl"></ul></div>
- <div class="meterWrap">
- <input class="btn" type="button" value="||" />
- <div class="meter"><span class="slider"></span></div>
- </div>
- </div>
- </div>
- <audio class="aud" src="https://music.163.com/song/media/outer/url?id=1432843317.mp3" autoplay="autoplay" loop="loop"></audio>
- <script>
- let aud = document.querySelector('.aud'),
- btn = document.querySelector('.btn');
- meter = document.querySelector('.meter'),
- slider = document.querySelector('.slider'),
- lrcUl = document.querySelector('.lrcUl');
- let slip = 0.25;
- let lrcAr = [
- ['0.00','月牙泉 - 原唱 田震'],
- ['3.84','月牙泉童声版 - 翻唱 史筱璇'],
- ['6.79','词:杨海潮'],
- ['10.28','曲:杨海潮'],
- ['13.82','就在天的那边 很远很远'],
- ['18.01','有美丽的月牙泉'],
- ['22.84','它是天的镜子 沙漠的眼'],
- ['27.43','星星沐浴的乐园'],
- ['32.04','从那年我月牙泉边走过'],
- ['37.06','从此以后魂儿绕梦牵'],
- ['41.83','也许你们不懂得这种爱恋'],
- ['46.39','除非也去那里看看'],
- ['50.55','看那 看那 月牙泉'],
- ['59.72','想那 念那 月牙泉'],
- ['78.90','看那 看那 月牙泉'],
- ['88.19','想那 念那 月牙泉'],
- ['98.10','看那 看那 月牙泉'],
- ['107.10','想那 念那 月牙泉'],
- ['117.15','就在天的那边 很远很远'],
- ['121.70','有美丽的月牙泉'],
- ['126.40','它是天的镜子 沙漠的眼'],
- ['131.05','星星沐浴的乐园']
- ];
- for(j=0; j<lrcAr.length; j++){
- lrcUl.innerHTML += '<li id="li' + lrcAr[j][0] + '">' + 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', () => btn.value = '▷');
- aud.addEventListener('play',() => btn.value = '||');
- meter.onclick = (e) => {
- e = e || event;
- aud.currentTime = (e.clientX - offset(meter,"left")) * aud.duration / meter.clientWidth;
- }
- btn.onclick = () => aud.paused ? (aud.play(),btn.value = '||') : (aud.pause(),btn.value = '▷');
- function 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;
- }
- btn.value = aud.paused ? '▷' : '||';
- </script>
复制代码
|
评分
-
| 参与人数 1 | 威望 +50 |
金钱 +100 |
经验 +50 |
收起
理由
|
红影
| + 50 |
+ 100 |
+ 50 |
赞一个! |
查看全部评分
|