绿叶清舟 发表于 2022-6-16 21:24

同步 - 范晓萱

本帖最后由 绿叶清舟 于 2022-6-17 09:50 编辑 <br /><br /><style>
/* 帖子外层 */
.outer {
      left: -14px; /* 水平定位*/
      width: 720px; /* 帖子宽度 */
      height: 450px; /* 帖子高度 */
      background: #ccc url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farchive%2F260bceca4edf555847cbb7c38fb2e2a3c321ba16.jpg&refer=http%3A%2F%2Fi0.hdslb.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1657977142&t=2cad1aeef2a90240a3101e33a4b5ffdc') no-repeat; /* 帖子背景 */
      box-shadow: 0 4px 18px #000; /* 盒子阴影*/
      position: relative; /* 重要 帖子定位依赖 */
}

/* 歌词同步显示框 */
.lrcbox {
      transform: translate(20px, 20px); /* 定位 */
      font: bold 1em sans-serif; /* 文本 */
      color: #fff; /* 字体颜色 */
      text-shadow: 1px 1px 2px #000; /* 文本阴影 */
      background: black linear-gradient(transparent,lightgreen); /* 盒子背景*/
      border-radius: 100% 0; /* 盒子边框 */
      cursor: pointer; /* 手型指针 */
      position: absolute; /* 关键 歌词显示框依赖于此 */
}
</style>

<div class="outer">
      <div class="lrcbox">
                <p id="geci" style="padding: 0;margin: 4px 0">Loading ...</p>
                <meter id="meter" value="0" min="0" max="100" low="33" high="66" optimum="70"></meter>
      </div>
</div>
<audio id="aud" src="http://music.163.com/song/media/outer/url?id=36492860.mp3" autoplay="autoplay" loop="loop"></audio>

<script>
//盒子句柄
let lrcbox = document.querySelector('.lrcbox'),
      geci = document.querySelector('#geci'),
      aud = document.querySelector('#aud'),
      meter = document.querySelector('#meter');
let prog = (tt, cc) => 100 * cc / tt;//计算播放进度
//歌词数组
let lrcAr = [
      ['0.20','同步 - 范晓萱'],
        ['20.33','相隔两地的时空'],
        ['24.41','默契对话没有距离'],
        ['28.08','冰冷的荧幕'],
        ['30.94','因为我们双手产生热度'],
        ['36.49','努力各自的生活'],
        ['40.06','追求不放弃的梦'],
        ['43.70','冬与夏的反差'],
        ['47.05','成了最可爱的交集'],
        ['52.30','我们的爱是否同步'],
        ['55.96','我投给你却投给了他'],
        ['60.90','真希望像棒球最后'],
        ['64.14','会回到我这儿啊'],
        ['68.13','我们的爱没有同步'],
        ['72.03','你给的暗号已告诉我'],
        ['77.46','这个手势代表了'],
        ['82.00','一辈子的朋友'],
        ['116.36','你爱声音的故事'],
        ['120.13','我爱味道的热情'],
        ['124.09','Alice 发出了'],
        ['127.15','我们共同孤独的频率'],
        ['132.07','总是掉进回忆'],
        ['136.02','想象中总是有你'],
        ['139.66','思念时什么事我都无能为力'],
        ['148.09','我们的爱是否同步'],
        ['152.11','就像你爱吃的栗子'],
        ['157.02','剥开的时候就是心碎的声音'],
        ['164.26','我们的爱不会同步'],
        ['168.06','送给你最后的礼物'],
        ['173.58','那是樱花掉落的声音'],
        ['188.03','美丽却无声无息']];
//歌词框单击事件
lrcbox.onclick = () => aud.paused ? aud.play() : aud.pause();
//audio进度监听事件
aud.addEventListener('timeupdate', () => {
      meter.value = prog(aud.duration, aud.currentTime);
      let tt = aud.currentTime;
      for(j=0; j<lrcAr.length; j++){
                if(tt >= lrcAr){
                        geci.innerHTML = lrcAr;
                }
      }
})
</script>

马黑黑 发表于 2022-6-16 21:26

这个才是真正的而不是传说中的同步

绿叶清舟 发表于 2022-6-16 21:27

马黑黑 发表于 2022-6-16 21:26
这个才是真正的而不是传说中的同步

歌词没出来啊

