论坛 › 欢乐水吧 › 6首好听的网络歌曲

亚伦影音工作室 发表于 2026-2-3 14:38

6首好听的网络歌曲

本帖最后由 亚伦影音工作室 于 2026-2-3 14:44 编辑 <br /><br /><style>
#pa{margin:30px auto;position:relative;display:grid;place-items:center;width:1280px;height:780px;left: calc(50% - 100px);transform: translateX(-50%);border:1px solid gray;overflow:hidden;background:url('https://pic1.imgdb.cn/item/67334a1bd29ded1a8c90061b.jpg') no-repeat center/cover;z-index:1;user-drag:none;user-select:none;--state:running;}
#wrapper{position:absolute;padding:0px;color:#00aa00;font:normal 2.5em 华文隶书;filter:drop-shadow(#fff 1px 0 0) drop-shadow(#fff 0 1px 0) drop-shadow(#fff -1px 0 0) drop-shadow(#fff 0 -1px 0);text-align:center;top:85%;z-index:9;writing-mode:horizontal-tb;}
.vertical-lrc{writing-mode:vertical-lr !important;top:60% !important;left:8% !important;transform:translate(-50%, -50%);height:80% !important;width:auto !important;}

#mdiv{position:absolute;top: 22%;z-index: 99;
            left: 63%;
width: 150px;
height: 150px;
display: grid;
        place-items: center;
animation: rot 8s linear infinitevar(--state);

}
@keyframes rot {to { transform: rotate(360deg);filter: hue-rotate(360deg); }}
#rect {position: absolute;
       
display: grid;
        place-items: center;
width:12%;
height: 40%;
clip-path: polygon(0 0, 50% 5%, 100% 0, 50% 50%, 100% 100%, 50% 95%, 0 100%, 50% 50%, 0 0);

}
#rect:nth-of-type(1) { background:#5500ff;transform: rotate(0deg);
}
#rect:nth-of-type(2) { background:#ff0000;transform: rotate(45deg);
}
#rect:nth-of-type(3) { background:#00aa00;transform: rotate(90deg);
}
#rect:nth-of-type(4) { background:#fff000;transform: rotate(135deg);
}
#fullscreen{position:absolute;top: 2%;left: 90%;font:normal 1.5em 楷体;color:#fff;text-shadow:0 0 3px #000;opacity:1;cursor:pointer;user-select:none;z-index:10;}


