|
|

楼主 |
发表于 2022-8-27 07:44
|
显示全部楼层
源码(使用时请自行去掉 #player 选择器的 border 属性):
- <style>
- #papa { left: -214px; width: 1024px; height: 640px; display: grid; place-items: center; background: snow; box-shadow: 3px 3px 20px #000; position: relative; }
- #player { padding: 10px; position: absolute; bottom: 20px; width: fit-content; height: fit-content; display: flex; gap: 10px; flex-direction: column; border: 1px solid; }
- #lrctext { font: normal 1.2em sans-serif; color: olive; text-shadow: 1px 1px 2px #000; text-align: center; }
- #btnwrap { width: fit-content; height: fit-content; display: flex; gap: 8px; align-items: center; }
- #btnplay { outline: none; cursor: pointer; }
- #btnplay:hover { color: red; }
- #prgline { width: 200px; height: 2px; background: #ccc linear-gradient(red,red) no-repeat ; background-size: 1px 2px; display: block; cursor: pointer; }
- #tmsg { width: auto; }
- </style>
- <div id="papa">
- <div id="player">
- <div id="lrctext">lrc歌词</div>
- <div id="btnwrap">
- <input type="button" id="btnplay" value="播放" />
- <span id="prgline"></span>
- <span id="tmsg">00:00 | 00:00</span>
- </div>
- </div>
- </div>
- <script>
- let lrcAr = [
- ['0.01','童安格 耶利亚女郎'],
- ['34.10','很远的地方有个女郎 名字叫做耶利亚'],
- ['42.33','有人在传说她的眼睛 看了使人更年轻'],
- ['50.62','如果你得到她的拥抱 你就永远不会老'],
- ['59.15','为了这个神奇的传说 我要努力去寻找'],
- ['66.42','耶利亚神秘耶利亚 耶利耶利亚'],
- ['74.77','耶利亚神秘耶利亚 我一定要找到她'],
- ['101.12','很远的地方有个女郎 名字叫做耶利亚'],
- ['109.32','有人在传说她的眼睛 看了使人更年轻'],
- ['117.90','如果你得到她的拥抱 你就永远不会老'],
- ['126.22','为了这个神奇的传说 我要努力去寻找'],
- ['133.57','耶利亚神秘耶利亚 耶利耶利亚'],
- ['141.90','耶利亚神秘耶利亚 我一定要找到她'],
- ['150.29','耶利亚神秘耶利亚 耶利耶利亚'],
- ['158.76','耶利亚神秘耶利亚 我一定要找到她'],
- ['198.70','耶利亚神秘耶利亚 耶利耶利亚'],
- ['207.11','耶利亚神秘耶利亚 我一定要找到她'],
- ['215.28','耶利亚神秘耶利亚 耶利耶利亚'],
- ['223.72','耶利亚神秘耶利亚 我一定要找到她']
- ];
- let aud = new Audio(), lw = prgline.offsetWidth;
- aud.src = 'https://music.163.com/song/media/outer/url?id=150852.mp3';
- aud.autoplay = true;
- aud.loop = true;
- prgline.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / prgline.offsetWidth;
- btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
- aud.addEventListener('playing', () => btnplay.value = '暂停');
- aud.addEventListener('pause', () => btnplay.value = '播放');
- aud.addEventListener('timeupdate', () => {
- prgline.style.backgroundSize = lw * aud.currentTime / aud.duration + 'px 2px';
- tmsg.innerText = toMin(aud.duration) + ' | ' + toMin(aud.currentTime);
- for(j = 0; j < lrcAr.length; j ++) {
- if(aud.currentTime >= lrcAr[j][0]) lrctext.innerText = lrcAr[j][1];
- }
- });
- let toMin = (val) => {
- if (!val) return '00:00';
- val = Math.floor(val);
- let min = parseInt(val / 60), sec = parseFloat(val % 60);
- if(min < 10) min = '0' + min;
- if(sec < 10) sec = '0' + sec;
- return min + ':' + sec;
- }
- </script>
复制代码
|
|