这篇文章主要介绍了关于Html实现歌曲歌词同步，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下
歌词同步 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; }
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(''); 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) + '.+\].+'); 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不会有这种问题。 */
相关推荐：
HTML实现美化上传文件样式
HTML实现抢票功能(设定时间打开抢票的页面)
以上就是Html实现歌曲歌词同步的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1546081.html
微信扫一扫 
支付宝扫一扫 
