|
|

楼主 |
发表于 2022-6-7 13:11
|
显示全部楼层
本帖最后由 马黑黑 于 2022-6-7 13:36 编辑
歌词同步帖子模板:
- <style>
- .mama { margin: auto; width: 1200px; height: 900px; background: #eee; box-shadow: 2px 2px 2px #333; position: relative; }
- .meter { position: absolute; left: -30px; top: 58px; width: 100px; transform: rotate(-90deg); cursor: pointer; }
- #lrcDiv_outer { position: absolute; left: 20px; top: 20px; width: fit-content; height: fit-content; padding: 10px 14px; background: transparent linear-gradient(rgba(255,255,255,.25), rgba(255,255,255,.15)); box-shadow: 2px 2px 4px #2E63A5; border-radius: 6px; }
- #lrcDiv_inner { width: 340px; height: 72px; padding: 0px; overflow: hidden; }
- #lrcUl { position: relative; top: 0; margin: 0; padding: 0; }
- #lrcUl li { margin: 0; padding: 0; height: 24px; font: normal 18px / 24px sans-serif; color: lightseagreen; text-shadow: 1px 1px 1px #333; list-style-type: none; }
- </style>
- <div class="mama">
- <div class="stone"></div>
- <div id="lrcDiv_outer">
- <div id="lrcDiv_inner"><ul id="lrcUl"></ul></div>
- </div>
- <meter class="meter" min="0" max="100" low="33" high="66" optimum="80" value="0"></meter>
- </div>
- <audio class="aud" src="胡广生.mp3" autoplay="autoplay" loop="loop"></audio>
- <script>
- let aud = document.querySelector('.aud'),
- meter = document.querySelector('.meter'),
- lrcUl = document.getElementById('lrcUl');
- let lrcAr=[
- ['0.18','作词 : 任素汐'],
- ['4.04','作曲 : 任素汐'],
- ['5.73','胡广生 - 师葭希、韩甜甜/小石头和孩子们'],
- ['7.35','演唱:师葭希/韩甜甜'],
- ['9.26','声乐老师/和声编写:石栋颖'],
- ['11.65','录音师/缩混:石栋颖'],
- ['15.21','录音棚:小石头音乐录音棚'],
- ['16.29','小石头和孩子们 出品'],
- ['23.50','师葭希:一个乌的黑团团'],
- ['26.06','高高哩 哑哑哩'],
- ['28.82','两个魂喘着粗气'],
- ['31.59','烟尘四起'],
- ['34.44','你认得我吗'],
- ['36.82','跟我说那么多句'],
- ['40.14','你要哩尊严'],
- ['42.36','我熟悉'],
- ['46.05','韩甜甜:桥上走的哪一句'],
- ['48.82','我没到 你别起韵'],
- ['51.78','你就把头转过去'],
- ['54.59','莫给我消息'],
- ['57.17','我欠你啥子嘛'],
- ['60.22','我啥子都不欠你的'],
- ['63.15','你问我真哩迈 真哩'],
- ['68.89','师葭希、韩甜甜:走走停停不如定定'],
- ['74.52','凄凄切切说句谢谢'],
- ['80.22','等等 不必等等'],
- ['86.20','等等 别等等'],
- ['114.71','韩甜甜:桥上走的哪一句'],
- ['117.39','我没到 你别起韵'],
- ['120.27','你就把头转过去'],
- ['123.12','莫给我消息'],
- ['125.99','师葭希:我欠你啥子嘛'],
- ['128.65','我啥子都不欠你的'],
- ['131.53','你问我真哩迈 真哩'],
- ['137.54','师葭希、韩甜甜:走走停停不如定定'],
- ['143.16','凄凄切切说句谢谢'],
- ['148.85','等等 不必等等'],
- ['154.78','等等 别等等'],
- ['160.44','等等 不必等等'],
- ['166.06','等等 别等等'],
- ['172.11','啊。。。'],
- ['194.16','师葭希:下个清明 我去音书祭你'],
- ['201.44','还听 还静'],
- ['209.51','lrc整理 Mark']
- ];
- for(j=0; j<lrcAr.length; j++){
- lrcUl.innerHTML += '<li id="li' + lrcAr[j][0] + '">' + lrcAr[j][1] + '</li>';
- }
- aud.addEventListener('timeupdate', () => {
- let prog = 100 * aud.currentTime / aud.duration;
- meter.value = prog;
- let tt = aud.currentTime;
- for(j=0; j<lrcAr.length; j++){
- if(tt > lrcAr[j][0]){
- if(j > 0){
- let idxLast = lrcAr[j-1][0];
- document.getElementById('li' + idxLast).style.color = 'lightgreen';
- lrcUl.style.top = '-' + (j * 24 - 24) + 'px';
- }
- let idx = lrcAr[j][0];
- document.getElementById('li' + idx).style.color = 'gold';
- }
- }
- })
- aud.addEventListener('ended', () => {
- document.getElementById("li" + lrcAr[lrcAr.length-1][0]).style.color = 'lightgreen';
- lrcUl.style.top = 0;
- })
- meter.onclick = () => aud.paused ? aud.play() : aud.pause();
- </script>
复制代码
|
|