{"id":175,"date":"2024-04-28T21:53:23","date_gmt":"2024-04-28T13:53:23","guid":{"rendered":"http:\/\/www.shifengzhi.asia\/?p=175"},"modified":"2024-04-29T21:37:20","modified_gmt":"2024-04-29T13:37:20","slug":"%e5%ae%9e%e6%88%98%e5%a4%8d%e5%88%bb%e6%ad%8c%e8%af%8d%e6%bb%9a%e5%8a%a8%e6%95%88%e6%9e%9c","status":"publish","type":"post","link":"https:\/\/boki.shifengzhi.top\/?p=175","title":{"rendered":"[\u5b9e\u6218]\u590d\u523b\u6b4c\u8bcd\u6eda\u52a8\u6548\u679c"},"content":{"rendered":"

\u5148\u770b\u6548\u679c\uff0c\u5982\u4e0b\uff1a
\n

\"\"<\/div>
\n\u4e0b\u9762\u8fdb\u884c\u6b63\u9898\uff0c\u7740\u624b\u5b9e\u8df5<\/p>\n

\u7d20\u6750<\/h3>\n

\u4e8b\u5148\u51c6\u5907\u597d\u591a\u6750\u6599\u6709\u4e00\u4e2a mp3 \u7684\u97f3\u4e50\u6587\u4ef6\uff0c\u548c\u4e00\u4e2a\u914d\u5957\u7684\u6b4c\u8bcd\u5b57\u7b26\u4e32\uff08\u653e\u5728 data.js \u4e2d\uff0c\u6b4c\u8bcd\u592a\u957f\u4e86\u5206\u51fa\u6765\u653e\uff0c\u5982\u4e0b\uff1a\uff09<\/p>\n

\/\/ data.js\nlet lrc = `[00:01.06]\u96be\u5ff5\u7684\u7ecf\n[00:03.95]\u6f14\u5531\uff1a\u5468\u534e\u5065\n[00:06.78]\n[00:30.96]\u7b11\u4f60\u6211\u6789\u82b1\u5149\u5fc3\u8ba1\n[00:34.15]\u7231\u7ade\u9010\u955c\u82b1\u90a3\u7f8e\u4e3d\n[00:36.75]\u6015\u5e78\u8fd0\u4f1a\u8f6c\u773c\u8fdc\u901d\n[00:39.32]\u4e3a\u8d2a\u55d4\u559c\u6076\u6012\u7740\u8ff7\n[00:41.99]\u8d23\u4f60\u6211\u592a\u8d2a\u529f\u604b\u52bf\n[00:44.48]\u602a\u5927\u5730\u4f17\u751f\u592a\u7f8e\u4e3d\n[00:47.00]\u6094\u65e7\u65e5\u592a\u6267\u4fe1\u7ea6\u8a93\n[00:49.66]\u4e3a\u60b2\u6b22\u54c0\u6028\u5992\u7740\u8ff7\n[00:52.56]\u554a \u820d\u4e0d\u5f97\u7480\u707f\u4fd7\u4e16\n[00:57.66]\u554a \u8eb2\u4e0d\u5f00\u75f4\u604b\u7684\u6b23\u6170\n[01:02.86]\u554a \u627e\u4e0d\u5230\u8272\u76f8\u4ee3\u66ff\n[01:08.09]\u554a \u53c2\u4e00\u751f\u53c2\u4e0d\u900f\u8fd9\u6761\u96be\u9898\n[01:13.15]\u541e\u98ce\u543b\u96e8\u846c\u843d\u65e5\u672a\u66fe\u5f77\u5fa8\n[01:15.73]\u6b3a\u5c71\u8d76\u6d77\u8df5\u96ea\u5f84\u4e5f\u672a\u7edd\u671b\n[01:18.23]\u62c8\u82b1\u628a\u9152\u504f\u6298\u715e\u4e16\u4eba\u60c5\u72c2\n[01:20.90]\u51ed\u8fd9\u4e24\u773c\u4e0e\u767e\u81c2\u6216\u5343\u624b\u4e0d\u80fd\u9632\n[01:23.76]\u5929\u9614\u9614\u96ea\u6f2b\u6f2b\u5171\u8c01\u540c\u822a\n[01:26.09]\u8fd9\u6c99\u6eda\u6eda\u6c34\u76b1\u76b1\u7b11\u7740\u6d6a\u8361\n[01:28.68]\u8d2a\u6b22\u4e00\u523b\u504f\u6559\u90a3\u5973\u513f\u60c5\u957f\u57cb\u846c\n[01:32.38]\n[01:34.09]\u541e\u98ce\u543b\u96e8\u846c\u843d\u65e5\u672a\u66fe\u5f77\u5fa8\n[01:36.50]\u6b3a\u5c71\u8d76\u6d77\u8df5\u96ea\u5f84\u4e5f\u672a\u7edd\u671b\n[01:39.07]\u62c8\u82b1\u628a\u9152\u504f\u6298\u715e\u4e16\u4eba\u60c5\u72c2\n[01:41.69]\u51ed\u8fd9\u4e24\u773c\u4e0e\u767e\u81c2\u6216\u5343\u624b\u4e0d\u80fd\u9632\n[01:44.68]\u5929\u9614\u9614\u96ea\u6f2b\u6f2b\u5171\u8c01\u540c\u822a\n[01:46.93]\u8fd9\u6c99\u6eda\u6eda\u6c34\u76b1\u76b1\u7b11\u7740\u6d6a\u8361\n[01:49.54]\u8d2a\u6b22\u4e00\u523b\u504f\u6559\u90a3\u5973\u513f\u60c5\u957f\u57cb\u846c\n[01:53.41]\n[02:15.45]\u7b11\u4f60\u6211\u6789\u82b1\u5149\u5fc3\u8ba1\n[02:18.53]\u7231\u7ade\u9010\u955c\u82b1\u90a3\u7f8e\u4e3d\n[02:21.14]\u6015\u5e78\u8fd0\u4f1a\u8f6c\u773c\u8fdc\u901d\n[02:23.76]\u4e3a\u8d2a\u55d4\u559c\u6076\u6012\u7740\u8ff7\n[02:26.43]\u8d23\u4f60\u6211\u592a\u8d2a\u529f\u604b\u52bf\n[02:28.98]\u602a\u5927\u5730\u4f17\u751f\u592a\u7f8e\u4e3d\n[02:31.60]\u6094\u65e7\u65e5\u592a\u6267\u4fe1\u7ea6\u8a93\n[02:34.26]\u4e3a\u60b2\u6b22\u54c0\u6028\u5992\u7740\u8ff7\n[02:36.90]\u554a \u820d\u4e0d\u5f97\u7480\u707f\u4fd7\u4e16\n[02:42.04]\u554a \u8eb2\u4e0d\u5f00\u75f4\u604b\u7684\u6b23\u6170\n[02:47.34]\u554a \u627e\u4e0d\u5230\u8272\u76f8\u4ee3\u66ff\n[02:52.52]\u554a \u53c2\u4e00\u751f\u53c2\u4e0d\u900f\u8fd9\u6761\u96be\u9898\n[02:57.47]\u541e\u98ce\u543b\u96e8\u846c\u843d\u65e5\u672a\u66fe\u5f77\u5fa8\n[03:00.05]\u6b3a\u5c71\u8d76\u6d77\u8df5\u96ea\u5f84\u4e5f\u672a\u7edd\u671b\n[03:02.64]\u62c8\u82b1\u628a\u9152\u504f\u6298\u715e\u4e16\u4eba\u60c5\u72c2\n[03:05.27]\u51ed\u8fd9\u4e24\u773c\u4e0e\u767e\u81c2\u6216\u5343\u624b\u4e0d\u80fd\u9632\n[03:08.22]\u5929\u9614\u9614\u96ea\u6f2b\u6f2b\u5171\u8c01\u540c\u822a\n[03:10.49]\u8fd9\u6c99\u6eda\u6eda\u6c34\u76b1\u76b1\u7b11\u7740\u6d6a\u8361\n[03:13.06]\u8d2a\u6b22\u4e00\u523b\u504f\u6559\u90a3\u5973\u513f\u60c5\u957f\u57cb\u846c\n[03:18.45]\u541e\u98ce\u543b\u96e8\u846c\u843d\u65e5\u672a\u66fe\u5f77\u5fa8\n[03:20.90]\u6b3a\u5c71\u8d76\u6d77\u8df5\u96ea\u5f84\u4e5f\u672a\u7edd\u671b\n[03:23.54]\u62c8\u82b1\u628a\u9152\u504f\u6298\u715e\u4e16\u4eba\u60c5\u72c2\n[03:26.21]\u51ed\u8fd9\u4e24\u773c\u4e0e\u767e\u81c2\u6216\u5343\u624b\u4e0d\u80fd\u9632\n[03:29.07]\u5929\u9614\u9614\u96ea\u6f2b\u6f2b\u5171\u8c01\u540c\u822a\n[03:31.32]\u8fd9\u6c99\u6eda\u6eda\u6c34\u76b1\u76b1\u7b11\u7740\u6d6a\u8361\n[03:33.92]\u8d2a\u6b22\u4e00\u523b\u504f\u6559\u90a3\u5973\u513f\u60c5\u957f\u57cb\u846c\n[03:39.32]\u541e\u98ce\u543b\u96e8\u846c\u843d\u65e5\u672a\u66fe\u5f77\u5fa8\n[03:41.84]\u6b3a\u5c71\u8d76\u6d77\u8df5\u96ea\u5f84\u4e5f\u672a\u7edd\u671b\n[03:44.38]\u62c8\u82b1\u628a\u9152\u504f\u6298\u715e\u4e16\u4eba\u60c5\u72c2\n[03:47.04]\u51ed\u8fd9\u4e24\u773c\u4e0e\u767e\u81c2\u6216\u5343\u624b\u4e0d\u80fd\u9632\n[03:49.99]\u5929\u9614\u9614\u96ea\u6f2b\u6f2b\u5171\u8c01\u540c\u822a\n[03:52.20]\u8fd9\u6c99\u6eda\u6eda\u6c34\u76b1\u76b1\u7b11\u7740\u6d6a\u8361\n[03:54.89]\u8d2a\u6b22\u4e00\u523b\u504f\u6559\u90a3\u5973\u513f\u60c5\u957f\u57cb\u846c\n[04:00.28]\u541e\u98ce\u543b\u96e8\u846c\u843d\u65e5\u672a\u66fe\u5f77\u5fa8\n[04:02.68]\u6b3a\u5c71\u8d76\u6d77\u8df5\u96ea\u5f84\u4e5f\u672a\u7edd\u671b\n[04:05.25]\u62c8\u82b1\u628a\u9152\u504f\u6298\u715e\u4e16\u4eba\u60c5\u72c2\n[04:07.90]\u51ed\u8fd9\u4e24\u773c\u4e0e\u767e\u81c2\u6216\u5343\u624b\u4e0d\u80fd\u9632\n[04:10.85]\u5929\u9614\u9614\u96ea\u6f2b\u6f2b\u5171\u8c01\u540c\u822a\n[04:13.08]\u8fd9\u6c99\u6eda\u6eda\u6c34\u76b1\u76b1\u7b11\u7740\u6d6a\u8361\n[04:15.75]\u8d2a\u6b22\u4e00\u523b\u504f\u6559\u90a3\u5973\u513f\u60c5\u957f\u57cb\u846c\n[04:19.48]`;<\/code><\/pre>\n
\u754c\u9762\uff08HTML\uff09<\/h3>\n
\u7b80\u5355\u5199\u4e00\u4e0b\u5c31\u597d\uff0c\u64ad\u653e\u5668\u653e\u4e0a\u9762\uff0c\u6b4c\u8bcd\u653e\u4e0b\u9762\u66f4\u7b80\u5355\uff0c\u540e\u9762\u5199CSS\u4e5f\u66f4\u7b80\u5355
\n\u8fd9\u91cc\u6211\u7528 link \u8bbe\u7f6e\u4e86\u4e00\u4e2a\u7f51\u6613\u4e91\u7684\u7f51\u7ad9\u56fe\u6807\uff0c\u4e0d\u5199\u4e5f\u53ef\u4ee5<\/p>\n
\/\/ index.html\n<!DOCTYPE html>\n<html lang="en">\n<head>\n  <meta charset="UTF-8">\n  <meta name="viewport" content="width=device-width, initial-scale=1.0">\n  <title>\u6b4c\u8bcd\u6eda\u52a8<\/title>\n  <link rel="shortcut icon" href="https:\/\/s1.music.126.net\/style\/favicon.ico?v20180823" type="image\/x-icon">\n  <link rel="stylesheet" href=".\/css\/index.css">\n<\/head>\n<body>\n  <div class="container">\n    <ul class="lrc-list"><\/ul>\n  <\/div>\n  <audio controls src=".\/assets\/music.mp3"><\/audio>\n\n  <script src=".\/js\/data.js"><\/script>\n  <script src=".\/js\/index.js"><\/script>\n<\/body>\n<\/html><\/code><\/pre>\n
\u6837\u5f0f\uff08CSS\uff09<\/h3>\n
\u4e5f\u662f\u4e00\u4e9b\u57fa\u672c\u7684\u7b80\u5355\u6837\u5f0f\uff0c\u4e0d\u7406\u89e3\u53ef\u4ee5\u4e00\u8fb9\u5199\u4e00\u8fb9\u770b\u6548\u679c\uff0c\u4e0d\u77e5\u9053\u7684\u5c31\u5148\u4e0d\u5199\uff0c\u7b49\u9879\u76ee\u5168\u90e8\u5199\u5b8c\u518d\u56de\u5934\u6765\u5199<\/p>\n
\/\/ index.css\n* {\n  margin: 0;\n  padding: 0;\n}\nbody {\n  background: #000;\n  color: #666;\n  text-align: center;\n}\naudio {\n  width: 500px;\n  margin: 35px 0;\n}\n.container {\n  margin-top: 40px;\n  height: 500px;\n  overflow: hidden;\n}\n.container ul {\n  list-style: none;\n  transition: 0.6s;\n}\n.container li {\n  font-size: 17px;\n  height: 30px;\n  line-height: 30px;\n  transition: 0.3s;\n}\n.container li.active {\n  color: #fff;\n  transform: scale(1.3);\n}<\/code><\/pre>\n
\u6548\u679c\u5b9e\u73b0\uff08JS\uff09<\/h3>\n
\u5177\u4f53\u8bf4\u660e\u90fd\u5199\u5728\u4ee3\u7801\u6ce8\u91ca\u91cc\u4e86\uff0c\u8fd9\u91cc\u76f4\u63a5\u4e0a\u4ee3\u7801<\/p>\n
\/\/ index.js\n\/**\n * \u89e3\u6790\u6b4c\u8bcd\u5b57\u7b26\u4e32\n * \u5f97\u5230\u4e00\u4e2a\u6b4c\u8bcd\u5bf9\u8c61\u6570\u7ec4\n * @returns [{\n *    time: \u5f00\u59cb\u65f6\u95f4\n      words: \u6b4c\u8bcd\u5185\u5bb9\n * },]\n *\/\nfunction parseLrc() {\n  let lines = lrc.split('\\n')\n  let result = []\n  lines.map(line => {\n    let [timeStr, content] = line.split(']')\n    timeStr = timeStr.substring(1)\n    let obj = {\n      time: parseTime(timeStr),\n      words: content\n    }\n    result.push(obj)\n  })\n  return result\n}\n\n\/**\n * \u5c06\u65f6\u95f4\u5b57\u7b26\u4e32\u8f6c\u6362\u4e3a\u6570\u5b57\uff08\u79d2\uff09\n * @param {string} timeStr \u65f6\u95f4\u5b57\u7b26\u4e32\n * @returns {number} \u65f6\u95f4\u79d2\u6570\n *\/\nfunction parseTime(timeStr) {\n  let [min, sec] = timeStr.split(':')\n  return +min * 60 + +sec \/\/ \u6bd4\u540e\u9762\u8fd9\u4e2a\u4f20\u7edf\u5199\u6cd5\u9ad8\u7ea7\u70b9 parseInt(min) * 60 + parseInt(sec)\n}\n\nlet lrcData = parseLrc()\n\n\/\/ \u83b7\u53d6\u9700\u8981\u7684 dom\nlet doms = {\n  audio: document.querySelector('audio'),\n  container: document.querySelector('.container'),\n  ul: document.querySelector('.container ul'),\n}\n\n\/**\n * \u8ba1\u7b97\u51fa\uff0c\u5728\u5f53\u524d\u64ad\u653e\u5668\u64ad\u653e\u5230\u7b2c\u51e0\u79d2\u7684\u60c5\u51b5\u4e0b\n * lrcData\u6570\u7ec4\u4e2d\uff0c\u5e94\u8be5\u9ad8\u4eae\u663e\u793a\u7684\u6b4c\u8bcd\u4e0b\u6807\n * \u5982\u679c\u6ca1\u6709\u4efb\u4f55\u4e00\u53e5\u6b4c\u8bcd\u9700\u8981\u663e\u793a\uff0c\u5219\u5f97\u5230-1\n * @returns {number} \u5f53\u524d\u64ad\u653e\u65f6\u95f4\u5bf9\u5e94\u7684\u6b4c\u8bcd\u7d22\u5f15\n *\/\nfunction findIndex() {\n  let curTime = doms.audio.currentTime\n  for (let i = 0; i < lrcData.length; i++) {\n    if (curTime < lrcData[i].time) {\n      return i - 1\n    }\n  }\n  \/\/ \u627e\u904d\u4e86\u90fd\u6ca1\u627e\u5230\uff08\u8bf4\u660e\u64ad\u653e\u5230\u6700\u540e\u4e00\u53e5\uff09\u8fd4\u56de\u6700\u540e\u4e00\u53e5\u7684\u7d22\u5f15\n  return lrcData.length - 1\n}\n\n\/* \u754c\u9762 *\/\n\n\/**\n * \u521b\u5efa\u6b4c\u8bcd\u5143\u7d20 li\n *\/\nfunction createLrcElements() {\n  \/\/ \u521b\u5efa\u6587\u6863\u7247\u6bb5\n  let frag = document.createDocumentFragment()\n  lrcData.map(item => {\n    let li = document.createElement('li')\n    li.textContent = item.words\n    frag.appendChild(li)\n  })\n  doms.ul.appendChild(frag)\n}\n\ncreateLrcElements()\n\n\/\/ \u5bb9\u5668\u9ad8\u5ea6\nlet containerHeight = doms.container.clientHeight\n\/\/ \u6b4c\u8bcd\u5143\u7d20\u9ad8\u5ea6\nlet liHeight = doms.ul.children[0].clientHeight\n\/\/ \u6700\u5927\u504f\u79fb\u91cf = ul \u9ad8\u5ea6 - \u5bb9\u5668\u9ad8\u5ea6\nlet maxOffset = doms.ul.clientHeight - containerHeight\n\n\/**\n * \u8bbe\u7f6e ul \u5143\u7d20\u7684\u504f\u79fb\u91cf\n *\/\nfunction setOffset() {\n  let index = findIndex()\n  \/\/ \u504f\u79fb\u91cf = \u6b4c\u8bcd\u5143\u7d20\u9ad8\u5ea6 * \u7d22\u5f15\u7b2c\u51e0\u4e2a + \u6b4c\u8bcd\u5143\u7d20\u9ad8\u5ea6\u7684\u4e00\u534a - \u5bb9\u5668\u9ad8\u5ea6\u7684\u4e00\u534a\n  let offset = liHeight * index + liHeight \/ 2 - containerHeight \/ 2\n  if(offset < 0) offset = 0\n  if(offset > maxOffset) offset = maxOffset\n  doms.ul.style.transform = `translateY(-${offset}px)`\n  \/\/ \u53bb\u6389\u4e4b\u524d\u7684 li \u7684 active \u6837\u5f0f\n  let li = document.querySelector('.active')\n  li?.classList.remove('active')\n  \/\/ \u8bbe\u7f6e\u5f53\u524d\u7684 li \u7684 active \u6837\u5f0f\n  li = doms.ul.children[index]\n  li?.classList.add('active')\n}\n\n\/\/ \u64ad\u653e\u65f6\u95f4\u6539\u53d8\u8c03\u7528 setOffset \u91cd\u65b0\u8bbe\u7f6e\u504f\u79fb\u91cf\ndoms.audio?.addEventListener('timeupdate', setOffset)<\/code><\/pre>\n
PS:\u8fd9\u91cc\u5176\u5b9e\u6709\u4e2a\u5c0f\u7591\u95ee<\/p>\n
if(offset < 0) offset = 0\nif(offset > maxOffset) offset = maxOffset<\/code><\/pre>\n
\u4e3a\u4ec0\u4e48\u4e0d\u53ef\u4ee5\u5199\u6210<\/p>\n
(offset < 0) && (offset = 0)\n(offset > maxOffset) && (offset = maxOffset)<\/code><\/pre>\n
\u6709\u77e5\u9053\u539f\u56e0\u7684\u6b22\u8fce\u7559\u8a00\u7ed9\u6211<\/p>\n
\n
\u8fd9\u6837\uff0c\u97f3\u4e50\u8f6f\u4ef6\u4e2d\u6b4c\u8bcd\u6eda\u52a8\u6548\u679c\u5c31\u5b9e\u73b0\u4e86\uff0c\u770b\u5b8c\u4e86\u6587\u7ae0\uff0c\u4e5f\u8d76\u5feb\u53bb\u52a8\u624b\u5b9e\u8df5\u4e00\u4e0b\u5427\uff01<\/p>\n","protected":false},"excerpt":{"rendered":"
\u5148\u770b\u6548\u679c\uff0c\u5982\u4e0b\uff1a \u4e0b\u9762\u8fdb\u884c\u6b63\u9898\uff0c\u7740\u624b\u5b9e\u8df5 \u7d20\u6750 \u4e8b\u5148\u51c6\u5907\u597d\u591a\u6750\u6599\u6709\u4e00\u4e2a mp3 \u7684\u97f3\u4e50\u6587\u4ef6\uff0c\u548c\u4e00\u4e2a\u914d\u5957\u7684\u6b4c\u8bcd\u5b57 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[21],"class_list":["post-175","post","type-post","status-publish","format-standard","hentry","category-5","tag-21"],"_links":{"self":[{"href":"https:\/\/boki.shifengzhi.top\/index.php?rest_route=\/wp\/v2\/posts\/175","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/boki.shifengzhi.top\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/boki.shifengzhi.top\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/boki.shifengzhi.top\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/boki.shifengzhi.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=175"}],"version-history":[{"count":2,"href":"https:\/\/boki.shifengzhi.top\/index.php?rest_route=\/wp\/v2\/posts\/175\/revisions"}],"predecessor-version":[{"id":179,"href":"https:\/\/boki.shifengzhi.top\/index.php?rest_route=\/wp\/v2\/posts\/175\/revisions\/179"}],"wp:attachment":[{"href":"https:\/\/boki.shifengzhi.top\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=175"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/boki.shifengzhi.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=175"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/boki.shifengzhi.top\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=175"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}