.char{display:inline-block;padding:2px 2px;opacity:0;color:#00aa00;transform:translate(var(--x), var(--y));animation:fadeIn 1.5s var(--delay) forwards var(--state),flash 1s infinite alternate var(--state);}
@keyframes fadeIn{to{transform:scale(1);opacity:1;}}
@keyframes flash{to{filter:hue-rotate(360deg) brightness(60%);}}
#pa:hover #he,#pa:hover #prev-song,#pa:hover #next-song{opacity:1;z-index:10;}
#he:hover,#prev-song:hover,#next-song:hover{scale:1.05;translate:-1px 1px;}
#he{position:absolute;display:grid;place-items:center;border-radius:4px;color:#fff;background:transparent;box-shadow:0px 0px 0px 1px #fff;padding:4px 2px;width:70px;height:20px;font-size:15px;cursor:pointer;pointer-events:auto;bottom:30px;left:85%;z-index:10;transition:transform 0.3s;opacity:1;}
#prev-song,#next-song{position:absolute;display:grid;place-items:center;border-radius:4px;color:#fff;background:transparent;box-shadow:0px 0px 0px 1px #fff;padding:4px 2px;width:70px;height:20px;font-size:15px;cursor:pointer;pointer-events:auto;bottom:30px;z-index:10;transition:transform 0.3s;opacity:1;}
#prev-song{left:78%;}
#next-song{left:92%;}
#play-status{position:absolute;top:30px;left:50px;color:#ffffff;font:normal 1.5em 华文隶书;filter:drop-shadow(0 0 5px #ff0000);z-index:10;display:flex;flex-direction:column;gap:8px;pointer-events:none;}
.status-item{display:flex;align-items:center;gap:10px;}
.status-label{color:#ffff00;}
.status-value{color:#00ff9d;}
</style>
<div id="pa">
<audio id="aud" loop></audio>
<span id="fullscreen">全屏欣赏</span>
<div id="mdiv" title='暂停';>
    <spanid="rect"></span>
<spanid="rect"></span>
<spanid="rect"></span>
<spanid="rect"></span>
</div>   

<div id="play-status">
    <div class="status-item">
      <span class="status-value" >播放状态：</span>
      <span class="status-label" id="play-state">播放中</span>
    </div>
    <div class="status-item">
      <span class="status-label">当前歌曲：</span>
      <span class="status-value" id="song-name">好运来 - 祖海</span>
    </div>
    <div class="status-item">
      <span class="status-label">播放进度：</span>
      <span class="status-value" id="play-progress">03:25/00:00</span>
    </div>
    <div class="status-item">
      <span class="status-label">歌曲列表：</span>
      <span class="status-value" id="song-index">1/2</span>
    </div>
</div>
<div id="wrapper">好运来 - 祖海</div>
<div>
    <span id="prev-song" onclick="changeSong(-1)" title="">上一首</span>
    <span id="he" onclick="toggleLrcDirection()" title="">竖排歌词</span>
    <span id="next-song" onclick="changeSong(1)" title="">下一首</span>
</div>
</div>
<script>
const songList=[
{
name:"问风问雨你是谁的谁",
src:"https://s2.cldisk.com/sv-w9/audio/4a/6d/f2/d286b59d1f24ee0f11c3231d9f2f0bb7/audio.mp3",
lrc:`
演唱:袁晓袁
念你的时候
梦肆意的翻涌
你的笑颜
还闪现在眼眸中
好想你能
伴我赏一赏星空
你又哪会
知我的情浓
我问风问雨
为何这般匆匆
一切都是缘分
编织的迷宫
我的心伤伤
难以自我抚平
泪在流淌
脸颊已泛红
你不该不该
不该闯入我心中
为你付出再多
你也没感动
爱情的事
成了一只空
如今只留下
一段破碎的残梦
你不该不该
不该占据我情中
爱你负了他
换来满身创痛
我满心中
几乎要失控
对你的深情
你为何始终无动
`
},
{
name:"别在冬天把我丢下",
src:"https://s2.ananas.chaoxing.com/sv-w7/audio/b3/31/2f/1bf49ea9ce9ca189ddddb6f75f74b18f/audio.mp3",
lrc:`
别在冬天把我丢下(DJ 浩然版)
演唱：袁小袁
作词：马筱卉
作曲：谢世超
混音：施亦轩
商务：早早
营销策划：李宝奎陈来兵
策划推广：锦禾文化
制作统筹：慧明
出品发行：JH-music
op：海酝
【未经著作权人许可不得翻唱翻录或使用】
求你求你别在冬天把我丢下
别让我的心碎成冰渣
雪花啊雪花 别再肆意飘洒
这么冷我没有温暖的家
凛冽寒风不停刮
吹来漫天的雪花
一片一片慢慢染白我的头发
你明明知道我很怕冷
还是收起温柔转身天涯
那个等爱的傻瓜
又想起你说的话
你说我是今生今世唯一牵挂
回忆在心头难辨真假
如今如今全变成了笑话
求你别在冬天把我丢下
别让我的心碎成冰渣
雪花啊雪花 别再肆意飘洒
这么冷我没有温暖的家
求你别在冬天把我丢下
别让我的痴情变成伤疤
苦苦等候等不到回答
撕心裂肺是我爱你的代价
那个等爱的傻瓜
又想起你说的话
你说我是今生今世唯一牵挂
回忆在心头难辨真假
如今如今全变成了笑话
求你别在冬天把我丢下
别让我的心碎成冰渣
雪花啊雪花 别再肆意飘洒
这么冷我没有温暖的家
求你别在冬天把我丢下
别让我的痴情变成伤疤
苦苦等候等不到回答
撕心裂肺是我爱你的代价
撕心裂肺是我爱你的代价
`
},
{
name: " 没有结果的遇到",
src: "https://www.33ve.com/plug/down.php?ac=music&id=6451fbe614c9b59a5821fe97dc419873&amp;.mp3",
lrc: ` 没有结果的遇到
演唱：袁小袁           
不是我无理取闹
是伤一直都没好
失去你的疼痛让我无路可逃
你曾经说过陪我到老
为何又把誓言一笔勾销
没有结果的遇到
把我命要了半条
我的眼泪一滴一滴地往下掉
你推我离开你的怀抱
我的难过你假装不知道
别让我再为爱苦苦煎熬
我寻找不到疗伤的药
从前手牵手 到现在不打扰
看我痛得在哭而你却在笑
别让我再独自人海飘摇
我也想有个肩可以依靠
回忆是你亲手建的牢
而我今生今世注定逃不掉
没有结果的遇到
把我命要了半条
我的眼泪一滴一滴地往下掉
你推我离开你的怀抱
我的难过你假装不知道
别让我再为爱苦苦煎熬
我寻找不到疗伤的药
从前手牵手 到现在不打扰
看我痛得在哭而你却在笑
别让我再独自人海飘摇
我也想有个肩可以依靠
回忆是你亲手建的牢
而我今生今世注定逃不掉
而我今生今世注定逃不掉
`
},
{
name:"我曾像傻子一样爱你",
src:"https://www.33ve.com/plug/down.php?ac=music&id=85f18c8a9470c0be7bd1d679acfc6e21&amp;.mp3",
lrc:`
老板 - 我曾像傻子一样爱你
酒杯不懂我的悲伤
只会笑我摇摇晃晃
醉了是因为我想起那段过往
虽然你的名字不长
却占据我整个心脏
是我这辈子不敢再去触碰的伤
我也曾像个傻子拼命的爱你
现在又像个疯子拼命的忘记
你转身离去就能放下了回忆
我困在原地还是学不会死心
我也曾像个傻子拼命的爱你
最后又像个疯子拼命的惦记
也许有红颜知己早把我代替
可我除了你谁也走不进心里
酒杯不懂我的悲伤
只会笑我摇摇晃晃
醉了是因为我想起那段过往
虽然你的名字不长
却占据我整个心脏
是我这辈子不敢再去触碰的伤
我也曾像个傻子拼命的爱你
现在又像个疯子拼命的忘记
你转身离去就能放下了回忆
我困在原地还是学不会死心
我也曾像个傻子拼命的爱你
最后又像个疯子拼命的惦记
也许有红颜知己早把我代替
可我除了你谁也走不进心里
`
},
{
name:"就让这段情化作云烟",
src:"https://www.33ve.com/plug/down.php?ac=music&id=e1f671fbc95b2ae5892e7f08b2db8c3d&amp;.mp3",
lrc:`
烟嗓机长 - 就让这段情化作云烟
别等了再也不会相见
别哭了再回不到昨天
爱走到终点
不舍也应该成全
有些遗憾只能放在心间
忘不了也无力再改变
大不了就再爱你几年
好多话想说
喉咙哽咽着难言
相思的苦还蔓延在心间
就让这段情化作云烟
我的梦坠入刺骨的深渊
我那么爱你却换来你的欺骗
回忆的眼泪割裂了眼帘
就让这段情化作云烟
过往如霜凝结在眉尖
我含着眼泪走过寂寞的长街
再也不见你温暖的笑颜
忘不了也无力再改变
大不了就再爱你几年
好多话想说
喉咙哽咽着难言
相思的苦还蔓延在心间
就让这段情化作云烟
我的梦坠入刺骨的深渊
我那么爱你却换来你的欺骗
回忆的眼泪割裂了眼帘
就让这段情化作云烟
过往如霜凝结在眉尖
我含着眼泪走过寂寞的长街
再也不见你温暖的笑颜
`
},
{
name:"人生终点皆是黄泉",
src:"https://www.qeecc.com/plug/down.php?ac=music&id=eXdzeGdnY3du&k=320&amp;.mp3",
lrc:`
人生终点皆是黄泉-张溪溪
词：张溪溪
曲：张溪溪
编曲：有有
混音：有有
和声：张溪溪
【未经著作权人许可不得翻唱翻录或使用】
初来人间一丝不挂
走时带不走一砖一瓦
半生为那碎银追随它
起早贪黑 摸爬滚打
清晨赶过天边残霞
夜里守着旧事难拔
曾经把执念当作筹码
后来才懂聚散不由人啊
这人间啊 不过一场晚霞
亮过了暗了后就落下
曾有过遗憾 都随风飘洒
尝尽人间悲观 辛酸苦辣
这人生啊 就像手里的沙
握紧了松了都留不下
曾吃过的苦 熬成嘴边笑话
最后才懂得平凡最无价
清晨赶过天边残霞
夜里守着旧事难拔
曾经把执念当作筹码
后来才懂聚散不由人啊
这人间啊 不过一场晚霞
亮过了暗了后就落下
曾有过遗憾 都随风飘洒
尝尽人间悲观 辛酸苦辣
这人生啊 就像手里的沙
握紧了松了都留不下
曾吃过的苦 熬成嘴边笑话
最后才懂得平凡最无价
`}
];
let currentSongIndex=0;
let gcAr=[];
let curkey=0,isSeeking=false;
let totalDuration=0;
const playStateEl=document.getElementById('play-state');
const playProgressEl=document.getElementById('play-progress');
const songNameEl=document.getElementById('song-name');
const songIndexEl=document.getElementById('song-index');
const wrapper=document.getElementById('wrapper');
const heBtn=document.getElementById('he');
function formatTime(seconds){
const mins=Math.floor(seconds/60).toString().padStart(2,'0');
const secs=Math.floor(seconds%60).toString().padStart(2,'0');
return `${mins}:${secs}`;
}
function changeSong(direction){
currentSongIndex+=direction;
if(currentSongIndex<0){
currentSongIndex=songList.length-1;
}else if(currentSongIndex>=songList.length){
currentSongIndex=0;
}
loadSong(currentSongIndex);
}
function loadSong(index){
const song=songList;
aud.src=song.src;
gcAr=lrc2HC(song.lrc);
curkey=0;
songNameEl.textContent=song.name;
songIndexEl.textContent=`${index+1}/${songList.length}`;
playProgressEl.textContent=`00:00 / 00:00`;
playStateEl.textContent='播放中';
aud.play();
mdiv.style.animationPlayState='running';
pa.style.setProperty('--state','running');
wrapper.innerHTML='';
wrapper.classList.remove('vertical-lrc');
heBtn.innerText='竖排歌词';
}
loadSong(0);
aud.onloadedmetadata=function(){
totalDuration=aud.duration;
playProgressEl.textContent=`00:00 / ${formatTime(totalDuration)}`;
};
aud.ontimeupdate=()=>{
if(curkey>gcAr.length-1)return;
if(aud.currentTime>=gcAr){
const gap=gcAr?.??0-gcAr;
showLrc(gcAr,wrapper,gap);
}
if(totalDuration){
playProgressEl.textContent=`${formatTime(aud.currentTime)} / ${formatTime(totalDuration)}`;
}
};
aud.onended=()=>{
changeSong(1);
}
aud.onseeked=()=>calcKey();
function lrc2HC(text){
let lrcAr=[];
let ar=text.trim().split('\n');
ar.sort();
let reg=/\[(\d+)[.:](\d+)[.:](\d+)\](.*)/;
ar.forEach(item=>{
if(reg.test(item)){
let result=item.match(reg);
let tmsg=parseInt(result)*60+parseInt(result)+parseInt(result)/1000;
lrcAr.push(.trim()]);
}
});
return lrcAr?lrcAr:;
};
function calcKey(){
for(let j=0;j<gcAr.length;j++){
if(aud.currentTime<=gcAr){
curkey=j-1;
break;
}
}
if(curkey<0)curkey=0;
if(curkey>gcAr.length-1)curkey=gcAr.length-1;
let time=gcAr?.??0-gcAr;
isSeeking=false;
showLrc(gcAr,wrapper,time);
}
function showLrc(str,targetElm,time){
if(isSeeking)return;
targetElm.innerHTML='';
const chars=str.split('').map(c=>c===' '?' ':c);
const frg=document.createDocumentFragment();
chars.forEach((char,idx)=>{
const span=document.createElement('span');
span.innerHTML=char;
span.classList.add('char');
const x=Math.random()*(Math.random()>0.5?-300:300);
const y=Math.random()*(Math.random()>0.5?-300:300);
span.style.cssText+=`
color:hsl(${Math.floor(Math.random()*360)},100%,50%);
--x:${x}px;
--y:${y}px;
--delay:${Math.random()*0.5}s;
`;
frg.appendChild(span);
});
targetElm.appendChild(frg);
curkey++;
setTimeout(()=>isSeeking=false,time);
}
let isVertical=false;
function toggleLrcDirection(){
isVertical=!isVertical;
if(isVertical){
heBtn.innerText='横排歌词';
wrapper.classList.add('vertical-lrc');
}else{
heBtn.innerText='竖排歌词';
wrapper.classList.remove('vertical-lrc');
}
}
mdiv.onclick=()=>{
const vids=document.querySelectorAll(',.vid');
if(aud.paused){
aud.play();

mdiv.style.animationPlayState='running';
pa.style.setProperty('--state','running');
playStateEl.textContent='播放中';
}else{
aud.pause();

mdiv.style.animationPlayState='paused';
pa.style.setProperty('--state','paused');
playStateEl.textContent='已暂停';
}
};
pa.style.setProperty('--state','running');
const fullscreenEl=document.getElementById('fullscreen');
let fs=true;
let fsTimer;
if(fullscreenEl){
fullscreenEl.onclick=()=>{
if(fs){
fullscreenEl.innerText='退出全屏';
if(pa.requestFullscreen){pa.requestFullscreen();}
else if(pa.webkitRequestFullscreen){pa.webkitRequestFullscreen();}
else if(pa.msRequestFullscreen){pa.msRequestFullscreen();}
}else{
fullscreenEl.innerText='全屏欣赏';
if(document.exitFullscreen){document.exitFullscreen();}
else if(document.webkitExitFullscreen){document.webkitExitFullscreen();}
else if(document.msExitFullscreen){document.msExitFullscreen();}
}
fs=!fs;
};
pa.addEventListener('mousemove',()=>{
clearTimeout(fsTimer);
fullscreenEl.style.opacity='1';
fsTimer=setTimeout(()=>{fullscreenEl.style.opacity='0';},3000);
});
document.addEventListener('fullscreenchange',()=>{
fs=!document.fullscreenElement;
fullscreenEl.innerText=fs?'全屏欣赏':'退出全屏';
});
}
</script>

也曾年轻 发表于 2026-2-3 14:52

https://img.chinacourt.cn/ptr/original/807/6819807.jpg

梦江南 发表于 2026-2-3 15:18

问好亚伦老师，谢谢带来精彩音画。祝您健康快乐！{:4_199:}

樵歌 发表于 2026-2-3 17:52

欣赏精彩音画{:4_174:}

霜染枫丹 发表于 2026-2-3 19:12

感谢分享好听的音乐，很喜欢~~{:4_204:}{:4_190:}

杨帆 发表于 2026-2-4 12:38

问好亚伦老师，谢谢精彩分享，祝福开心天天{:4_180:}

查看完整版本: 6首好听的网络歌曲