小辣椒 发表于 2022-2-23 23:22

单曲歌词同步高亮（css制作）代码套用

<style type="text/css">

.mnBox { position: relative; margin: 0 auto; padding: 35px; width: 660px; border: none; border-top: 6px solid #000; border-radius: 10px; background: #b3c3c3; }
.ctBox { margin: 0; padding: 30px; background: #fff; min-height: 300px; border-radius: 10px; }
.ctBox p,img, h2,button { text-align:center; }
#lrcDiv { margin: auto; width: 300px; height: 43px; overflow: hidden; position: relative; padding: 8px; text-align:center; }
#lrcDiv ul, lrcli { margin: 0; padding: 0;}
#lrcUl { position: absolute; left:20px;top: 0; }
#lrcUl li { height: 20px; font-size:14px; line-height:20px;left:50px; color: black; list-style-type: none; }
#myplayer { outline: none; list-style-type: none; }

</style>

<div class="mnBox">
      <div class="ctBox">
                <p style="text-align:center;"><img alt="550" height="362" src="https://pic.imgdb.cn/item/6216210d2ab3f51d91f0f16b.jpg" /><br></p>
                <h2 style="padding-bottom: 10px;">痛彻心扉</h2>
                <h2 style="text-align:center;">歌手--小希 (馨予）</h2>
                <pre>

                        看见黑黑今天分享的
                        歌词同步高亮制作                     
                        在这个css边框中测试一下
                        感觉这个歌词同步高亮效果
                        加上这个边框特别漂亮
                        这样分享音乐也是不错
                        感谢黑黑又一个精彩分享
                        黑黑你太厉害了 精彩不断！
                        
                        感谢黑黑老师的精彩分享
                        自动播放歌词同步高亮制作
                        
                        
                </pre>
                <p style="margin: auto; width:120px; text-align:center; font-size:14px; color:#000;"><marqueescrollamount="2" direction="left" >谢谢黑黑老师的精彩分享</marquee></p>

                <p style="text-align:center;"><audio id="myplayer" src="https://s1.ananas.chaoxing.com/audio/ff/16/97/ffe3417049dc66cd0b19d7fbbb69395b/audio.mp3" controls="controls" autoplay="autoplay"></audio></p>
                <div id="lrcDiv"><ul id="lrcUl"></ul></div>
                <p style="margin: 20px; text-align:center;">小辣椒2022 02 23</p>
      </div>
</div>

<script language="javascript">

var lrcAr = [
["00:00.11",""],
["00:03.11"," 痛彻心扉"],
["00:10.48"," 歌手：小希 (馨予)"],
["00:16.76"," LRC编辑：小辣椒"],
["00:21.64"," 怎么能够让我不再想你"],
["00:27.07"," 也许爱你爱到最后只能伤心"],
["00:33.60"," 已经有了离开你的勇气"],
["00:39.83"," 在我的梦里你不是唯一"],
["00:46.26"," 我想要再回到你温暖的怀里"],
["00:53.24"," 感觉你的心跳你的呼吸"],
["00:59.68"," 想到天长地久对于我们"],
["01:04.36"," 渴望而不可及"],
["01:06.75"," 难道命运注定就此分离"],
["01:13.83"," 啊。。。"],
["01:16.91"," 爱你痛彻我心扉"],
["01:22.56"," 给了你仅有的一片天"],
["01:29.03"," 回忆的碎片撞翻我心中思念的火蕊"],
["01:35.95"," 燃烧我整座的堡垒"],
["01:42.15"," 啊。。。"],
["01:44.73"," 爱你痛彻我心扉"],
["01:49.31"," 少了你还残留一片天"],
["01:55.45"," 我想我只会紧握住手中凋零的玫瑰"],
["02:02.83"," 品尝你赐给的泪水"],
["02:08.91"," 或许你曾为我流泪"],
["02:15.44"," 如今你让我痛彻心扉"],
["02:24.03"," LRC编辑：小辣椒"],
["02:48.19"," 我想要再回到你温暖的怀里"],
["02:55.01"," 感觉你的心跳你的呼吸"],
["03:01.24"," 想到天长地久对于我们"],
["03:05.87"," 渴望而不可及"],
["03:08.22"," 难道命运注定就此分离"],
["03:15.46"," 啊。。。"],
["03:18.50"," 爱你痛彻我心扉"],
["03:24.18"," 给了你仅有的一片天"],
["03:30.36"," 回忆的碎片撞翻我心中思念的火蕊"],
["03:37.54"," 燃烧我整座的堡垒"],
["03:43.55"," 啊。。。"],
["03:46.38"," 爱你痛彻我心扉"],
["03:51.02"," 少了你还残留一片天"],
["03:57.20"," 我想我只会紧握住手中凋零的玫瑰"],
["04:04.53"," 品尝你赐给的泪水"],
["04:10.56"," 或许你曾为我流泪"],
["04:17.09"," 如今你让我痛彻心扉"],
["04:27.51"," 谢谢欣赏"]
];
var myaud = document.getElementById('myplayer'); //播放器标识
var lrcUl = document.getElementById('lrcUl'); //歌词显示元素标识
//处理lrc歌词数组：时间转换成秒、歌词放入li标签
for(j=0; j<lrcAr.length; j++){
      lrcAr = toSec(lrcAr);
      lrcUl.innerHTML += "<li id='li" + lrcAr + "'>" + lrcAr + "</li>";
}
//lrc时间信息转为秒
function toSec(lrcTime) {
      let tmpAr = lrcTime.split(':');
      lrcTime = tmpAr * 60 + parseInt(tmpAr);
      return lrcTime;
}
//同步高亮、翻滚歌词
myaud.ontimeupdate = function() {
      let tt = this.currentTime;
      for(j=0; j<lrcAr.length; j++){
                if(tt > lrcAr){
                        if(j > 0){
                              let idxLast = lrcAr;
                              document.getElementById("li" + idxLast).style.color = "black";
                              lrcUl.style.top ="-" + (j * 20 - 20) + "px";
                        }
                        let idx = lrcAr;
                        document.getElementById("li" + idx).style.color = "red";
                }
      }
}
// 播放结束重置歌词样式
myaud.onended = function() {
      document.getElementById("li" + lrcAr).style.color = "black";
      lrcUl.style.top = 0;
      this.play();
}

</script>

小辣椒 发表于 2022-2-24 20:34

<style type="text/css">

.mnBox { position: relative; margin: 0 auto; padding: 35px; width: 660px; border: none; border-top: 6px solid #000; border-radius: 10px; background: #b3c3c3; }
.ctBox { margin: 0; padding: 30px; background: #fff; min-height: 300px; border-radius: 10px; }
.ctBox p,img, h2,button { text-align:center; }
#lrcDiv { margin: auto; width: 300px; height: 43px; overflow: hidden; position: relative; padding: 8px; text-align:center; }
#lrcDiv ul, lrcli { margin: 0; padding: 0;}
#lrcUl { position: absolute; left:10px;top: 0; }
#lrcUl li { height: 20px; font-size:14px; line-height:20px;left:50px; color: black; list-style-type: none; }
#myplayer { outline: none; list-style-type: none; }

</style>

<div class="mnBox">
      <div class="ctBox">
                <p style="text-align:center;"><img alt="550" height="362" src="https://pic.imgdb.cn/item/6216210d2ab3f51d91f0f16b.jpg" /><br></p>
                <h2 style="padding-bottom: 10px;">痛彻心扉</h2>
                <h2 style="text-align:center;">歌手--小希 (馨予）</h2>
                <pre>

                        看见黑黑今天分享的
                        歌词同步高亮制作                     
                        在这个css边框中测试一下
                        感觉这个歌词同步高亮效果
                        加上这个边框特别漂亮
                        这样分享音乐也是不错
                        感谢黑黑又一个精彩分享
                        黑黑你太厉害了 精彩不断！
                        
                        感谢黑黑老师的精彩分享
                        自动播放歌词同步高亮制作
                        
                        
                </pre>
                <p style="margin: auto; width:120px; text-align:center; font-size:14px; color:#000;"><marqueescrollamount="2" direction="left" >谢谢黑黑老师的精彩分享</marquee></p>

                <p style="text-align:center;"><audio id="myplayer" src="https://oss.shandianpan.com/deba64b09196f48dcde864caf63ceee9.mp3" controls="controls" autoplay="autoplay"></audio></p>
                <div id="lrcDiv"><ul id="lrcUl"></ul></div>
                <p style="margin: 20px; text-align:center;">小辣椒2022 02 23</p>
      </div>
</div>

<script language="javascript">

var lrcAr = [
["00:00.11",""],
["00:03.11"," 痛彻心扉"],
["00:10.48"," 歌手：小希 (馨予)"],
["00:16.76"," LRC编辑：小辣椒"],
["00:21.64"," 怎么能够让我不再想你"],
["00:27.07"," 也许爱你爱到最后只能伤心"],
["00:33.60"," 已经有了离开你的勇气"],
["00:39.83"," 在我的梦里你不是唯一"],
["00:46.26"," 我想要再回到你温暖的怀里"],
["00:53.24"," 感觉你的心跳你的呼吸"],
["00:59.68"," 想到天长地久对于我们"],
["01:04.36"," 渴望而不可及"],
["01:06.75"," 难道命运注定就此分离"],
["01:13.83"," 啊。。。"],
["01:16.91"," 爱你痛彻我心扉"],
["01:22.56"," 给了你仅有的一片天"],
["01:29.03"," 回忆的碎片撞翻我心中思念的火蕊"],
["01:35.95"," 燃烧我整座的堡垒"],
["01:42.15"," 啊。。。"],
["01:44.73"," 爱你痛彻我心扉"],
["01:49.31"," 少了你还残留一片天"],
["01:55.45"," 我想我只会紧握住手中凋零的玫瑰"],
["02:02.83"," 品尝你赐给的泪水"],
["02:08.91"," 或许你曾为我流泪"],
["02:15.44"," 如今你让我痛彻心扉"],
["02:24.03"," LRC编辑：小辣椒"],
["02:48.19"," 我想要再回到你温暖的怀里"],
["02:55.01"," 感觉你的心跳你的呼吸"],
["03:01.24"," 想到天长地久对于我们"],
["03:05.87"," 渴望而不可及"],
["03:08.22"," 难道命运注定就此分离"],
["03:15.46"," 啊。。。"],
["03:18.50"," 爱你痛彻我心扉"],
["03:24.18"," 给了你仅有的一片天"],
["03:30.36"," 回忆的碎片撞翻我心中思念的火蕊"],
["03:37.54"," 燃烧我整座的堡垒"],
["03:43.55"," 啊。。。"],
["03:46.38"," 爱你痛彻我心扉"],
["03:51.02"," 少了你还残留一片天"],
["03:57.20"," 我想我只会紧握住手中凋零的玫瑰"],
["04:04.53"," 品尝你赐给的泪水"],
["04:10.56"," 或许你曾为我流泪"],
["04:17.09"," 如今你让我痛彻心扉"],
["04:27.51"," 谢谢欣赏"]
];
var myaud = document.getElementById('myplayer'); //播放器标识
var lrcUl = document.getElementById('lrcUl'); //歌词显示元素标识
//处理lrc歌词数组：时间转换成秒、歌词放入li标签
for(j=0; j<lrcAr.length; j++){
      lrcAr = toSec(lrcAr);
      lrcUl.innerHTML += "<li id='li" + lrcAr + "'>" + lrcAr + "</li>";
}
//lrc时间信息转为秒
function toSec(lrcTime) {
      let tmpAr = lrcTime.split(':');
      lrcTime = tmpAr * 60 + parseInt(tmpAr);
      return lrcTime;
}
//同步高亮、翻滚歌词
myaud.ontimeupdate = function() {
      let tt = this.currentTime;
      for(j=0; j<lrcAr.length; j++){
                if(tt > lrcAr){
                        if(j > 0){
                              let idxLast = lrcAr;
                              document.getElementById("li" + idxLast).style.color = "black";
                              lrcUl.style.top ="-" + (j * 20 - 20) + "px";
                        }
                        let idx = lrcAr;
                        document.getElementById("li" + idx).style.color = "red";
                }
      }
}
// 播放结束重置歌词样式
myaud.onended = function() {
      document.getElementById("li" + lrcAr).style.color = "black";
      lrcUl.style.top = 0;
      this.play();
}

</script>

杨柳青 发表于 2022-2-23 23:24

听歌~~~~欣赏小辣椒的精彩~~~~{:5_116:}

加林森 发表于 2022-2-24 10:40

这个是自动播放的了。

红影 发表于 2022-2-24 14:38

我也喜欢自动播放，总觉得更方便{:4_173:}

马黑黑 发表于 2022-2-24 15:20

https://www.huachaowang.com/home.php?mod=medal

马黑黑 发表于 2022-2-24 15:20

( ^_^ )不错嘛

小辣椒 发表于 2022-2-24 20:35

杨柳青 发表于 2022-2-23 23:24
听歌~~~~欣赏小辣椒的精彩~~~~

小杨柳这个是黑黑分享的，小辣椒做一次，大家可以套用玩

小辣椒 发表于 2022-2-24 20:36

加林森 发表于 2022-2-24 10:40
这个是自动播放的了。

队长晚上好，这个代码套用，大家可以玩

小辣椒 发表于 2022-2-24 20:38

马黑黑 发表于 2022-2-24 15:20
( ^_^ )不错嘛

谢谢黑黑的歌词同步高亮代码分享，这样可以大家套用玩了{:4_187:}

小辣椒 发表于 2022-2-24 20:39

红影 发表于 2022-2-24 14:38
我也喜欢自动播放，总觉得更方便

是的，自动播放大家习惯了

杨柳青 发表于 2022-2-24 20:42

小辣椒 发表于 2022-2-24 20:35
小杨柳这个是黑黑分享的，小辣椒做一次，大家可以套用玩

这个音画帖正正规规~~~~图片文字播放器都全了~~~~套用方便~~~~收藏了~~~{:4_187:}

大猫咪 发表于 2022-2-24 20:45

辣椒制作真棒，好听又好看，猫一会就去学习{:4_187:}{:4_190:}

加林森 发表于 2022-2-24 20:45

小辣椒 发表于 2022-2-24 20:36
队长晚上好，这个代码套用，大家可以玩

如果把今天捞黑的另外一个教程，就是网易播放器放出来呢？行不行呢？

杨柳青 发表于 2022-2-24 20:46

小辣椒 发表于 2022-2-24 20:35
小杨柳这个是黑黑分享的，小辣椒做一次，大家可以套用玩

代码里有歌词按时间先后显示~~~~帖子里没有显示出来~~~~{:5_153:}

马黑黑 发表于 2022-2-24 21:05

小辣椒 发表于 2022-2-24 20:38
谢谢黑黑的歌词同步高亮代码分享，这样可以大家套用玩了

{:4_187:}

红影 发表于 2022-2-24 21:09

小辣椒 发表于 2022-2-24 20:39
是的，自动播放大家习惯了

是啊，我就挺习惯自动播放的{:4_173:}

马黑黑 发表于 2022-2-24 21:15

红影 发表于 2022-2-24 21:09
是啊，我就挺习惯自动播放的

那就这么定了

红影 发表于 2022-2-24 21:57

马黑黑 发表于 2022-2-24 21:15
那就这么定了

下回全做自动播放的{:4_189:}

马黑黑 发表于 2022-2-24 22:08

红影 发表于 2022-2-24 21:57
下回全做自动播放的

支持
页: [1] 2
查看完整版本: 单曲歌词同步高亮（css制作）代码套用