Html实现歌曲歌词同步
发布时间:09/01 来源:未知 浏览:
关键词:
<!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实现美化上传文件样式
HTML实现抢票功效(设按时间翻开抢票的页面)
以上就是Html实现歌曲歌词同步的具体内容,更多请关注百分百源码网其它相关文章!