论坛 › 音乐沙龙 › 怎会有人知你的苦（合唱版） 帖赠：亚纶

小辣椒 发表于 2026-1-29 16:52

怎会有人知你的苦（合唱版） 帖赠：亚纶

<style>
      #bj {
            position: relative;
            width: 1400px;
            height:783px;
            margin: 140px 0 30px calc(50% - 781px);
         background:#800 url(https://wj.zp68.com/lxx/yunhua/2026/01/26/13.jpg) no-repeat center / cover;--state:paused;
         box-shadow: 2px 2px 6px #000; z-index: 1; margin: 10px 0 10px calc(px);overflow:hidden; border-radius:32px;}
         
      }
#dh{ width: 100%; height: 100%; position: absolute;
z-index: 1;   
top:0px; left:0px;
animation: rod 2s linear infinite var(--state);}
@keyframes rod{20% {opacity:1;background:linear-gradient(180deg, rgba(124,7,13,0.0643907221091562) 0%, rgba(58,58,241,0.29968483975621496) 0%);}
40% {opacity: 0.6;}
60% {opacity: 0.8;background: linear-gradient(180deg, rgba(124,7,13,0.0643907221091562) 0%, rgba(17,1,1,0.30808820110075286) 0%);}
80% {opacity: 0.4;background:linear-gradient(180deg, rgba(124,7,13,0.0643907221091562) 0%, rgba(241,58,58,0.27167363527442223) 0%);}
100% {opacity: 0.8;background:linear-gradient(180deg, rgba(124,7,13,0.0643907221091562) 0%, rgba(241,190,58,0.29968483975621496) 0%);}
}
#bfq{    transform:scale(0.8);
      position:absolute;
      width: 450px;
      height:350px;overflow: hidden;
      top:3%;background:#0000;
   left: 5%;z-index: 20;}
#tmsg{position: absolute;width: 100px; height: 60px;font:500 12px sans-serif;color: #583a0f;top:20px;left: 20px;}
#tu{   
      position:absolute;
      width: 300px;box-shadow:1px 0px 1px 1px #96825f,0px 0px 0px 0px #880000;
      height:300px;border-radius: 10px;
      top:10%;background:#000 url('https://wj.zp68.com/lxx/yunhua/2026/01/26/00.jpg') no-repeat center / cover;
   left: 2%;z-index: 2;}
#cp{   
      position:absolute;
      width: 260px;border-radius: 50%;
      height:260px;animation: rotating 6s infinite linear var(--state);
      top:15%;background:repeating-radial-gradient(black, black 5px, #1C1C1C 6px, #1C1C1C 7px);
   transition: all 1s;
   left: 41%;z-index: 1;box-shadow:0px 0px 0px 1px #222,0px 0px 0px 0px #880000;}
   @keyframes rotating { to { transform: rotate(360deg); } }
.overlay {
content: '';
left: 0px;
top: 0px;
position: absolute;
width: 260px;
height: 260px;
background: linear-gradient(45deg, transparent, 40%, rgba(255,255,255,0.25), 65%, transparent);
border-radius: 50%;
}
.inner {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 140px;
height: 140px;
box-shadow:0px 0px 0px 1px #eee,0px 0px 0px 0px #eee;
background:#000 url('https://wj.zp68.com/lxx/yunhua/2026/01/26/0.jpg') no-repeat center / cover;

border-radius: 50%;
}
.inner::before {
content: '';
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 15px;
height: 15px;
background: #000;
border-radius: 50%;
}
#bnt{margin: 250px 20px ; width: 30px; height: 30px;left: 10px;position: relative; cursor: pointer; }
#cndpt{position: absolute; width: 30px; height: 30px;
background:#fff;transition: all 1s;
clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 0, 50% 0, 50% 100%, 75% 100%, 75% 0);}
#enopg{ position: absolute;width: 30px; height: 30px;
opacity:0; background:#fff;transition: all 1s;
   clip-path: polygon(75% 50%, 0 0, 0 100%)
}

.lrc {z-index: 1;
            position: absolute;
            top: 55%;
            left: 2%;         
            width: 440px;
            height: 250px;
            overflow: hidden;

      }

      .lrc #ul {
            width: 100%;
            padding: 0;
            list-style: none;
            transition: 0.3s all ease;
            margin: 0;
      }

      .lrc #ul li {
            
            color: #3b6c7b;
            font:600 20px 'FZYaoti', sans-serif;
            transition: .3s all ease;
         list-style-type: none;
    text-align: center;
       display: block;
            padding: 0 10px;
            height: 50px;
            line-height: 50px;
             margin: 0 auto;
            cursor: pointer;
      }

      .lrc #ul li.active {filter:drop-shadow(#3b6c7b 1px 1px 1px)drop-shadow(#3b6c7b 0px 0px 0px);
         transform:scale(1.4);
            color: #fff;
      font-weight: 650;
             text-align: center;
             }
    #fullscreen {border-radius: 4px;position: relative;background:#0000 ;
