请教：同步歌词在编辑器里显示而论坛不显示。谢谢！

武朝歌

[i=s] 本帖最后由 武朝歌 于 2025-2-14 13:19 编辑 [/i]

[00:00.00] 武朝歌欢迎您 [00:15.00] 《芦花》 [00:22.33]芦花白 芦花美 [00:28.23]花絮满天飞 [00:33.68]千思万缕意绵绵 [00:39.46]路上彩云追 [00:44.86]追过山 追过水 [00:50.77]花飞为了谁 [00:56.31]大雁成行人双对 [01:02.02]相思花为媒 [01:07.77]情和爱 花为媒 [01:13.72]千里万里梦相随 [01:19.42]莫忘故乡秋光好 [01:24.66]早戴红花报春回 [01:30.48]情和爱 花为媒 [01:36.16]千里万里梦相随 [01:41.88]莫忘故乡秋光好 [01:47.37]早戴红花报春回 [01:53.91] [02:03.82]芦花白 芦花美 [02:10.00]花絮满天飞 [02:15.30]千思万缕意绵绵 [02:21.09]路上彩云追 [02:26.68]追过山 追过水 [02:32.58]花飞为了谁 [02:38.02]大雁成行人双对 [02:43.81]相思花为媒 [02:49.52]情和爱 花为媒 [02:55.23]千里万里梦相随 [03:00.76]莫忘故乡秋光好 [03:06.12]早戴红花报春回 [03:12.13]情和爱 花为媒 [03:18.05]千里万里梦相随 [03:23.76]莫忘故乡秋光好 [03:29.16]早戴红花报春回 [03:34.92]莫忘故乡秋光好 [03:40.46]早戴红花报春回 [04:00.04]

武朝歌

在编辑器里显示：

武朝歌

