论坛 › 欢乐水吧 › 伤心的人走不出回忆（女版）-慕蓉晓晓

亚伦影音工作室 发表于 2026-5-7 15:09

伤心的人走不出回忆（女版）-慕蓉晓晓

本帖最后由 亚伦影音工作室 于 2026-5-9 18:31 编辑 <br /><br /><style>
#bj{position: relative;width: 1186px;height: 680px;LEFT:-300px;top:10px;overflow:hidden;background:#800 url(https://pic1.imgdb.cn/item/69f6d4ea98d7db9e97813aed.png)no-repeat center / cover;}

#vid{width: 100%; height: 100%;z-index: 2;
position:absolute;
top:0%; left:0%;mix-blend-mode: lighten;
object-fit: cover; pointer-events: none;
}
#cd{display: none;}
.song-list-containe {position: absolute;
margin-top: 10%;
margin-left: 2%;
color:#00aa00;
width:400px;
font:400 1.2em/0.1em 仿宋; column-count: 1;
}

.song-list {
list-style: none;
padding: 0;
color: #fff;
overflow-x: hidden;

}

.song-item {
padding: 1rem 1.5rem;
cursor: pointer;
}

.song-item:hover {
color: #fff000;
}
.song-item.active {
color: #ff0000;
font-weight: 500;
}
.lyrics-container {
position: absolute;
max-height: 200px;
overflow-y: hidden;
overflow-x: hidden;
cursor: pointer;
text-align: center;
MARGIN-LEFT:8%;
margin-top:26%;
font: 500 25px 'FZYaoti', sans-serif;
line-height: 50px;
color: #eee;
}
.highlight {
color: #ff0000;
padding-left: 0.5rem;
font-size:30px;
}

#bt{ --w: 66%; width: var(--w); overflow: hidden; color: #fff; position: absolute; left:56%;top:88%;font:normal 16px 仿宋;cursor:pointer;}
#bt { word-break: keep-all; white-space: nowrap; animation: bt 23s linear infinite; background:#0000}
@keyframes bt {50% { transform: translateX(calc(0% - var(--w))); }}

#bt:hover {
color: #00ff00;
animation-play-state: paused;
}
#bnt{margin: 0px 0px ;left:2%;top:92%;width: 20px; height: 20px;position: absolute; cursor: pointer; z-index: 100;transition: all 1s;}
#cndpt{position: absolute; width: 100%; height: 100%;
   background:#fff;
clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 0, 50% 0, 50% 100%, 75% 100%, 75% 0);}
#enopg{ position: absolute;width: 100%; height: 100%;
opacity:0;background:#fff;
   clip-path: polygon(75% 50%, 0 0, 0 100%)
}

#prog {position: absolute;z-index: 8;
      width: 84%;
      height: 2px;background:#ccc;
      cursor: pointer;
         bottom: 46px;
left:5%;
border-radius: 1px;}
#prog-bar {
            height: 100%;
            background: #FF0000;
            width: 0%;
      }

#tmsg {position: absolute;z-index: 8;
      font: normal 12px sans-serif;
      color: #ffffff;
         bottom: 42px;
      right: 40px;}

#world,#fullscreen {border-radius: 4px;position: relative;background:#0000 ;
color:#fff;box-shadow:0px 0px 0px 1px #fff;
padding: 4px 10px;
font-size: 12px;
border: none;
cursor: pointer;margin: 8px 5px;left: 75%;top: 30px;
}

#xiaobo {z-index: 10;
      width: 350px;
      height: 240px;
      margin: 0px 0px;left: 70%;top: 12%;
      position: absolute;
      }
