原生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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。