<div style="width: 100%;height: 700px;position: absolute;MARGIN-LEFT:-12px;MARGIN-top:80px;"><style>
#papa{position: relative;width:1164px;height:620px;background:#000000
url(https://pic.imgdb.cn/item/660bf4919f345e8d0347a514.jpg
)no-repeat center/cover;display: grid;place-items: center;overflow:hidden;margin-top:10px;margin-left: 20px;box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 0px 8px #880000;z-index: 123456;}
audio {position:absolute;top:580px;z-index: 50;width: 98%;height: 40px;outline: none;filter: invert(180); }
audio::-webkit-media-controls-enclosure {background:transparent ;border-radius: 4px;}
.media-controls-container,.media-controls-container * {background: rgb(129, 73, 200);//滤镜反转为 rgba(0, 162, 255, 1);rgba(255, 93, 0, 0.8)  #7eb637 border-radius: 4px;}
audio::-webkit-media-controls-current-time-display {order: 1; //设置弹性盒对象元素的顺序color: #ffffff;text-shadow: unset;}
audio::-webkit-media-controls-time-remaining-display {order: 2;color: #000000;text-shadow: unset;}
#lrc{left: 15%;top: 75%;}#lrcc {left: 85%;transform: translate(-102%);top: 85%;}
#lrc,#lrcc{--state: paused;--motion: cover2;--tt: 2s;--bg:#880000;border:0px solid black;position: absolute;z-index: 2;font:normal 2.5em 华文隶书;color: #000078;white-space: pre;-webkit-background-clip: text;filter:drop-shadow(#FFFFFF 1px 0 0)drop-shadow(#FFFFFF 0 1px 0)drop-shadow(#FFFFFF -1px 0 0) drop-shadow(#FFFFFF 0 -1px 0);}
#lrcc::before,#lrc::before {position: absolute;content: attr(data-lrc);width: 20%;height: 100%;color: transparent;overflow: hidden;white-space: pre;background: var(--bg);-webkit-background-clip: text;animation: var(--motion) var(--tt) linear forwards;animation-play-state: var(--state);}
@keyframes cover1 {from {width: 0;}to {width: 100%;}}@keyframes cover2 {from {width: 0;}to {width: 100%;}}
</style>
<div id="papa">
<div id="testImg" ><div class='photo'> </div><div class='photo'> </div><div class='photo'> </div><div class='photo'> </div>
<div class='photo'> </div><div class='photo'> </div><div class='photo'> </div><div class='photo'> </div></div>
<audio  id="aud" loop controls autoplay><source src="
https://music.163.com/song/media/outer/url?id=460966325.mp3" /></audio>
  <div id="lrc" data-lrc=""></div>
  <div id="lrcc" data-lrc=""></div>       
</div>
<span id="lrcStr" style="visibility: hidden;">
[00:00.00] 武朝歌欢迎您
[00:15.00] 《芦花》
[00:22.33]芦花白 芦花美
[00:28.23]花絮满天飞
[00:33.68]千思万缕意绵绵
[00:39.46]路上彩云追
[00:44.86]追过山 追过水
[00:50.77]花飞为了谁
[00:56.31]大雁成行人双对
[01:02.02]相思花为媒
[01:07.77]情和爱 花为媒
[01:13.72]千里万里梦相随
[01:19.42]莫忘故乡秋光好
[01:24.66]早戴红花报春回
[01:30.48]情和爱 花为媒
[01:36.16]千里万里梦相随
[01:41.88]莫忘故乡秋光好
[01:47.37]早戴红花报春回
[01:53.91]
[02:03.82]芦花白 芦花美
[02:10.00]花絮满天飞
[02:15.30]千思万缕意绵绵
[02:21.09]路上彩云追
[02:26.68]追过山 追过水
[02:32.58]花飞为了谁
[02:38.02]大雁成行人双对
[02:43.81]相思花为媒
[02:49.52]情和爱 花为媒
[02:55.23]千里万里梦相随
[03:00.76]莫忘故乡秋光好
[03:06.12]早戴红花报春回
[03:12.13]情和爱 花为媒
[03:18.05]千里万里梦相随
[03:23.76]莫忘故乡秋光好
[03:29.16]早戴红花报春回
[03:34.92]莫忘故乡秋光好
[03:40.46]早戴红花报春回
[04:00.04]

</span>
<script >
(function() {
/*变量 ：mKey - 当前歌词索引；averAdd ：平均值补偿*/
let mKey = 0,  averAdd = 0.3;
let lrcTime = (ar) => {
        let tmpAr = [];
        for(j = 0; j <ar.length - 1; j ++) {
                if(j !== ar.length - 1) tmpAr[j] = parseFloat((ar[j+1][0] - ar[j][0]).toFixed(1));
        }
        let aver = parseInt(tmpAr.reduce((a,b) => a + b) / (tmpAr.length - 1)) + averAdd;
        tmpAr.push(aver);
        tmpAr.forEach((item,key) => {
                ar[key][2] = item > aver ? aver : item;
        });
        return ar;
};
let getLrcAr = (text) => {
        let lrcAr = [];
        let arr="";
        let calcRule = [60,1,0.001];
        for(x of text.split('\n')) {
                let ar = [];
                let re = /\d+[\.:]\d+([\.:]\d+)?/g;
                let geci = x.replace(re,'');
                if(geci) {
                        geci = geci.replace(/[\[\]\'\"\t,]s?/g,'');
                        let time = x.match(re);
                        if(time != null) {
                                for(y of time) {
                                        let tmp = y.match(/\d+/g);
                                        let sec = 0;
                                        for(z in tmp) sec += tmp[z] * calcRule[z];
                                        ar[0] = [parseFloat(sec.toFixed(2)), geci];
                                        lrcAr.push(ar[0]);
                                }
                        }
                }
        }
        lrcAr.sort((a,b)=> a[0] - b[0]);
        return(lrcTime(lrcAr));
};
let showLrc = (time) => {
        lrca=lrcAr[mKey][1];
        lrcAr.length==mKey+1?lrcb="":lrcb=lrcAr[mKey+1][1];//判断最后一句歌词
        let Y=String(mKey/2).indexOf(".");
        if (Y == -1)
    {
        0==mKey&&(lrc.innerHTML=lrca);
        lrc.dataset.lrc = lrca;
    lrcc.innerHTML = lrcb;  
        lrcc.dataset.lrc = "";
        lrc.style.setProperty('--motion', 'cover1');
        lrc.style.setProperty('--tt', time + 's');
        lrc.style.setProperty('--state', 'running');
    lrcc.style.setProperty('--motion', 'cover2');
        }
    else
    {
        lrc.innerHTML = lrcb;
        lrcc.dataset.lrc = lrca;
        lrc.dataset.lrc = "";
    lrcc.style.setProperty('--motion', 'cover1');
        lrcc.style.setProperty('--tt', time + 's');
        lrcc.style.setProperty('--state', 'running');
    lrc.style.setProperty('--motion', 'cover2');
        }
        mKey += 1;
};
let calcKey = () => {
        for (j = 0; j < lrcAr.length; j++) {
                if (aud.currentTime <= lrcAr[j][0]) {
                        mKey = j - 1;
                        break;
                }
        }
        if (mKey < 0) mKey = 0;
        if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;
        let time = lrcAr[mKey][2] - (aud.currentTime - lrcAr[mKey][0]);
        showLrc(time);
};
let mState = () => aud.paused?(lrc.style.setProperty("--state","paused"),lrcc.style.setProperty("--state","paused"))lrc.style.setProperty("--state","running"),lrcc.style.setProperty("--state","running"));
/*监听播放进度*/
aud.addEventListener('timeupdate', () => {
        for (j = 0; j < lrcAr.length; j++) {
                if (aud.currentTime >= lrcAr[j][0]) {
                        cKey = j;
                        if (mKey === j) showLrc(lrcAr[j][2]);
                        else continue;
                }
        }
});
aud.addEventListener('pause', () => mState());/*监听暂停事件*/
aud.addEventListener('play', () => mState());/*监听播放事件*/
aud.addEventListener('seeked', () => calcKey());/*监听查询事件*/
let lrcAr = getLrcAr(lrcStr.innerHTML); /*获得歌词数组*/})();
(function(){var image = document.getElementById("testImg");let mState = () => aud.paused ? image.classList.add('stop'):image.classList.remove('stop');aud.addEventListener('play', () => mState());aud.addEventListener('pause', () =>mState());})();
</script>
<style type="text/css">
.photo {width: 100%;height: 100%;box-shadow: 0px 0px 0px 2px #ffffff;position: absolute;z-index: -2;
top:0px; left:0px;opacity: 0;animation: round 48s linear infinite;}
@keyframes round  {0% {opacity: 1;clip-path: ellipse(0% 0% at 50% 50%);}2% {opacity: 1;clip-path:ellipse(1% 1% at 50% 50%);}
9% {opacity: 1;clip-path: ellipse(50% 50% at 50% 50%);} 12% {clip-path: ellipse(100% 100% at 50% 50%);opacity: 1;}
16% {clip-path: ellipse(100% 100% at 50% 50%);-webkit-transform:translate(0%,0%)scale(1);opacity: 0;}}
.photo:nth-child(1) {background:url(https://pic.imgdb.cn/item/660bf4919f345e8d0347a382.jpg
)no-repeat center/cover;
  animation-delay: 42s;}
.photo:nth-child(2) {background: url(https://pic.imgdb.cn/item/660bf4919f345e8d0347a514.jpg                                                         
)no-repeat center/cover;
  animation-delay: 36s;}
.photo:nth-child(3) {background:
url(https://pic.imgdb.cn/item/660bf4919f345e8d0347a0ee.jpg
)no-repeat center/cover;
  animation-delay: 30s;}
.photo:nth-child(4) {background:
url(https://pic.imgdb.cn/item/660bf48e9f345e8d03478d6e.jpg
)no-repeat center/cover;
  animation-delay: 24s;}
.photo:nth-child(5) {background:
url(https://pic.imgdb.cn/item/660bf48e9f345e8d03478ba1.jpg
)no-repeat center/cover;
  animation-delay: 18s;}
.photo:nth-child(6) {background:
url(https://pic.imgdb.cn/item/660bf4919f345e8d0347a514.jpg
)no-repeat center/cover;
  animation-delay: 12s;}
.photo:nth-child(7) {background:
url(https://pic.imgdb.cn/item/660bf4919f345e8d0347a382.jpg
)no-repeat center/cover;
  animation-delay: 6s;}
.photo:nth-child(8) {background:
url(hhttps://pic.imgdb.cn/item/660bf4919f345e8d0347a382.jpg
)no-repeat center/cover;
  animation-delay: 0s;}
.stop .photo:nth-child(1), .stop .photo:nth-child(2), .stop .photo:nth-child(3), .stop .photo:nth-child(4), .stop .photo:nth-child(5),  .stop .photo:nth-child(6), .stop .photo:nth-child(7), .stop .photo:nth-child(8){animation-play-state: paused;}
</style></div>
<div style="height:960px;"></div>

庶民

等专业人士来解答。

武朝歌

武朝歌

编辑器里的截图和源代码已发，审核中。

山里娃

很好听的歌声，很好看的画面。
不懂那些问题，没法回答。

武朝歌

庶民 发表于 2025-2-14 08:35
等专业人士来解答。

谢谢关注！

武朝歌

庶民 发表于 2025-2-14 08:35
等专业人士来解答。

谢谢关注！

武朝歌

山里娃 发表于 2025-2-14 08:43
很好听的歌声，很好看的画面。
不懂那些问题，没法回答。

谢谢关注！