.hexahedron {width: 230px;border: 2px solid #8b4523;
      height: 230px;
      margin: 0px 0px;
top: -10px;left: -14px;
         position: relative; z-index: 10;
      background:#8E731B url(https://pic1.imgdb.cn/item/69f6d4ea98d7db9e97813aed.png)no-repeat center/cover;
      border-radius: 12px;mask: radial-gradient(circle at 96% 50%,transparent 40px,#red 0%);-webkit-mask: radial-gradient(circle at 96% 50%,transparent 40px,red 0%); }

#cp { position: relative; top: 0px; left: 0px;width: 200px; height: 200px;transition: 6s;animation:opentop 0.5s linear 1s ;border-radius: 50%;background:linear-gradient(-45deg,#000,black,#aaa,black,#111)}
.overlay{box-shadow:0px 0px 0px 1px #eee,0px 0px 0px 10px #555;
left: 0px;
top:0px;
position: absolute;
width: 200px;
height: 200px;
background:repeating-radial-gradient(circle at center,#111 3px,transparent 8px);
border-radius: 50%;
}


.inner {z-index: 1;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 70px;
height: 70px;
box-shadow:0px 0px 0px 1px #000,0px 0px 0px 2px #eee;
background:#6a4532;


border-radius: 50%;
}
.inner::after {
content: '';
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 6px;
height: 6px;
background:#aa5;
border-radius: 50%;
}

#all {position: absolute;width:200px; height:200px;top: 7px; left: 110px;z-index: -1; transition: 2s; animation:tion3s linear 1.5s infinite}
@keyframes opentop { 0% {transform: translatex(-50px);} 100% { transform:rotateX(0px);}}
@keyframes tion { 0% {} 100% { transform:rotate(360deg) } }
#smsvg{ z-index: 10;position: relative;
    left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
</style>
<divid="bj">
<video id="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/7ef95efbd72ee430aaa9ac2e20f1bf66_preview.mp4" loop muted autoplay=""></video>

<div id="xiaobo">
<div class="hexahedron"></div>
<div id="all">
<divid="cp" ><div class="inner"><svgid="smsvg"width="200px" height="200px">
        <defs>
                <path id="path" d="M0 100 A100 100 0 1 1 200 100 A100 100 0 1 1 0 100"/>
        </defs>
        <text dx="77" dy="77" font-size="12" fill="#fff000"font-family="'楷体'">
                <textPath href="#path" textLength="535"> 花潮论坛 亚伦影音工作室 </textPath>
        </text>
</svg>
</div><div class="overlay"></div></div>
</div>
</div>

<div id="bnt" >
<div id="cndpt"></div>
<div id="enopg" ></div>
</div>
<div id="prog" title="播放进度条"><div id="prog-bar"></div></div>
<div id="tmsg">00:00|00:00</div>
<span id="world" onclick="btncd()"title="歌曲菜单">菜单显示</span>
<span id="fullscreen" title="屏展模式">全屏欣赏</span>

<div id="cd">
<div class="song-list-containe">
<p id="song-list" class="song-list">
</p>
</div>
</div>
<div id="lyrics" class="lyrics-container w-full max-w-4xl"></div>
<div id="bt"><div>
</div>
<script>

var xmhy = [
["https://s2.ananas.chaoxing.com/sv-w8/audio/e0/34/22/b0deb877ca8af112217d2e12671736aa/audio.mp3","伤心的人走不出回忆（女版）-慕蓉晓晓",`伤心的人走不出回忆（女版）-慕蓉晓晓
词：李俊旭
曲：李俊旭
编曲：李俊旭
混音：潘君明
统筹：林小雨
制作人：藏古西/柳李
监制：耿华
策划：秦子文
联合宣推：谷千文化/诗意文化
出品人：涓子/秦子文
OP/SP：浔秦文化
（版权所有未经允许请勿使用）
我依然在最初等着你
海枯石烂深埋我心底
相逢的故地
难寻你踪迹
那些爱恨别离都随风遗弃
爱你耗尽我半生余力
辗转反侧又跌倒谷底
伤口在愈合
暗涌在继续
就让沉默代替眼泪在哭泣
如果伤心的人走不出回忆
就让曾经的爱埋葬在原地
如果爱是一场剧
注定分手的结局
我又何必苦苦为难自己
如果伤心的人走不出回忆
就让先炙热的先原谅自己
深情总是难再续
深爱总是难放弃
多年以后你是否会想起
会把我想起
爱你耗尽我半生余力
辗转反侧又跌倒谷底
伤口在愈合
暗涌在继续
就让沉默代替眼泪在哭泣
如果伤心的人走不出回忆
就让曾经的爱埋葬在原地
如果爱是一场剧
注定分手的结局
我又何必苦苦为难自己
如果伤心的人走不出回忆
就让先炙热的先原谅自己
深情总是难再续
深爱总是难放弃
多年以后你是否会想起
会把我想起
如果伤心的人走不出回忆
就让先炙热的先原谅自己
深情总是难再续
深爱总是难放弃
多年以后你是否会想起
会把我想起
`],
["https://s2.ananas.chaoxing.com/sv-w9/audio/b2/69/63/67de1f26637fc541b8a39812e378e692/audio.mp3","马健涛 - 手心有你(DJ 版)",`手心有你(DJ 版)
词曲：马健涛
编曲：马健涛
htnl动画设计：亚伦
演唱：马健涛
出品：亚伦影音
歌词制作：亚伦
让我留在你身边多一天
让我爱你每天多一点
让我今生与你做伴
让我亲吻你的脸蛋
我在梦到你的夜里流泪
双手捧着你的相片
你是我放不下的人
我要把你捧在我手心
谢谢你一直的包容我
没有丢下我
谢谢你一直的爱着我
原谅我的过错
感谢上苍把你赐给我
温暖了我心窝
当我哭泣难过的时候
你会紧紧抱着我
让我留在你身边多一天
让我爱你每天多一点
让我今生与你做伴
让我亲吻你的脸蛋
我在梦到你的夜里流泪
双手捧着你的相片
你是我放不下的人
我要把你捧在我手心
谢谢你一直的包容我
没有丢下我
谢谢你一直的爱着我
原谅我的过错
感谢上苍把你赐给我
温暖了我心窝
当我哭泣难过的时候
你会紧紧抱着我
让我留在你身边多一天
让我爱你每天多一点
让我今生与你做伴
让我亲吻你的脸蛋
我在梦到你的夜里流泪
双手捧着你的相片
你是我放不下的人
我要把你捧在我手心
让我留在你身边多一天
让我爱你每天多一点
让我今生与你做伴
让我亲吻你的脸蛋
我在梦到你的夜里流泪
双手捧着你的相片
你是我放不下的人
我要把你捧在我手心
我要把你捧在我手心`]

      ];
      
      const songList = document.getElementById('song-list');
      const audio = document.createElement('audio');
      const lyricsDiv = document.getElementById('lyrics');
      let currentSongIndex = 0;
      let currentLyricIndex = -1;
      
      // 生成曲目列表
      xmhy.forEach((song, index) => {
            const li = document.createElement('li');
            li.className = 'song-item';
            li.textContent = (index + 1) + "." + song;
            li.dataset.index = index;
            li.addEventListener('click', () => selectSong(index));
            songList.appendChild(li);
      });
      
      function selectSong(index) {
            document.querySelectorAll('.song-item').forEach(li => li.classList.remove('active'));
            document.querySelectorAll('.lyric-line').forEach(line => line.classList.remove('highlight'));
            currentLyricIndex = -1;
            bt.innerHTML = '正在播放：' + xmhy.length + '首' + "/" + (index + 1) + "." + xmhy;
            const selectedLi = document.querySelector(``);
            selectedLi.classList.add('active');
            currentSongIndex = index;
            audio.src = xmhy;
            displayLyrics(xmhy);
            audio.play();
            
            window.scrollTo({ top: window.scrollY });
      }
      
      function displayLyrics(lyricsText) {
            lyricsDiv.innerHTML = '';
            const lines = lyricsText.split('\n').map(line => line.trim());
            const lyricList = [];
            
            lines.forEach(line => {
                const timeMatch = line.match(/\[(\d{2}):(\d{2})\.(\d{3})\]/);
                if (timeMatch) {
                  const time = parseFloat(timeMatch) * 60 + parseFloat(timeMatch) + parseFloat(timeMatch) / 1000;
                  const text = line.replace(timeMatch, '').trim();
                  lyricList.push({ time, text });
                } else {
                  const timeMatchTwo = line.match(/\[(\d{2}):(\d{2})\.(\d{2})\]/);
                  if (timeMatchTwo) {
                        const time = parseFloat(timeMatchTwo) * 60 + parseFloat(timeMatchTwo) + parseFloat(timeMatchTwo) / 1000;
                        const text = line.replace(timeMatchTwo, '').trim();
                        lyricList.push({ time, text });
                  }
                }
            });
            
            lyricList.forEach(({ time, text }, index) => {
                const p = document.createElement('p');
                p.className = 'lyric-line';
                p.textContent = text;
                p.dataset.time = time;
                p.dataset.index = index;
                p.addEventListener('click', () => jumpToLyric(index));
                lyricsDiv.appendChild(p);
            });
            
            audio.removeEventListener('timeupdate', updateLyrics);
            audio.addEventListener('timeupdate', updateLyrics);
      }
      
      function updateLyrics() {
            const currentTime = audio.currentTime;
            const lyricLines = Array.from(lyricsDiv.querySelectorAll('.lyric-line'));
            
            const newIndex = lyricLines.findIndex((line, index) => {
                const lineTime = parseFloat(line.dataset.time);
                return lineTime <= currentTime && (lyricLines ? parseFloat(lyricLines.dataset.time) > currentTime : true);
            });
            
            if (newIndex !== currentLyricIndex && newIndex !== -1) {
                lyricLines?.classList.remove('highlight');
                lyricLines.classList.add('highlight');
                currentLyricIndex = newIndex;
               
                // 确保高亮行始终位于第3行
                const lineHeight = 30; // 每行歌词的高度
                const containerHeight = 150; // 歌词容器的高度
                const visibleLines = 3; // 可见的行数
                const highlightLine = 2; // 高亮行的索引（从0开始计数）
               
                lyricsDiv.scrollTo({
                  top: lyricLines.offsetTop - lineHeight * highlightLine,
                  behavior: 'smooth'
                });
            }
      }
      
      function jumpToLyric(index) {
            const targetTime = parseFloat(lyricsDiv.children.dataset.time);
            audio.currentTime = targetTime;
            updateLyrics();
      }
      
      audio.addEventListener('ended', () => {
            currentSongIndex = (currentSongIndex + 1) % xmhy.length;
            selectSong(currentSongIndex);
      });
      
      selectSong(currentSongIndex);
    </script>
   
    <script>
      function btncd() {
            var img = document.getElementById("cd");
            if (document.getElementById("world").innerHTML == "菜单隐藏") {
                img.style.display = 'none';
                document.getElementById("world").innerHTML = "菜单显示";
            } else {
                img.style.display = 'block';
                document.getElementById("world").innerHTML = "菜单隐藏";
            }
      }
      
      let fs = true;
      fullscreen.onclick = () => {
            if (fs) {
                fullscreen.innerText = '退出全屏';
                bj.requestFullscreen();
            } else {
                fullscreen.innerText = '全屏欣赏';
                document.exitFullscreen();
            }
            fs = !fs;
      };
      
      audio.addEventListener('timeupdate', () => {
            tmsg.innerText = toMin(audio.currentTime) + ' | ' + toMin(audio.duration);
      });
      
      function toMin(val) {
            if (!val) return '00:00';
            val = Math.floor(val);
            let min = parseInt(val / 60);
            let sec = parseFloat(val % 60);
            if (min < 10) min = '0' + min;
            if (sec < 10) sec = '0' + sec;
            return min + ':' + sec;
      }
      
      prog.onclick = (e) => { audio.currentTime = audio.duration * e.offsetX / prog.offsetWidth; }
      
      var progBar = document.getElementById('prog-bar');
      audio.addEventListener('timeupdate', () => {
            const percent = (audio.currentTime / audio.duration) * 100;
            progBar.style.width = percent + '%';
      });
      
       var mState = () => audio.paused ?
( bnt.style.setProperty( 'paused'),bnt.title = '点击播放' ) :
( bnt.style.setProperty( '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',all.style.left = '110px',all.style.animationPlayState = 'running',vid.play()) : (audio.pause(),enopg.style.opacity = '1',cndpt.style.opacity = '0',all.style.left = '30px',all.style.animationPlayState = 'paused',vid.pause());
      
      bt.style.animationPlayState = audio.paused ? 'paused' : 'running';
      audio.addEventListener('playing', () => bt.style.animationPlayState = 'running');
      audio.addEventListener('pause', () => bt.style.animationPlayState = 'paused');
      
      document.querySelectorAll('.lyric-line').forEach(line => {
            line.addEventListener('click', event => {
                event.preventDefault();
                event.stopPropagation();
            });
      });
    </script>

杨帆 发表于 2026-5-7 17:01

简洁，清爽，漂亮，谢谢亚伦老师精彩示范{:4_180:}

梦油 发表于 2026-5-7 19:54

欣赏佳作，问候亚伦。

红影 发表于 2026-5-7 22:10

真漂亮。图中人物有点像白鹿，尤其眼睛，特别像。
歌曲好听，制作漂亮。欣赏亚伦老师好帖{:4_199:}

小辣椒 发表于 2026-5-7 22:14

亚纶一步步完善，现在列表，全屏欣赏都有了，欣赏亚纶精彩制作{:4_187:}

查看完整版本: 伤心的人走不出回忆（女版）-慕蓉晓晓