论坛 › 音乐沙龙 › 【弦雨】经典咏流传《兰花草》

傲雷影儿 发表于 2026-9-4 21:04

【弦雨】经典咏流传《兰花草》

经典咏流传《兰花草》<br>

音画制作/傲雷影儿

<TABLE style="POSITION: relative; WIDTH: 1000px; TOP: 50px; LEFT: -450px" cellSpacing=0 cellPadding=10 width="100%">
<TBODY>
<TR>
<TD width="100%">
<DIV align=center><style type="text/css">.pcb{margin-right:0}</style><div class="pcb">

<div class="t_fsz">
<table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_1226571">
<meta charset="UTF-8">
<style>
#papa {
      margin: 0px 0 0 calc(px);
      width: 1600px;
      height: 900px;
      background: lightgreen url('1') no-repeat center/cover;
      box-shadow: 3px 3px 5px #333;
      position: relative;
}

.inmg { position:absolute; width:100%; height: 900px;TOP:0%;LEFT: 0%;}

#mplayer {
      position: absolute;
      width: 70px;
      height: 70px;
      right: 760px;
      top: 77%;
      border-radius: 50%;
      cursor: pointer;
      animation: rot 8s linear infinite;
}
#lrc {position: absolute;top: 780px;left: 50%;
      --state: paused;
      --motion: cover2;
      --tt: 2s;
      --bg: linear-gradient(180deg, hsla(120, 96%, 60%, .85), hsla(120, 95%, 95%, .85));
      transform: translate(-50%);
      font: bold 2.6em sans-serif;
      color: snow;
      white-space: pre;
      -webkit-background-clip: text;
      filter: drop-shadow(1px 1px 2px hsla(0, 0%, 0%, .95));
}
#lrc::before {
      position: absolute;
      content: attr(data-lrc);
      width: 20%;
      height: 100%;      
      color: transparent;
      overflow: hidden;
      white-space: pre;
      background: var(--bg);
      filter: inherit;
      -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%; } }
@keyframes rot { to { transform: rotate(1turn); } }


</style>

<div id="papa">

<marqueeid="m" behavior="alternate"scrollamount="5"height=900>
<img alt="" src="https://www.junzhuan.com/data/attachment/album/202608/12/125908v2gg8r8qrmv020kp.jpg" title="" style="width: 1600px;height: 900px;" /><img alt="" src="https://www.junzhuan.com/data/attachment/album/202608/12/125907wssct63625vzrn51.jpg" title="" style="width: 1600px;height: 900px;;"/><img alt=""src="https://www.junzhuan.com/data/attachment/album/202608/12/125907r3wdgdvygcuzcxwc.jpg" title="" style="width: 1600px;height: 900px;" /><img alt="" src="https://www.junzhuan.com/data/attachment/album/202608/12/125907ivpdonio8c82u589.jpg" title=""style=" width: 1600px;height: 900px;" /><img alt=""src="https://www.junzhuan.com/data/attachment/album/202608/12/125908v2gg8r8qrmv020kp.jpg" title="" style="width: 1600px;height: 900px;"/><img alt=""src="https://www.junzhuan.com/data/attachment/album/202608/12/125907ivpdonio8c82u589.jpg" title=""style=" width: 1600px;height: 900px;"/><img alt="" src="https://www.junzhuan.com/data/attachment/album/202608/12/125907wssct63625vzrn51.jpg" title="" style="width: 1600px;height: 900px;" /><img alt="" src="https://www.junzhuan.com/data/attachment/album/202608/12/125907r3wdgdvygcuzcxwc.jpg" title=""style=" width: 1600px;height: 900px;" />
</marquee>

<marqueeclass="inmg" direction="down" height="550" behavior="alternate" id="m4" style="transform: rotateY(180deg);"><marqueeid="m1" scrollamount="15"><imgsrc="https://www.junzhuan.com/data/attachment/album/202503/11/170421e2wvwvy4myvzy48d.gif"height="30" /></marquee></marquee>

<marqueeclass="inmg" direction="down"
height="550"
behavior="alternate"
id="m3"><marquee id="m2" scrollamount="23" ><imgsrc="https://www.junzhuan.com/data/attachment/album/202503/11/170421e2wvwvy4myvzy48d.gif"height="30" /></marquee></marquee>

      <div id="lrc" data-lrc="HCPlayer">HCPlayer</div>
      <img id="mplayer" src="https://www.junzhuan.com/data/attachment/album/202608/11/132032nj9bq6c61wtqqqd6.png" alt="" />
      <audio id="aud" src="https://music.163.com/song/media/outer/url?id=359387.mp3" loop autoplay></audio>
