张红 发表于 2023-1-10 10:09

试做简单歌词同步-《2002年的第一场雪 - 刀郎》

<style>
#outer{
      left: 4px;top:30px;
      width: 750px;
      height:450px;
       box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 15px #880000; overflow:
hidden;transform:rotate(0deg);background: url("http://pan.yinhuabbs.cn/view.php/91d1c0fd3851388c3c9714f20e4943fd.jpg")0 0/100%100%; text-align: center;
      position: relative;
       display: grid;
       --opt: .85;
}
#outer::before { position: absolute; content: ''; background: url('http://chuangshicdn.data.mvbox.cn/album/22/03/14/22031417263445440463.gif') repeat; width:100%; height: 100%; mix-blend-mode: screen; opacity: var(--opt); animation: opa linear 20s infinite alternate; }
#lrcwk {width: 750px;
      transform: translate(0px, 380px);
      font: bold 2.5em sans-serif;
      color: #000000;
      -webkit-text-stroke:1px #ff00ff;
      font-family:迷你简中倩;
      cursor: pointer;
      position: absolute;
      z-index: 5;
}
.wzsd1 { animation: wzsd 0.56s linear infinite ; }
@keyframes wzsd {
from {opacity: 1;filter:hue-rotate(360deg)contrast(180%)brightness(200%);}
50% {opacity: 1;}
to {opacity: 1;filter:hue-rotate(0deg)contrast(140%)brightness(100%);}}
</style>
<div id="outer">
<div id="lrcwk">
<div class="wzsd1" style="position:absolute; top:00px; right:80px; width:620px;height:80px; text-align:center ">
<div id="geci" style="padding: 0;margin: 4px 0px">加载稍后。。。。</div>
<audio id="aud" src="http://antiserver.kuwo.cn/anti.s?useless=/resource/&format=mp3&rid=MUSIC_125223&response=res&type=convert_url&.mp3" autoplay="autoplay" loop="loop"></audio>
<script>
         lrcwk = document.querySelector('#lrcwk'),
      geci = document.querySelector('#geci'),
      aud = document.querySelector('#aud'),
lrc = [
        ['0.27','2002年的第一场雪 - 刀郎'],
      ['10.27','歌词制作：寻梦花园'],
      ['22.31','试贴简单歌词同步'],
        ['29.48','２００２年的第一场雪'],
        ['33.09','比以往时候来的更晚一些'],
        ['38.99','停靠在八楼的二路汽车'],
        ['43.39','带走了最后一片飘落的黄叶'],
        ['48.67','２００２年的第一场雪'],
        ['52.96','是留在乌鲁木齐难舍的情结'],
        ['58.24','你像一只飞来飞去的蝴蝶'],
        ['62.51','在白雪飘飞的季节里摇曳'],
        ['67.58','忘不了把你搂在怀里的感觉'],
        ['72.13','比藏在心中那份火热更暖一些'],
        ['77.05','忘记了窗外的北风凛冽'],
        ['81.91','再一次把温柔和缠绵重叠'],
        ['115.57','是你的红唇粘住我的一切'],
        ['120.35','是你的体贴让我再次热烈'],
        ['124.95','是你的万种柔情融化冰雪'],
        ['129.62','是你的甜言蜜语改变季节'],
        ['135.10','２００２年的第一场雪'],
        ['138.67','比以往时候来的更晚一些'],
        ['144.44','停靠在八楼的二路汽车'],
        ['149.16','带走了最后一片飘落的黄叶'],
        ['153.97','２００２年的第一场雪'],
        ['158.59','是留在乌鲁木齐难舍的情结'],
        ['163.40','你像一只飞来飞去的蝴蝶'],
        ['168.09','在白雪飘飞的季节里摇曳'],
        ['201.96','是你的红唇粘住我的一切'],
        ['206.66','是你的体贴让我再次热烈'],
        ['211.34','是你的万种柔情融化冰雪'],
        ['216.28','是你的甜言蜜语改变季节']
];
lrcwk.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('timeupdate', () => {
      for(j=0; j<lrc.length; j++){
                if(aud.currentTime >= lrc){
                        geci.innerHTML = lrc;
                }
      }
})
</script>

195400 发表于 2023-1-10 11:22

模仿一个, 为避免与主帖冲突屏蔽了声音。

