原生js实现歌词本

时间 2019-12-02

原文原文链接

/**
 * Created by Administrator on 2017/4/30.
 */
// 1.       歌词在一个矩形区域内显示
// 2.       当前歌词行高亮
// 3.       在矩形显示区域中部固定位置显示当前歌词行
// 4.       当前歌词行切换到下一行时，下一行歌词高亮，并逐步移动到当前歌词行位置
// 5.       初始显示时歌词第一行顶住显示区域，当前歌词行未到达显示矩形区域的中部固定高亮位置时，不须要移动
// 6.       歌词尾行到达显示区域后，不须要移动
// 7.       用户可经过鼠标或者滚动条滚动歌词
// 8.       用户滚动歌词后，若当前歌词行被移动到矩形显示区域外，下一行歌词需定位到当前歌词行位置

<!DOCTYPE HTML><html lang=zh-cn><head>   <meta charset=utf-8>   <title>滚动歌词demo</title>   <style>      * {         margin: 0px;         padding: 0px;      }      body {         width: 100%;         height: 100%;         overflow: hidden;      }      .box {         margin: 100px auto 0 auto;         width: 400px;      }      .lrc {         position: relative;         width: 300px;         height: 200px;         overflow-y: auto;         background-color: #ccc      }      .lrc li {         display: block;         padding: 5px 0;      }      .z-crt {         color: #0f0;      }      .ctrl {         margin: 0 auto;         padding-left: 100px;         width: 300px;      }   </style></head><body><div class="box">   <audio id="bgMusic" src="yichangyouxiyichagmeng.mp3"></audio></div><div class="box" id="box">   <ul class="lrc" id="lrc">   </ul></div><script language="javascript">   function playMusic() {// 经解析后的歌词      var __lis = [{"offset": 500, "text": "一场游戏一场梦"},         {"offset": 1000, "text": "演唱：王杰"},         {"offset": 3000, "text": "不要谈什么分离"},         {"offset": 6000, "text": "我不会由于这样而哭泣"},         {"offset": 8000, "text": "那只是昨夜的一场梦而已"},         {"offset": 9000, "text": "不要说愿不肯意"},         {"offset": 12000, "text": "我不会由于这样而在乎"},         {"offset": 14000, "text": "那只是昨夜的一场游戏"},         {"offset": 15000, "text": "那只是一场游戏一场梦"},         {"offset": 18000, "text": "虽然你影子还出现我眼里"},         {"offset": 24000, "text": "在个人歌声中早已没有你"},         {"offset": 25000, "text": "只是一场游戏一场梦"},         {"offset": 26000, "text": "不要把残缺的爱留在这里"},         {"offset": 30000, "text": "在俩我的的世界里不应有你"},         {"offset": 32000, "text": "oh.为何作别离说什么在一块儿"},         {"offset": 33000, "text": "现在虽然没有你我仍是我本身"},         {"offset": 35000, "text": "说什么此情永不愈"},         {"offset": 36000, "text": "说什么我爱你"},         {"offset": 38000, "text": "现在依然没有你我仍是我本身"},         {"offset": 39000, "text": "那只是一场游戏一场梦"},         {"offset": 40000, "text": "虽然你影子还出现我眼里"},         {"offset": 42000, "text": "在个人歌声中早已没有你"},         {"offset": 44000, "text": "只是一场游戏一场梦"},         {"offset": 46000, "text": "不要把残缺的爱留在这里"},         {"offset": 48000, "text": "在俩我的的世界里不应有你"},         {"offset": 50000, "text": "oh.为何作别离说什么在一块儿"},         {"offset": 52000, "text": "说什么此情永不愈"},         {"offset": 54000, "text": "说什么我爱你"},         {"offset": 56000, "text": "现在依然没有你我仍是我本身"},         {"offset": 58000, "text": "为何作别离说什么在一块儿"},         {"offset": 60000, "text": "现在虽然没有你我仍是我本身"},         {"offset": 62000, "text": "说什么此情永不愈"},         {"offset": 64000, "text": "说什么我爱你"},         {"offset": 66000, "text": "现在依然没有你我仍是我本身"}];      var __eul = document.getElementById("lrc");      (function () {         for (var i = 0; i < __lis.length; i++) {            var eli = document.createElement("li");            eli.innerText = __lis[i].text;            __eul.appendChild(eli);         }      })();      var __freq = 30; // 滚动频率（ms）      var __fraction = 2 / 5; // 高亮显示行在歌词显示区域中的固定位置百分比      /**       * 当前歌词行（lineno）滚动       */      var __go = function (_lineno) {         var _time;         if (_lineno === 0) {            _time = __lis[_lineno].offset;         } else {            _time = __lis[_lineno].offset - __lis[_lineno - 1].offset;         }         var _timer = setTimeout(__go.bind(this, _lineno + 1), _time);         // 高亮下一行歌词         if (_lineno > 0) {            __eul.children[_lineno - 1].setAttribute("class", "");         }         var _ep = __eul.children[_lineno];         _ep.setAttribute("class", "z-crt");         // 知足需求5，6         var _scrollTop;         if (_ep.offsetTop < __eul.clientHeight * __fraction) {            _scrollTop = 0;         } else if (_ep.offsetTop > (__eul.scrollHeight - __eul.clientHeight * (1 - __fraction))) {            _scrollTop = __eul.scrollHeight - __eul.clientHeight;         } else {            _scrollTop = _ep.offsetTop - __eul.clientHeight * __fraction;         }         // 如用户拖动滚动条致使当前显示行超出显示区域范围，下一行直接定位到当前显示行         if (__eul.scrollTop > (_scrollTop + __eul.clientHeight * __fraction)            || (__eul.scrollTop + __eul.clientHeight * __fraction) < _scrollTop) {            __eul.scrollTop = _scrollTop;         } else { // 单行滚动            // 获取滚动步长            var _step = Math.ceil(Math.abs(__eul.scrollTop - _scrollTop) / (_time / __freq));            __scroll(__eul.scrollTop, _scrollTop, _step);         }      };      /**       * 歌词单行滚动实现       */      __scroll = function (_crt, _dst, _step) {         if (Math.abs(_crt - _dst) < _step) {            return;         }         if (_crt < _dst) {            __eul.scrollTop += _step;            _crt += _step;         } else {            __eul.scrollTop -= _step;            _crt -= _step;         }         setTimeout(__scroll.bind(this, _crt, _dst, _step), __freq);      };      __go(0);   }   setTimeout(playMusic, 36000);   //背景音乐播放/* function audio3() {      var a = document.getElementById('bgMusic');      a.play();   }   audio3();*/</script></body></html>