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

     

  • 相关阅读:
    easyExcel入门
    UML-从需求到设计--迭代进化
    UML-操作契约总结
    102. Binary Tree Level Order Traversal
    98. Validate Binary Search Tree
    95. Unique Binary Search Trees II
    96. Unique Binary Search Trees
    94. Binary Tree Inorder Traversal
    84. Largest Rectangle in Histogram
    92. Reverse Linked List II
  • 原文地址:https://www.cnblogs.com/f-y-z/p/5772499.html
Copyright © 2011-2022 走看看