color:#999;box-shadow:0px 0px 0px 1px #999;z-index: 20;
padding: 4px 10px;
font-size: 12px;
border: none;
cursor: pointer;margin: 8px 5px;left: 45%;top: 195%;
}         
</style>
<div id="bj">
<span id="fullscreen" title="屏展模式">全屏欣赏</span>
<div id="dh" ></div>
<div id="bfq">
<div id="tu">
<div id="tmsg">00:00 | 00:00</div>
<div id="bnt" >
<div id="cndpt"></div>
<div id="enopg" ></div>
</div>
</div>
<div id="cp"><div class="inner"></div><div class="overlay"></div></div>
</div>
<div class="lrc">
            <ul id="ul"></ul>
      </div>
</div>
<audio id="aud" src="https://media.xyzcdn.net/ntB8D3uYwUZrXh-gSppHIjRoyVGv.mp3" loop autoplay ></audio>

<script>
      let lrc = `
怎会有人知你的苦（合唱版）
演唱：黑大婶回乡带娃
作词：廖伟志
作曲：廖伟志         
怎会有人知你的苦
怎会有人懂你的难
怎会有人能与你感同身受
完全懂你的伤
我们各有各自的孤独
我们各有各自的酸楚
忙忙碌碌追寻着幸福
到头来是一无是处
一路跌跌撞撞奔向远方
不知前面是地狱还是天堂
攒了好多的委屈不知对谁讲
只能一杯苦酒敬过往
世人时常提起的乌托邦
能否解我的一身惆怅
恍然漂泊了半生如大梦一场
徒留夜半泪两行
LRC编辑：小辣椒
怎会有人知你的苦
怎会有人懂你的难
怎会有人能与你感同身受
完全懂你的伤
我们各有各自的孤独
我们各有各自的酸楚
忙忙碌碌追寻着幸福
到头来是一无是处
一路跌跌撞撞奔向远方
不知前面是地狱还是天堂
攒了好多的委屈不知对谁讲
只能一杯苦酒敬过往
世人时常提起的乌托邦
能否解我的一身惆怅
恍然漂泊了半生如大梦一场
徒留夜半泪两行
一路跌跌撞撞奔向远方
不知前面是地狱还是天堂
攒了好多的委屈不知对谁讲
只能一杯苦酒敬过往
世人时常提起的乌托邦
能否解我的一身惆怅
恍然漂泊了半生如大梦一场
徒留夜半泪两行
谢谢欣赏

`;
      let lrcArr = lrc.split('\n');
      let result = [];
      var audio = document.querySelector("#aud");
      var ul = document.querySelector("#ul");
      var container = document.querySelector(".lrc");

      for (let i = 0; i < lrcArr.length; i++) {
            var lrcData = lrcArr.split(']');
            if (lrcData.length < 2) continue;
            var lrcTime = lrcData.substring(1);
            var obj = {
                time: parseTime(lrcTime),
                word: lrcData.trim()
            }
            result.push(obj);
      }

      function parseTime(lrcTime) {
            let lrcTimeArr = lrcTime.split(":");
            return +lrcTimeArr * 60 + parseFloat(lrcTimeArr);
      }

      function getIndex() {
            let time = audio.currentTime;
            for (let i = 0; i < result.length; i++) {
                if (result.time > time) {
                  return i - 1;
                }
            }
            return result.length - 1;
      }

      function createElements() {
            let fragment = document.createDocumentFragment();

            for (let i = 0; i < result.length; i++) {
                let li = document.createElement("li");
                li.innerText = result.word;

                li.addEventListener("click", function () {
                  audio.currentTime = result.time;
                  setOffset();
                });

                fragment.appendChild(li);
            }

            ul.appendChild(fragment);
      }

      createElements();
      let containerHeight = container.clientHeight;
      let liHeight = ul.children?.clientHeight || 50;
      let minOffset = 0;
      let maxOffset = ul.clientHeight - containerHeight;

      function setOffset() {
            const index = getIndex();
            if (index < 0) return;

            const liHeight = ul.children?.clientHeight || 50;
            let offset = liHeight * index - containerHeight / 2 + liHeight / 2;

            offset = Math.max(minOffset, Math.min(offset, maxOffset));

            ul.style.transform = `translateY(${-offset}px)`;

            ul.querySelectorAll('.active').forEach(li => li.classList.remove('active'));
            if (index < ul.children.length) {
                ul.children.classList.add('active');
            }
      }

      audio.addEventListener("timeupdate", setOffset);
   
audio.addEventListener('timeupdate', () => {
                tmsg.innerText = toMin(audio.currentTime) + ' | ' + toMin(audio.duration);});
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;
      };      

var mState = () => audio.paused ?
( bj.style.setProperty('--state', 'paused'),bnt.title = '点击播放' ) :
( bj.style.setProperty('--state', 'running'),bnt.title = '点击暂停' );
audio.addEventListener('pause', () => mState());
audio.addEventListener('playing', () => mState());
bnt.onclick = () => audio.paused ? (audio.play(),enopg.style.opacity= '0',cndpt.style.opacity = '1',document.getElementById("cp").style.left = '41%',document.getElementById("wz").style.left = '60%',document.getElementById("wz").style.top = '40px') : (audio.pause(),enopg.style.opacity = '1',cndpt.style.opacity = '0',document.getElementById("cp").style.left = '15%',document.getElementById("wz").style.left = '30px',document.getElementById("wz").style.top = '80%');

