zoukankan      html  css  js  c++  java
  • js播放音乐显示每句歌词

    //本文以薛之谦的演员为例,文中的266097259.lrc为演员的歌词,本人为初学者,如有不好的地方,请指出

    //HTML文件

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js">
    </script>
    </head>
    <body>
    <audio id="player" src="yanyuan.mp3" controls="controls"></audio>
    <div id="div"></div>
    <script src="main.js"></script>
    </body>
    </html>

    //JS文件

    (function () {
    var player=document.querySelector("#player");
    var div=document.querySelector("#div");
    var lrc=null;
    function playing(lrcString) {
    var lrcObject = {};
    var lines = lrcString.split(" ");
    var p = /[(d{2}):(d{2}).d{2}](.+)/;
    for (var i = 0; i < lines.length; i++) {
    var t=p.exec(lines[i]);
    if(t) {
    var min = parseInt(t[1]);
    var sec = parseInt(t[2]);
    var c=t[3];
    var time = min * 60 + sec;
    lrcObject[time] = c;
    }
    }
    return lrcObject;
    }


    $.get("266097259.lrc").done(function (data) {
    lrc = playing(data);
    });


    setInterval(function () {
    if (lrc) {
    var content = lrc[Math.floor(player.currentTime)];
    if (content) {

    div.innerHTML = content;
    }
    }
    }, 1000);
    })();

     

  • 相关阅读:
    Windows7防火墙服务无法启用怎么办
    asp.net实现md5加密方法详解
    php去除换行(回车换行)的方法
    MySQL函数大全
    php codebase生成随机数
    Tensorflow 的Word2vec demo解析
    深度学习课程部分资料整理
    稀疏矩阵表示
    Faster-rnnlm代码分析3
    Faster-rnnlm代码分析2
  • 原文地址:https://www.cnblogs.com/f-y-z/p/5772499.html
Copyright © 2011-2022 走看看