马黑黑 发表于 2022-6-16 21:27

歌词数组有误：

      ['02:53.79','那是樱花掉落的声音'],
      ['03:04.20','美丽却无声无息'],
];

删掉红色逗号就好

马黑黑 发表于 2022-6-16 21:28

绿叶清舟 发表于 2022-6-16 21:27
歌词没出来啊

看地板

绿叶清舟 发表于 2022-6-16 21:32

马黑黑 发表于 2022-6-16 21:28
看地板

删除了还是一样啊

绿叶清舟 发表于 2022-6-16 21:34

<style>
/* 帖子外层 */
.outer {
      left: -14px; /* 水平定位*/
      width: 720px; /* 帖子宽度 */
      height: 450px; /* 帖子高度 */
      background: #ccc url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farchive%2F260bceca4edf555847cbb7c38fb2e2a3c321ba16.jpg&refer=http%3A%2F%2Fi0.hdslb.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1657977142&t=2cad1aeef2a90240a3101e33a4b5ffdc') no-repeat; /* 帖子背景 */
      box-shadow: 0 4px 18px #000; /* 盒子阴影*/
      position: relative; /* 重要 帖子定位依赖 */
}

/* 歌词同步显示框 */
.lrcbox {
      transform: translate(20px, 20px); /* 定位 */
      font: bold 1em sans-serif; /* 文本 */
      color: #fff; /* 字体颜色 */
      text-shadow: 1px 1px 2px #000; /* 文本阴影 */
      background: black linear-gradient(transparent,lightgreen); /* 盒子背景*/
      border-radius: 100% 0; /* 盒子边框 */
      cursor: pointer; /* 手型指针 */
      position: absolute; /* 关键 歌词显示框依赖于此 */
}
</style>

<div class="outer">
      <div class="lrcbox">
                <p id="geci" style="padding: 0;margin: 4px 0">Loading ...</p>
                <meter id="meter" value="0" min="0" max="100" low="33" high="66" optimum="70"></meter>
      </div>
</div>
<audio id="aud" src="http://music.163.com/song/media/outer/url?id=36492860.mp3" autoplay="autoplay" loop="loop"></audio>

<script>
//盒子句柄
let lrcbox = document.querySelector('.lrcbox'),
      geci = document.querySelector('#geci'),
      aud = document.querySelector('#aud'),
      meter = document.querySelector('#meter');
let prog = (tt, cc) => 100 * cc / tt;//计算播放进度
//歌词数组
let lrcAr = [
      ['00:01.77','范晓萱 - 同步(陪安东尼度过漫长岁月电影主题曲)'],
      ['00:10.00','歌词搜索'],
      ['00:20.21','相隔两地的时空'],
      ['00:24.27','默契对话没有距离'],
      ['00:28.19','冰冷的萤幕'],
      ['00:31.19','因为我们双手产生热度'],
      ['00:36.67','努力各自的生活'],
      ['00:40.18','追求不放弃的梦'],
      ['00:43.42','冬与夏的反差'],
      ['00:47.64','成了最可爱的交集'],
      ['00:52.17','我们的爱是否同步'],
      ['00:56.13','我投给你却投给了他'],
      ['01:00.80','真希望像棒球最后'],
      ['01:04.61','会回到我这儿啊'],
      ['01:08.69','我们的爱没有同步'],
      ['01:12.13','你给的暗号已告诉我'],
      ['01:17.56','这个手势代表了'],
      ['01:21.93','一辈子的朋友'],
      ['01:30.81','歌词编辑：费总QQ1421210858'],
      ['01:56.41','你爱声音的故事'],
      ['02:00.21','我爱味道的热情'],
      ['02:04.18','Alice发出了'],
      ['02:07.63','我们共同孤独的频率'],
      ['02:12.25','总是掉进回忆'],
      ['02:16.21','想象中总是有你'],
      ['02:19.82','思念时什么事我都无能为力'],
      ['02:28.30','我们的爱是否同步'],
      ['02:32.21','就像你爱吃的栗子'],
      ['02:36.98','剥开的时候就是心碎的声音'],
      ['02:44.49','我们的爱不会同步'],
      ['02:48.56','送给你最后的礼物'],
      ['02:53.79','那是樱花掉落的声音'],
      ['03:04.20','美丽却无声无息']
];
//歌词框单击事件
lrcbox.onclick = () => aud.paused ? aud.play() : aud.pause();
//audio进度监听事件
aud.addEventListener('timeupdate', () => {
      meter.value = prog(aud.duration, aud.currentTime);
      let tt = aud.currentTime;
      for(j=0; j<lrcAr.length; j++){
                if(tt >= lrcAr){
                        geci.innerHTML = lrcAr;
                }
      }
})
</script>