</div>
<script>
(function() {
/*原始lrc歌词*/
let lrcStr = `兰花草-黑鸭子
制作：傲雷影儿
我从山中来 带着兰花草
种在小园中 希望花开早
一日看三回 看得花时过
兰花却依然 苞也无一个
转眼秋天到 移兰入暖房
朝朝频顾惜 夜夜不能忘
但愿花开早 能将宿愿偿
满庭花簇簇 开得有多香
满庭花簇簇 开得有多香
……
我从山中来 带着兰花草
种在小园中 希望花开早
一日看三回 看得花时过
兰花却依然 苞也无一个
转眼秋天到 移兰入暖房
朝朝频顾惜 夜夜不能忘
但愿花开早 能将宿愿偿
满庭花簇簇 开得有多香
满庭花簇簇 开得有多香
我从山中来 带着兰花草
种在小园中 希望花开早
一日看三回 看得花时过
兰花却依然 苞也无一个
兰花却依然 苞也无一个
`;

/*变量 ：mKey - 当前歌词索引；mFlag ：调用关键帧动画索引；averAdd ：平均值补偿*/
let mKey = 0, mFlag = true, averAdd = 0.3;

/*函数 ：获取每句歌词用时，歌词用时若超过平均值则取平均值，最后一句歌词则取平均值*/
let lrcTime = (ar) => {
      let tmpAr = [];
      for(j = 0; j <ar.length - 1; j ++) {
                if(j !== ar.length - 1) tmpAr = parseFloat((ar - ar).toFixed(1));
      }
      let aver = parseInt(tmpAr.reduce((a,b) => a + b) / (tmpAr.length - 1)) + averAdd;
      tmpAr.push(aver);
      tmpAr.forEach((item,key) => {
                ar = item > aver ? aver : item;
      });
      return ar;
};

/*函数 ：从原始lrc歌词获取信息并存入 n*3 数组*/
let getLrcAr = (text) => {
      let lrcAr = [];
      let calcRule = ;
      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 * calcRule;
                                        ar = ;
                                        lrcAr.push(ar);
                              }
                        }
                }
      }
      lrcAr.sort((a,b)=> a - b);
      return(lrcTime(lrcAr));
};

/*函数 ：模拟显示同步歌词*/
let showLrc = (time) => {
      let name = mFlag ? 'cover1' : 'cover2';
      lrc.innerHTML = lrcAr;
      lrc.dataset.lrc = lrcAr;
      lrc.style.setProperty('--motion', name);
      lrc.style.setProperty('--tt', time + 's');
      lrc.style.setProperty('--state', 'running');
      mKey += 1;
      mFlag = !mFlag;
};

/*函数 ：处理当前歌词索引 mKey*/
let calcKey = () => {
      for (j = 0; j < lrcAr.length; j++) {
                if (aud.currentTime <= lrcAr) {
                        mKey = j - 1;
                        break;
                }
      }
      if (mKey < 0) mKey = 0;
      if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;
      let time = lrcAr - (aud.currentTime - lrcAr);
      showLrc(time);
};

/*格式化时间信息*/
let toMin = (val) => {
      if (!val) return '00:00';
      val = Math.floor(val);
      let min = parseInt(val / 60),
      sec = parseFloat(val % 60);
      if (min < 10) min = '0' + min;
      if (sec < 10) sec = '0' + sec;
      return min + ':' + sec;
}

/*函数 ：关键帧动画状态切换*/
let mState = () => aud.paused ? (lrc.style.setProperty('--state','paused'),mplayer.style.animationPlayState = 'paused') : (lrc.style.setProperty('--state','running'),mplayer.style.animationPlayState = 'running');

/*监听播放进度*/
aud.addEventListener('timeupdate', () => {
      for (j = 0; j < lrcAr.length; j++) {
                if (aud.currentTime >= lrcAr) {
                        cKey = j;
                        if (mKey === j) showLrc(lrcAr);
                        else continue;
                }
      }
});

aud.addEventListener('pause', () => mState());/*监听暂停事件*/
aud.addEventListener('play', () => mState());/*监听播放事件*/
aud.addEventListener('seeked', () => calcKey());/*监听查询事件*/
mplayer.addEventListener('click', () => { aud.paused ? aud.play() : aud.pause(); });

let lrcAr = getLrcAr(lrcStr); /*获得歌词数组*/
})();
</script></td></tr></table>

</DIV></TD></TR></TBODY></TABLE>

傲雷影儿 发表于 2026-9-4 21:05

《兰花草》是一首跨越了百年时光、融合了文学与音乐的经典之作。它的魅力不仅在于旋律的优美，更在于其背后深厚的文化底蕴与时代精神的演变。

《兰花草》具有极强包容性的作品。它起于新文化运动的文学启蒙，盛于台湾校园民谣的纯真年代，融于中国城市的市井烟火，又在当代说唱中迎来了精神的涅槃。无论时代如何变迁，这首歌始终传递着一种力量：在平淡甚至失落的岁月中，依然保持对美好的向往，并为之默默耕耘。

玫瑰 发表于 2026-9-4 21:16

精彩的分享，精彩。{:4_191:}

霜染枫丹 发表于 2026-9-4 22:27

问好傲蕾影儿！欣赏佳作，很喜欢的歌，很悦目的图。赞佩！{:4_204:}{:4_190:}

红影 发表于 2026-9-4 23:08

漂亮，好听又好看，欣赏傲雷影儿好帖{:4_199:}

查看完整版本: 【弦雨】经典咏流传《兰花草》