Html实现歌曲歌词同步

来源：懂视网责编：小采时间：2020-11-27 15:25:39

Html实现歌曲歌词同步

Html实现歌曲歌词同步:这篇文章主要介绍了关于Html实现歌曲歌词同步，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"

推荐度：

点击下载本文 文档为doc格式

导读Html实现歌曲歌词同步:这篇文章主要介绍了关于Html实现歌曲歌词同步，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"

这篇文章主要介绍了关于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>

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

Html实现歌曲歌词同步

推荐度：

点击下载本文 文档为doc格式

标签：同步音乐歌词

热门焦点

Html实现歌曲歌词同步

Html实现歌曲歌词同步

Html实现歌曲歌词同步

最新推荐

猜你喜欢

热门推荐