Html实现歌曲歌词同步_html歌词和歌曲同步网页_鱻i的博客-程序员秘密

技术标签： HTML5

<!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;
        }

        #div_lrc {
            position: absolute;
            padding-top: 0px;
            left: 28%;
            top: 300px;
            width:50%;
            transition: top .5s;
            margin: 0 auto;
            
        }

        .div_DisLrc {
            overflow: hidden;
            color:#b1abab;
            width: 70%;
            height: 600px;  
            position: relative;
            margin: 0 auto;
            
        }

        #audio {
            width: 100%;
        }

        .div_audio {
            width: 50%;
            margin: 0 auto;
        }

        .div_but {
            position: absolute;
            font-size: 26px;
            font-weight: 900;
            top: 40%;
            right: 0%;
        }

            .div_but p {
                cursor: pointer;
            }
    </style>
    <link href="CSS/iconfont.css" rel="stylesheet" />
</head>



<body>
    <div id="div_1" style="display: none;">
    </div>
    <!-- 歌词显示界面 -->
    <div class="div_DisLrc">
        <div id="div_lrc">
            <p id="lrc_row1"></p>
        </div>
        <!-- 用于调整歌词位置 -->
        <div class="div_but">
            <p οnmοusedοwn="time = setInterval(btn_down,0)" οnmοuseup="clearInterval

(time)"><i class="iconfont icon-top"></i></p>
            <p οnmοusedοwn="time = setInterval(btn_top,0)" οnmοuseup="clearInterval

(time)"><i class="iconfont icon-down"></i></p>
        </div>
    </div>
    <!-- 播放器控件 -->
    <div class="div_audio">
        <audio id="audio" controls="controls" autoplay="autoplay">
            <source src="audio/起风了.mp3" type="audio/mpeg">
        </audio>
    </div>



    <script src="JavaScript/jquery-3.3.1.js"></script>
    <script>
        var audio = document.getElementById("audio");
        var play = $("#lrc_row1");
        //将歌词添加到div中
        $(document).ready(function () {
            //加载歌词
            $('#div_1').load("LRC/qifengle.lrc");
            //获取所有歌词
            setTimeout(function () {
                var lrcArr = $("#div_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);
                        $("#div_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($("#div_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($("#div_lrc").css("top"));
                    $("#div_lrc").css("top", -1 * ((-1 * top) + 22) + "px");
                }
            }
        }
        setInterval(lrcDisplay, 500);
        //歌词滚动(手动)
        var time = null;
        function btn_top() {
            var top = parseInt($("#div_lrc").css("top"));
            $("#div_lrc").css("top", -1 * ((-1 * top) + 100) + "px");
        }
        function btn_down() {
            var top = parseInt($("#div_lrc").css("top"));
            if (top <= 0)
                $("#div_lrc").css("top", -1 * ((-1 * top) - 100) + "px");
        }

        //调整歌词位置的函数
        function btn_top() {
            var top = parseInt($("#div_lrc").css("top"));
            $("#div_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>

实例下载链接:https://download.csdn.net/download/a1455990364/10386136

有详细的注释

本文链接：https://blog.csdn.net/a1455990364/article/details/80162795

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

最简单的代码_yuanyuanlaile的博客-程序员秘密

在HTML页面中引入jQuery与highcharts库，代码如下：1.2. 4. &lt;www.oolaile.com &gt;结束5.

C++11 理解 (一) 之 auto与decltype的运用_yine的博客-程序员秘密

类型推导与auto关键字在标准C/C++，使用变量必须明确的指出其类型(强类型)。然而随着模板类型的出现以及模版元编程的技巧，指定类型，特别是函数定义明确的指定返回类型，就不容易表示。在这样的情况下，将中间结果存储与变量是一件困难的事情，可能会需要知道特定的元编程程序库的内部情况。C++11提供了两种方法缓解上述所遇到的困难。首先被有明确初始化的变量可以使用auto关键字。这会依据

virt a mate(vam)版本1.20.77.9介绍和下载_ddluck的博客-程序员秘密

谁是MeshedVR？MeshedVR是一家小型独立开发者，在即将到来的虚拟现实领域享有先进的最新技术。我们的第一个项目专注于推进角色模拟，而这项工作的一个自然出路就是虚拟现实性爱模拟器！因此，我们的Patreon将致力于利用我们开发的技术创建成人虚拟现实游戏，并继续推动尖端技术，为您带来最真实的性模拟器。Virt-a-Mate（简称VaM）是我们为实现这一目标而设计的第一个性模拟器项目。百度云豪华汉化整合集成舞蹈编导插件等vam1.20.77.9（不定期更新）下载山月记分享重要的运行Vi.

深入了解get/set方法_get set_木子川的博客-程序员秘密

get/set 方法顾名思义，就是一个获得，一个设置方法，它们主要是用来对一个类的私有域操作（私有属性），先看短程序。Father.javapackage inherit;public class Father { private String name; //私有属性姓名 public String getName() { //get方法 return name; } /**...

凛冬之翼---Class 'Think\Controller' not found in_风里追风的博客-程序员秘密

在Admin模块上写了类里面的函数然后马上通过PHPstorm运行，浏览器出现如下错误：这个错误让我非常痛苦无比，在网上也找了很多方法也不能解决。后来终于意识到我不能直接从phpstorm里面运行，因为直接运行的话运行路径是：http://localhost/APP/Application/Admin/Controller/TestController.class.php有没有发现这个运行...

Pycharm:Can‘t get remote credentials for deployment server的解决方案_不会爆冲不改名的博客-程序员秘密

最近跑的实验数据比较大，需要用到实验室服务器，所以研究了一下Pycharm怎么远程调用服务器端的python，踩了一些坑。网上的教程和踩坑的博客已经比较全面了，摸着石头过河，跌跌撞撞地解决了大多数问题。问题：Can't get remote credentials for deployment server问题描述：在python console这里可以正常连接到remote的python，但是想要运行一个本地的py文件的时候，会报错Can't get remote credentials fo