let fs = true;
      fullscreen.onclick = () => {
            if (fs) {
                fullscreen.innerText = '退出全屏';
                bj.requestFullscreen();
            } else {
                fullscreen.innerText = '全屏欣赏';
                document.exitFullscreen();
            }
            fs = !fs;
      };
</script>

小辣椒 发表于 2026-1-29 16:54

亚纶不用回帖，只是记挂你这么久手术恢复了没有。

祝早日康复！{:4_187:}

偶然~ 发表于 2026-1-29 17:00

小辣椒美女制作的音画《怎会有人知你的苦（合唱版）》帖赠亚纶，以细腻情感与艺术巧思，将歌曲意境与视觉美感深度融合。

偶然~ 发表于 2026-1-29 17:02

音画以“怎会有人知你的苦”为核心，通过朦胧山水、低垂眉眼等画面，将歌词中“无人懂”的孤独具象化，合唱版和声与视觉“留白”（如远山、飞鸟）形成呼应，强化“知音难觅”的怅惘。

也曾年轻 发表于 2026-1-29 17:03

https://pic.rmb.bdstatic.com/bjh/news/3deff8878a8677d7e1fcdd950ed680f3.gif

偶然~ 发表于 2026-1-29 17:04

人物服饰（米白毛衣、浅绿围巾）与背景水墨色调和谐，传递“清冷中见温柔”的气质；“帖赠亚纶”的署名赋予作品私人化温度，让共鸣从“陌生人”延伸至“知心人”。

偶然~ 发表于 2026-1-29 17:06

作品以“小而美”的形式，展现“以情动人”的魅力，是送给亚纶的温暖礼物，也是对“孤独与陪伴”主题的诗意诠释。

偶然~ 发表于 2026-1-29 17:07

辛苦了，愿小辣椒健康快乐，继续用镜头与音乐传递温暖！

偶然~ 发表于 2026-1-29 17:12

祝 愿常随岁月安，
亚 枝玉树沐春烟。
纶 巾浅笑风华在，
身 似青松立世间。
体 健能担千丈浪，
强 心可纳百川宽。
健 行天下知寒暖，
福 满门庭月正圆。
寿 比南山松不老，
双 星映户庆余年。
全 家和睦天伦乐，

小辣椒 发表于 2026-1-29 17:25

偶然~ 发表于 2026-1-29 17:00
小辣椒美女制作的音画《怎会有人知你的苦（合唱版）》帖赠亚纶，以细腻情感与艺术巧思，将歌曲意境与视觉美 ...

问好偶然，谢谢欣赏和支持{:4_187:}

小辣椒 发表于 2026-1-29 17:26

也曾年轻 发表于 2026-1-29 17:03


问好老师，谢谢欣赏和支持{:4_187:}

小辣椒 发表于 2026-1-29 17:27

偶然~ 发表于 2026-1-29 17:12
祝 愿常随岁月安，
亚 枝玉树沐春烟。
纶 巾浅笑风华在，


偶然大才子太有才拉，回个帖都这么优美的诗词，好文采{:4_178:}

梦江南 发表于 2026-1-29 17:28

祝亚伦老师早日康复回归！{:4_187:}

偶然~ 发表于 2026-1-29 17:37

小辣椒 发表于 2026-1-29 17:25
问好偶然，谢谢欣赏和支持
祝语殷殷寄暖阳，
小园春至百花香。
辣风不扰初心静，
椒蕊轻摇岁月长。
健似青松经雨立，
康如晨露映朝阳。
幸有诗书添雅趣，
福随四季满庭芳。

偶然~ 发表于 2026-1-29 17:41

小辣椒 发表于 2026-1-29 17:27
偶然大才子太有才拉，回个帖都这么优美的诗词，好文采

保重身体，平安是福

杨帆 发表于 2026-1-29 18:20

谢谢小辣椒精彩制作~祝福亚伦老师早日康复凯旋而归{:4_180:}

朵拉 发表于 2026-1-29 22:14

漂亮 好听，欣赏学习咯~{:4_204:}

红影 发表于 2026-1-29 22:59

亲爱的制作真漂亮，那光盘暂停时还能缩回去呢。
欣赏亲爱的好帖，同祝亚伦老师早日康复{:4_199:}

小辣椒 发表于 2026-1-31 20:53

梦江南 发表于 2026-1-29 17:28
祝亚伦老师早日康复回归！

阿姨晚上好，我们一起祝福亚纶早日康复{:4_187:}

小辣椒 发表于 2026-1-31 20:54

偶然~ 发表于 2026-1-29 17:37
祝语殷殷寄暖阳，
小园春至百花香。
辣风不扰初心静，


谢谢偶然，小辣椒感谢偶然的祝福{:4_187:}

查看完整版本: 怎会有人知你的苦（合唱版） 帖赠：亚纶