{"id":850,"date":"2024-02-24T16:39:41","date_gmt":"2024-02-24T08:39:41","guid":{"rendered":"https:\/\/fanyiming.life\/?p=850"},"modified":"2025-12-21T01:06:04","modified_gmt":"2025-12-20T17:06:04","slug":"%e5%88%bb%e8%88%9f%e6%b1%82%e5%89%91","status":"publish","type":"post","link":"https:\/\/fanyiming.life\/?p=850","title":{"rendered":"\u523b\u821f\u6c42\u5251"},"content":{"rendered":"\n<audio id=\"audio-player\" controls>\n    \n    \u60a8\u7684\u6d4f\u89c8\u5668\u4e0d\u652f\u6301\u97f3\u9891\u64ad\u653e\u3002\n<\/audio>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>\u539f\u672c\u4e5f\u6709\u4e3e\u4e16\u65e0\u53cc\u7075\u9b42<\/p>\n\n\n\n<p>\u4e00\u76f4\u5230\u843d\u5730\u751f\u6839\u4e8e\u5dcd\u5ce8\u7231\u6068<\/p>\n\n\n\n<p>\u4e5f\u5199\u8fc7\u58ee\u9614\u7684\u60c5\u8bd7\uff0c\u9001\u964c\u751f\u7231\u4eba<\/p>\n\n\n\n<p>\u602a\u6211\u7518\u613f\uff0c\u4fef\u9996\u79f0\u81e3<\/p>\n\n\n\n<p>\u4f60\u662f\u6211\u5e74\u5c11\u6c42\u5251\u65f6\u523b\u7684\u821f<sup data-fn=\"ac7d45d4-92c9-4131-ab15-a661d1bfac9a\" class=\"fn\"><a href=\"#ac7d45d4-92c9-4131-ab15-a661d1bfac9a\" id=\"ac7d45d4-92c9-4131-ab15-a661d1bfac9a-link\">1<\/a><\/sup><\/p>\n\n\n\n<p>\u8f7d\u7740\u4e00\u751f\u7684\u5e73\u51e1\u7f8e\u68a6<\/p>\n\n\n\n<p>\u6401\u6d45\u5728\u5cb8\u5934<\/p>\n\n\n\n<p>\u4e5f\u7b97\u770b\u8fc7\u4e86\u8bb8\u591a\uff0c\u661f\u6d77\u82cd\u7a79<\/p>\n\n\n\n<p>\u5374\u5404\u81ea\u5954\u6d41<\/p>\n<cite>\u2014\u2014\u9ec4\u8bd7\u6276\u300a\u4f60\u662f\u6211\u5e74\u5c11\u6c42\u5251\u65f6\u523b\u7684\u821f\u300b<\/cite><\/blockquote>\n\n\n<ol class=\"wp-block-footnotes\"><li id=\"ac7d45d4-92c9-4131-ab15-a661d1bfac9a\">\u559c\u6b22\u4e00\u4e2a\u4eba\u5c31\u50cf\u523b\u821f\u6c42\u5251\uff0c\u4e3a\u4e86Ta\u60f3\u8981\u6539\u53d8\u81ea\u5df1\uff0c\u53ef\u5f53\u81ea\u5df1\u771f\u7684\u6539\u53d8\u4e86\uff0c\u90a3\u4eba\u65e9\u5c31\u5404\u81ea\u5954\u6d41\u800c\u53bb\u4e86\u3002 <a href=\"#ac7d45d4-92c9-4131-ab15-a661d1bfac9a-link\" aria-label=\"\u8df3\u8f6c\u5230\u811a\u6ce8\u5f15\u7528 1\">\u21a9\ufe0e<\/a><\/li><\/ol>\n\n\n<details class=\"wp-block-details is-layout-flow wp-block-details-is-layout-flow\"><summary>\u5b8c\u6574\u6b4c\u8bcd<\/summary>\n<div id=\"lyrics-container\" style=\"max-height: 350px;border: 0px solid #ccc;padding: 10px;margin-top: 10px;position: relative\">\n    <ul id=\"lyrics\"><\/ul>\n<\/div>\n\n\ndocument.addEventListener(&#8216;DOMContentLoaded&#8217;, async function () {\n    const audio = document.getElementById(&#8216;audio-player&#8217;);\n    const lyricsContainer = document.getElementById(&#8216;lyrics&#8217;);\n    const container = document.getElementById(&#8216;lyrics-container&#8217;);\n    const lyricsFile = &#8216;https:\/\/fanym.oss-cn-beijing.aliyuncs.com\/wp-content\/uploads\/2024\/09\/nishiwonianshaoqiujianshikedezhou.lrc&#8217;;\n    let currentIndex = 0;\n    let lyrics = [];\n    let isUserScrolling = false;\n    let scrollTimeout;\n\n    const lrcText = await fetchLyrics(lyricsFile);\n    parseLRC(lrcText);\n\n    function fetchLyrics(url) {\n        return fetch(url).then(response =&gt; response.text());\n    }\n\n    function parseLRC(lrcText) {\n        const lines = lrcText.split(&#8216;\\n&#8217;);\n        lyrics = lines.map(line =&gt; {\n            const timeMatch = line.match(\/\\[(\\d{2}):(\\d{2})\\.(\\d{1,2})\\]\/);\n            if (timeMatch) {\n                const minutes = parseInt(timeMatch[1], 10);\n                const seconds = parseInt(timeMatch[2], 10);\n                const milliseconds = parseInt(timeMatch[3].padEnd(2, &#8216;0&#8217;), 10);\n                const timeInSeconds = minutes * 60 + seconds + milliseconds \/ 100;\n                const lyricText = line.replace(\/\\[.*?\\]\/g, &#8221;).trim();\n                if(lyricText)  return { time: timeInSeconds, text: lyricText };\n            }\n            return null;\n        }).filter(item =&gt; item !== null);\n        renderLyrics();\n    }\n\n    function renderLyrics() {\n        const fragment = document.createDocumentFragment();\n        lyrics.forEach((lyric, index) =&gt; {\n            const li = document.createElement(&#8216;li&#8217;);\n            li.textContent = lyric.text;\n            if (lyric.time !== null) {\n                li.dataset.time = lyric.time.toString();\n                li.addEventListener(&#8216;click&#8217;, () =&gt; {\n                    const clickedLi = event.target;\n                    const clickedTime = parseFloat(clickedLi.dataset.time);\n                    audio.currentTime = clickedTime;\n                    const clickedIndex = Array.from(document.querySelectorAll(&#8216;#lyrics li&#8217;)).indexOf(clickedLi);\n                    highlightLyric(clickedLi);\n                    scrollToLyric(clickedIndex);\n                });\n            }\n            fragment.appendChild(li);\n        });\n        lyricsContainer.innerHTML = &#8221;;\n        lyricsContainer.appendChild(fragment);\n    }\n\n    function synchronizeLyricsWithAudio(currentTime) {\n        const lines = document.querySelectorAll(&#8216;#lyrics li&#8217;);\n        let foundIndex = -1;\n\n        lyrics.forEach((lyric, index) =&gt; {\n            if (lyric.time &amp;&amp; lyric.time = 0 &amp;&amp; !isUserScrolling) {\n            currentIndex = foundIndex;\n            highlightLyric(lines[currentIndex]);\n            scrollToLyric(currentIndex);\n        }\n    }\n\n    audio.addEventListener(&#8216;timeupdate&#8217;, function () {\n        const currentTime = audio.currentTime;\n        synchronizeLyricsWithAudio(currentTime);\n    });\n\n    function highlightLyric(line) {\n        document.querySelectorAll(&#8216;#lyrics li&#8217;).forEach(li =&gt; li.classList.remove(&#8216;highlight&#8217;));\n        line.classList.add(&#8216;highlight&#8217;);\n    }\n\n    function scrollToLyric(index) {\n        const line = document.querySelectorAll(&#8216;#lyrics li&#8217;)[index];\n        const offsetTop = line.offsetTop;\n        const containerHeight = container.offsetHeight;\n        const lineHeight = line.offsetHeight;\n        const scrollTop = container.scrollTop;\n        const scrollBottom = scrollTop + containerHeight;\n\n        \/\/ \u5224\u65ad\u5f53\u524d\u884c\u662f\u5426\u5df2\u7ecf\u5728\u53ef\u89c6\u533a\u57df\u5185\n        if (offsetTop  scrollBottom) {\n            \/\/ \u5982\u679c\u8d85\u51fa\u53ef\u89c6\u533a\u57df\u624d\u8fdb\u884c\u6eda\u52a8\n            if (container.scrollHeight &gt; container.offsetHeight) {\n                const scrollTarget = Math.max(0, offsetTop &#8211; containerHeight \/ 5 + lineHeight \/ 5);\n                container.scrollTop = scrollTarget;\n            }\n        }\n    }\n\n    container.addEventListener(&#8216;scroll&#8217;, function () {\n        isUserScrolling = true;\n        clearTimeout(scrollTimeout);\n        scrollTimeout = setTimeout(() =&gt; {\n            isUserScrolling = false;\n        }, 3000);\n    });\n});\n\n\n\n    #lyrics li {\n        list-style: none;\n        padding: 5px;\n        color: #333;\n        cursor: pointer;\n    }\n\n    #lyrics li.highlight {\n        color: #d9534f;\n        font-weight: bold;\n        font-size: 1.2em;\n        background-color: rgba(255, 215, 0, 0.2);\n    }\n\n    #audio-player {\n        width:100%;\n    }\n    #lyrics-container {\n        \/* \u6dfb\u52a0\u5e73\u6ed1\u6eda\u52a8 *\/\n        scroll-behavior: smooth;\n        }\n\n<\/details>\n","protected":false},"excerpt":{"rendered":"<p>\u4e3b\u4eba\u6536\u85cf\u4e86\u9ec4\u8bd7\u6276\u7684\u6b4c\u66f2\u300a\u4f60\u662f\u6211\u5e74\u5c11\u6c42\u5251\u65f6\u523b\u7684\u821f\u300b\uff0c\u5e76\u7cbe\u5fc3\u5236\u4f5c\u4e86\u53ef\u4ea4\u4e92\u7684\u6b4c\u8bcd\u64ad\u653e\u5668\u3002\u8fd9\u7bc7\u6536\u85cf\u4ee5\u201c\u523b\u821f\u6c42\u5251\u201d\u4e3a\u9898\uff0c\u5c06\u53e4\u5178\u5bd3\u8a00\u4e0e\u73b0\u4ee3\u60c5\u8bd7\u4ea4\u7ec7\uff0c\u63a2\u8ba8\u4e86\u65f6\u5149\u4e2d\u90a3\u4e9b\u6267\u7740\u4e0e\u6401\u6d45\u7684\u201c\u7231\u6068\u201d\u4e0e\u201c\u7f8e\u68a6\u201d\u3002<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":"[{\"content\":\"\u559c\u6b22\u4e00\u4e2a\u4eba\u5c31\u50cf\u523b\u821f\u6c42\u5251\uff0c\u4e3a\u4e86Ta\u60f3\u8981\u6539\u53d8\u81ea\u5df1\uff0c\u53ef\u5f53\u81ea\u5df1\u771f\u7684\u6539\u53d8\u4e86\uff0c\u90a3\u4eba\u65e9\u5c31\u5404\u81ea\u5954\u6d41\u800c\u53bb\u4e86\u3002\",\"id\":\"ac7d45d4-92c9-4131-ab15-a661d1bfac9a\"}]"},"categories":[12],"tags":[],"class_list":["post-850","post","type-post","status-publish","format-standard","hentry","category-12"],"_links":{"self":[{"href":"https:\/\/fanyiming.life\/index.php?rest_route=\/wp\/v2\/posts\/850","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fanyiming.life\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fanyiming.life\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fanyiming.life\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fanyiming.life\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=850"}],"version-history":[{"count":3,"href":"https:\/\/fanyiming.life\/index.php?rest_route=\/wp\/v2\/posts\/850\/revisions"}],"predecessor-version":[{"id":14126,"href":"https:\/\/fanyiming.life\/index.php?rest_route=\/wp\/v2\/posts\/850\/revisions\/14126"}],"wp:attachment":[{"href":"https:\/\/fanyiming.life\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=850"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fanyiming.life\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=850"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fanyiming.life\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=850"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}