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);
    })();

     

  • 相关阅读:
    巡回赛 -- 简单的拓扑排序
    最简单的拓扑排序
    blockhouses
    部分和问题
    jfinal路由简单解析
    python mysql
    Gradle--ubuntu
    解决ssh登录后闲置时间过长而断开连接
    业界有很多MQ产品
    avalon---qunar ued
  • 原文地址:https://www.cnblogs.com/f-y-z/p/5772499.html
Copyright © 2011-2022 走看看