Html实现歌曲歌词同步

互联网 18-5-3
这篇文章主要介绍了关于Html实现歌曲歌词同步，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下
<!DOCTYPE html>  <html lang="en">  <head>      <meta charset="UTF-8">      <title>歌词同步</title>      <style>          body {              background:url("Img/起风了.jpg") center no-repeat ;              background-size:60% 100%;          }          * {              margin:0 auto;              padding:0;          }          .play {              color: #01e5ff;              font-size: 24px;          }            .overPlay {              font-size: inherit;              color: #fff;          }            #p_lrc {              position: absolute;              padding-top: 0px;              left: 28%;              top: 300px;              width:50%;              transition: top .5s;              margin: 0 auto;                        }            .p_DisLrc {              overflow: hidden;              color:#b1abab;              width: 70%;              height: 600px;                position: relative;              margin: 0 auto;                        }            #audio {              width: 100%;          }            .p_audio {              width: 50%;              margin: 0 auto;          }            .p_but {              position: absolute;              font-size: 26px;              font-weight: 900;              top: 40%;              right: 0%;          }                .p_but p {                  cursor: pointer;              }      </style>      <link href="CSS/iconfont.css" rel="stylesheet" />  </head>        <body>      <p id="p_1" style="display: none;">      </p>      <!-- 歌词显示界面 -->      <p class="p_DisLrc">          <p id="p_lrc">              <p id="lrc_row1"></p>          </p>          <!-- 用于调整歌词位置 -->          <p class="p_but">              <p onmousedown="time = setInterval(btn_down,0)" onmouseup="clearInterval    (time)"><i class="iconfont icon-top"></i></p>              <p onmousedown="time = setInterval(btn_top,0)" onmouseup="clearInterval    (time)"><i class="iconfont icon-down"></i></p>          </p>      </p>      <!-- 播放器控件 -->      <p class="p_audio">          <audio id="audio" controls="controls" autoplay="autoplay">              <source src="audio/起风了.mp3" type="audio/mpeg">          </audio>      </p>            <script src="JavaScript/jquery-3.3.1.js"></script>      <script>          var audio = document.getElementById("audio");          var play = $("#lrc_row1");          //将歌词添加到p中          $(document).ready(function () {              //加载歌词              $('#p_1').load("LRC/qifengle.lrc");              //获取所有歌词              setTimeout(function () {                  var lrcArr = $("#p_1").text().split('\n');                  for (var i = 4; i < lrcArr.length; i++) {                      var p = document.createElement("p");                      //空白歌词不进行加载                      if (lrcArr[i].substring(10) != "") {                          p.innerText = lrcArr[i].substring(10);                          $("#p_lrc").append(p);                      }                  }              }, 200)          })            function lrcDisplay() {              //获取播放进度(转换的格式为: 00:00)              var minute = parseInt(audio.currentTime / 60);//分钟              minute = minute == 0 ? "00" : (minute + "").length < 2 ? "0" + minute : minute;              //获取秒数              var second = (parseInt(audio.currentTime)) % 60;              second = second == 0 ? "00" : (second + "").length < 2 ? "0" + second : second;              //正则表达匹配歌词              var regex = new RegExp('\\[' + (minute + ":" + second) + '.+\\].+\n');              var text = regex.exec($("#p_1").text());              if (text != null) {                  var str1 = new String($(play).next().text());                  var str2 = new String(text[0].substring(10));                  if (str1.trim() == str2.trim()) {                      //歌词颜色变色                      $(play).attr("class", "overPlay");                      play = $(play).next();                      $(play).attr("class", "play");                      //歌词滚动(自动)                      var top = parseInt($("#p_lrc").css("top"));                      $("#p_lrc").css("top", -1 * ((-1 * top) + 22) + "px");                  }              }          }          setInterval(lrcDisplay, 500);          //歌词滚动(手动)          var time = null;          function btn_top() {              var top = parseInt($("#p_lrc").css("top"));              $("#p_lrc").css("top", -1 * ((-1 * top) + 100) + "px");          }          function btn_down() {              var top = parseInt($("#p_lrc").css("top"));              if (top <= 0)                  $("#p_lrc").css("top", -1 * ((-1 * top) - 100) + "px");          }            //调整歌词位置的函数          function btn_top() {              var top = parseInt($("#p_lrc").css("top"));              $("#p_lrc").css("top", -1 * ((-1 * top) + 30) + "px");          }          /*              1.歌词文件不能是默认编码(记事本文件和lrc文件默认为ANSI编码) 只需要改为 UTF-8或    者GB2312,否则乱码              2.歌曲因为没有算毫秒差距,可能出现细微误差              3.因为网页同源策略的原因,外部直接打开html文件只能用firefox访问,                 不能进行跨域访问,如果不使用文件读取可以在任意地方打开.              4.因为ajax识别原因,会把空格当做分割内容,即歌词文件名不能有空格              5.因为js对文件操作以及ajax请求存在诸多默认限制,若以类似方法在winfrom asp等中很    多问题都会得到解决.              6.setTimeout()和setInterval()，在浏览器窗口非激活的状态下会停止工作或者以极慢的    速度工作。目前我已知就IE不会有这种问题。          */      </script>  </body>  </html>
Html实现歌曲歌词同步

相关资讯

标签推荐