马黑黑 发表于 2022-6-16 21:35

绿叶清舟 发表于 2022-6-16 21:32
删除了还是一样啊
嗯，我知道了。这个lrc歌词不对，不是用配套的制作方式制作的。你得用这个来完成lrc歌词：

https://www.huachaowang.com/foru ... 0264&extra=page%3D1

绿叶清舟 发表于 2022-6-16 21:48

马黑黑 发表于 2022-6-16 21:35
嗯，我知道了。这个lrc歌词不对，不是用配套的制作方式制作的。你得用这个来完成lrc歌词：

https://ww ...

let lrcAr = [
        作词 : 范晓萱
        作曲 : 范晓萱
       
        相隔两地的时空
        默契对话没有距离
        冰冷的荧幕
        因为我们双手产生热度
        努力各自的生活
        追求不放弃的梦
        冬与夏的反差
        成了最可爱的交集
        我们的爱是否同步
        我投给你却投给了他
        真希望像棒球最后
        会回到我这儿啊
       
        我们的爱没有同步
        你给的暗号已告诉我
        这个手势代表了
        一辈子的朋友
       
        你爱声音的故事
        我爱味道的热情
       
        Alice 发出了
        我们共同孤独的频率
        总是掉进回忆
        想象中总是有你
        思念时什么事我都无能为力
       
        我们的爱是否同步
        就像你爱吃的栗子
        剥开的时候就是心碎的声音
       
        我们的爱不会同步
        送给你最后的礼物
        那是樱花掉落的声音
       
        美丽却无声无息
        ['222.73',''],
出来的是这样的啊，还要加时间吗

红影 发表于 2022-6-16 21:48

清舟用这个歌词形式，就要用黑黑另一个歌词同步代码。现在这个代码是对应秒那个的{:4_173:}

绿叶清舟 发表于 2022-6-16 21:51

红影 发表于 2022-6-16 21:48
清舟用这个歌词形式，就要用黑黑另一个歌词同步代码。现在这个代码是对应秒那个的

怕麻烦啊，一直没玩这个，现在变OUT了{:4_189:}

红影 发表于 2022-6-16 21:58

绿叶清舟 发表于 2022-6-16 21:51
怕麻烦啊，一直没玩这个，现在变OUT了

不麻烦呢，可以用黑黑牌歌词LRC去制作自己的歌词同步，也是很开心的事啊{:4_173:}

小辣椒 发表于 2022-6-16 21:58

这个图图配的绝了{:4_173:}

小辣椒 发表于 2022-6-16 21:58

歌词不同步也是必须同步{:4_170:}

加林森 发表于 2022-6-16 21:59

继续努力。同步就必须同步的。{:4_199:}

绿叶清舟 发表于 2022-6-16 22:17

红影 发表于 2022-6-16 21:48
清舟用这个歌词形式，就要用黑黑另一个歌词同步代码。现在这个代码是对应秒那个的

这么讲究的啊

绿叶清舟 发表于 2022-6-16 22:18

小辣椒 发表于 2022-6-16 21:58
歌词不同步也是必须同步

不同步也叫同步了{:4_189:}

绿叶清舟 发表于 2022-6-16 22:18

加林森 发表于 2022-6-16 21:59
继续努力。同步就必须同步的。

再不同步就把小范给叫了来{:4_189:}

加林森 发表于 2022-6-16 22:24

绿叶清舟 发表于 2022-6-16 22:18
再不同步就把小范给叫了来

就是就是。{:4_189:}

马黑黑 发表于 2022-6-16 22:35

绿叶清舟 发表于 2022-6-16 21:48
let lrcAr = [
        作词 : 范晓萱
        作曲 : 范晓萱


你要播放、暂停，通过暂停得到每一句歌词的 lrc休息，点上屏。句句都是这样操作。上手了很快的。
页: [1] 2 3
查看完整版本: 同步 - 范晓萱