<link rel="stylesheet" type="text/css" href="http://cesholl.cn3v.work/sstyle/lrcPlayerS.min.css" />
<style>
/***@import "http://cesholl.cn3v.work/sstyle/lrcPlayerS.min.css";***/

#oBlk        {
        width:1000px;height:600px;position:relative;margin:30px 0 0 -50px;
        background-color:skyblue;
        background: url("http://pan.yinhuabbs.cn/view.php/91d1c0fd3851388c3c9714f20e4943fd.jpg")0 0/100%100%;
        overflow:hidden;border-radius:24px;
        box-shadow:3px 3px 20px black;
}
#oBlk::before {
        position: absolute; content: '';
        background: url('http://chuangshicdn.data.mvbox.cn/album/22/03/14/22031417263445440463.gif') repeat;
        width:100%; height: 100%;opacity:0.85;
}
.lrcShow        {bottom:5px;}
</style>

<div id="oBlk">
<div class="lrcShow" data-lrc="点击启动播放"></div>
</div>
<script>
document.write('<script src="http://cesholl.cn3v.work/scripts/lrcPlayerS.packed.js"><\/script>');
</script>
<script>
var lrctxt = `
2002年的第一场雪 - 刀郎
词：刀郎
曲：刀郎
2002 年的第一场雪
比以往时候来的更晚一些
停靠在八楼的二路汽车
带走了最后一片飘落的黄叶
2002 年的第一场雪
是留在乌鲁木齐难舍的情结
你像一只飞来飞去的蝴蝶
在白雪飘飞的季节里摇曳
忘不了把你搂在怀里的感觉
比藏在心中那份火热更暖一些
忘记了窗外的北风凛冽
再一次把温柔和缠绵重叠

是你的红唇粘住我的一切
是你的体贴让我再次热烈
是你的万种柔情融化冰雪
是你的甜言蜜语改变季节
2002 年的第一场雪
比以往时候来的更晚一些
停靠在八楼的二路汽车
带走了最后一片飘落的黄叶
2002 年的第一场雪
是留在乌鲁木齐难舍的情结
你像一只飞来飞去的蝴蝶
在白雪飘飞的季节里摇曳

是你的红唇粘住我的一切
是你的体贴让我再次热烈
是你的万种柔情融化冰雪
是你的甜言蜜语改变季节

`;
var opts = {
      lrcTxt:lrctxt,
      audioURL:"http://link.hhtjim.com/kw/125223.mp3",
}
let pl = new lrcPlayerY(opts);
pl.mObj.muted = true;

</script>

张红 发表于 2023-1-10 12:25

195400 发表于 2023-1-10 11:22
模仿一个, 为避免与主帖冲突屏蔽了声音。



问好老师开始就是模仿你的帖子
高手赞

容轩听雨 发表于 2023-1-10 19:25

画面素雅，飞雪灵动，LRC编辑合拍，歌曲寄怀，创作辛苦，赞一个，问好好友

巫荣云师 发表于 2023-1-10 20:00

欣赏收藏老师的《2002年的第一场雪 - 刀郎》好听，问好点赞！:handshake{:1_293:}{:1_293:}{:1_293:}

容轩听雨 发表于 2023-1-10 20:31

195400 发表于 2023-1-10 11:22
模仿一个, 为避免与主帖冲突屏蔽了声音。




模仿的挺好，图同。但代码编写不同。
是的，静音了。如改为,pl.mObj.muted =false;就有声音了。就冲突主题帖了。
问好:handshake

195400 发表于 2023-1-10 20:32

容轩听雨 发表于 2023-1-10 20:31
模仿的挺好，图同。但代码编写不同。
是的，静音了。如改为,pl.mObj.muted =false;就有声音了。就冲突主 ...

为了不冲突加上的这一句，不要这句就有声音了。

容轩听雨 发表于 2023-1-10 20:37

195400 发表于 2023-1-10 20:32
为了不冲突加上的这一句，不要这句就有声音了。

是的，用这句pl.mObj.muted = true;好，不冲突主题贴。
问好！:D

蓝魔 发表于 2023-1-10 21:49

我似乎打不开？

非常开心 发表于 2023-1-12 08:37

欣赏收藏老师新作，好看又好听
页: [1]
查看完整版本: 试做简单歌词同步-《2002年的第一场雪 - 刀郎》