您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
这篇文章主要介绍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中如何实现歌曲歌词同步的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注亿速云行业资讯频道!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。