雷鬼歌曲
本帖最后由 亚伦影音工作室 于 2026-9-20 19:55 编辑 <br /><br /><style>@import url("https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap");#papa{
margin: 10px 0 30px calc(50% - 680px);
width: 1286px;
height: 720px;
background:#000 url()no-repeat center/cover;
box-shadow: 3px 3px 20px #000;
user-select: none;
overflow: hidden;
position: relative;
z-index: 1;--state: paused;
}
#zhezhao{left:0%;top: 0%;width: 100%;height: 100%;position: absolute;filter: invert(0%); cursor: pointer;z-index: -1}
#wudao{left:82%;top: 20%;width: 250px;height: 320px;position: absolute;filter: invert(0%); cursor: pointer;z-index: 1}
/* ===== 播放器容器 ===== */
#amazingaudioplayer-1 {
width: 80%;
max-width: 100%;
margin: 0 10%;
margin-top: 42%;
/* 整体下移50px */
border-radius: 0px;
box-shadow: 0 20px 35px rgba(0, 0, 0, 0);
padding: 6px 0 8px 0;
font-family: 'Segoe UI', 'Noto Sans', system-ui, 'Microsoft YaHei', sans-serif;
position: relative;
}
/* ===== 歌词区域 ===== */
#amazingaudioplayer-1 .amazingaudioplayer-text {
padding: 2px 12px 0px;
text-align: center;
}
.amazingaudioplayer-lyrics {
position: relative;
top: 15px;
display: inline-block;
max-width: 100%;
font-size: 22px;
font-weight: 400;
line-height: 1.3;
text-align: center;
letter-spacing: 1px;
white-space: nowrap;
min-height: 36px;
}
/* ===== 核心歌词元素（带颜色填充） ===== */
#lrc {
position: relative;
display: inline-block;
font-family:"Ma Shan Zheng","STKaiti","SimHei", cursive, serif;
font-size: 26px;
font-weight: 200;
color: #fff000;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
white-space: nowrap;
background: transparent;
}
/* ===== 渐变填充伪元素 —— 流光效果 ===== */
#lrc::before {
position: absolute;
content: attr(data-lrc);
top: 0;
left: 0;
width: 100%;
height: 100%;
color: transparent;
overflow: hidden;
white-space: pre;
background: linear-gradient(45deg,#ff0000, #800000, #fff, #00ff00, #000078);
background-size: 200% auto;
-webkit-background-clip: text;
background-clip: text;
clip-path: inset(0 100% 0 0);
animation: shineFlow 3s linear infiniteforwards, lrcFill var(--tt) linear forwards;
animation-play-state: var(--state, paused);
text-shadow: 0 0 2px rgba(26, 77, 62, 0.2);
}
/* 流光移动动画 */
@keyframes shineFlow {
0% { background-position: 150% 60%; filter: hue-rotate(0deg)brightness(140%)contrast(350%);}
}
/* 歌词填充动画 */
@keyframes lrcFill {
0% { clip-path: inset(0 100% 0 0); }
100% { clip-path: inset(0 0% 0 0); }
}
/* 用于切换动画类名 */
#lrc::before {
animation-name: shineFlow, cover1;
}
#lrc::before {
animation-name: shineFlow, cover2;
}
@keyframes cover1 { to { clip-path: inset(0 0 0 0); } }
@keyframes cover2 { to { clip-path: inset(0 0 0 0); } }
/* ===== 控制栏 ===== */
#amazingaudioplayer-1 .amazingaudioplayer-bar {
position: relative;
height: 100px;top: 10px;
}
/* 播放/暂停 - 居中 */
#amazingaudioplayer-1 .amazingaudioplayer-playpause {
position: absolute;
left: 50%;
margin-left: -24px;
top: 18px;
}
#amazingaudioplayer-1 .amazingaudioplayer-play,
#amazingaudioplayer-1 .amazingaudioplayer-pause {
width: 48px;
height: 48px;
background-image: url('https://pic1.imgdb.cn/i/034RzgWl4Ebj8w4irJqbpU.png');
background-repeat: no-repeat;
background-size: auto;
cursor: pointer;
}
#amazingaudioplayer-1 .amazingaudioplayer-play {
background-position: left top;
}
#amazingaudioplayer-1 .amazingaudioplayer-pause {
background-position: right top;
display: none;
}
/* 上一首 */
#amazingaudioplayer-1 .amazingaudioplayer-prev {
position: absolute;
left: 50%;
margin-left: -72px;
top: 18px;
width: 48px;
height: 48px;
background-image: url('https://pic1.imgdb.cn/i/034RzhsPOoT6AmqhYAxRUy.png');
background-repeat: no-repeat;
background-size: auto;
background-position: left top;
cursor: pointer;
}
/* 下一首 */
#amazingaudioplayer-1 .amazingaudioplayer-next {
position: absolute;
left: 50%;
margin-left: 24px;
top: 18px;
width: 48px;
height: 48px;
background-image: url('https://pic1.imgdb.cn/i/034RzhsPOoT6AmqhYAxRUy.png');
background-repeat: no-repeat;
background-size: auto;
background-position: right top;
cursor: pointer;
}
/* 循环按钮 */
#amazingaudioplayer-1 .amazingaudioplayer-loop {
position: absolute;
top: 30px;
left: 50%;
margin-left: 78px;
width: 24px;
height: 24px;
background-image: url('https://lkvv99.s3.cn-north-1.jdcloud-oss.com/lkl/wys/audioplayerengine/loop-24-24-2.png');
background-repeat: no-repeat;
background-size: auto;
background-position: left top;
cursor: pointer;
}
/* 列表切换按钮（SVG三横线） */
.playlist-btn {
position: absolute;
top: 30px;
left: 50%;
margin-left: 108px;
width: 24px;
height: 24px;
background: none;
border: none;
cursor: pointer;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
z-index: 35;
}
.playlist-btn svg {
stroke: #2b5e4f;
stroke-width: 2.2;
width: 20px;
height: 20px;
}
.playlist-btn:hover svg {
stroke: #1a392f;
}
/* 时间显示 */
#amazingaudioplayer-1 .amazingaudioplayer-time {
position: absolute;
top: 42px;
left: 20px;
color: #eee;
font-size: 12px;
font-weight: 600;
font-family: monospace;
background: rgba(255, 248, 225, 0);
padding: 0 8px;
border-radius: 20px;
}
/* ===== 音量控制（边框改细变淡） ===== */
#amazingaudioplayer-1 .amazingaudioplayer-volume {
position: absolute;
top: 30px;
left: 50%;
margin-left: 138px;
z-index: 40;
cursor: pointer;
}
#amazingaudioplayer-1 .amazingaudioplayer-volume-button {
width: 24px;
height: 24px;
background-image: url('https://lkvv99.s3.cn-north-1.jdcloud-oss.com/lkl/wys/audioplayerengine/volume-24-24-2.png');
background-repeat: no-repeat;
background-size: auto;
background-position: left top;
}
#amazingaudioplayer-1 .amazingaudioplayer-volume-bar {
position: absolute;
left: 50%;
margin-left: -10px;
bottom: 20%;
width: 6px;
height: 60px;
background-color:rgba(254, 252, 245, 0.4)
backdrop-filter: blur(0px);
border-radius: 3px;
padding: 8px 4px;
visibility: hidden;
opacity: 0;
transition: 0.15s;
margin-bottom: 8px;
border: 0.5px solid rgba(233, 226, 199, 0);
}
#amazingaudioplayer-1 .amazingaudioplayer-volume:hover .amazingaudioplayer-volume-bar,
#amazingaudioplayer-1 .amazingaudioplayer-volume-button:hover+.amazingaudioplayer-volume-bar {
visibility: visible;
opacity: 1;
}
#amazingaudioplayer-1 .amazingaudioplayer-volume-bar-adjust {
position: relative;
width: 100%;
height: 100%;
background-color:#d9d4b5;
border-radius: 20px;
overflow: hidden;
}
#amazingaudioplayer-1 .amazingaudioplayer-volume-bar-adjust-active {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 80%;
background:#429d7a;
border-radius: 20px;
}
/* ===== 进度条 ===== */
#amazingaudioplayer-1 .amazingaudioplayer-progress {
position: relative;
margin-top: 4px;
margin-bottom: 8px;
width: calc(100% - 32px);
height: 6px;
background-color: #d9d4b5;
cursor: pointer;
margin-left: auto;
margin-right: auto;
border-radius: 12px;
}
#amazingaudioplayer-1 .amazingaudioplayer-progress-loaded {
position: absolute;
left: 0;
top: 0;
height: 100%;
background-color: #bcb694;
width: 0%;
border-radius: 12px;
}
#amazingaudioplayer-1 .amazingaudioplayer-progress-played {
position: absolute;
left: 0;
top: 0;
height: 100%;
background:#429d7a;
width: 0%;
border-radius: 12px;
}
/* ===== 底部歌曲信息 ===== */
#amazingaudioplayer-1 .amazingaudioplayer-tracklist {
margin: 2px 16px 0;
background: rgba(235, 225, 200, 0.0);
border-radius: 20px;
padding: 4px 12px;
text-align: center;
}
.current-info {font-family:"Ma Shan Zheng","STKaiti","SimHei", cursive, serif;
font-size: 17px;bottom: 60px;position: absolute;
font-weight: 200;right: 10%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #eee;
}
.current-sub {position: absolute;margin: 6px 16px;
font-size: 13px;z-index: 10;
opacity: 1;
color: #eee;
}
/* ===== 播放列表浮层 ===== */
.playlist-dropdown {
position: absolute;
top: 90px;
right: 1%;
width: 220px;
display: none;
height: 450px;
background: rgba(255, 251, 240, 0.2);
backdrop-filter: blur(0px);
border-radius: 0px;
box-shadow: 0 20px 32px rgba(0, 0, 0, 0.25);
border: 0px solid rgba(210, 195, 150, 0.7);
z-index: 200;
overflow: hidden;
flex-direction: column;
}
.playlist-dropdown.show {
display: flex;
}
.dropdown-header {
padding: 10px 0px;
background: #efe6d2;
font-weight: 700;
color: #222;
display: flex;
justify-content: space-between;
border-bottom: 1px solid #ddd2b6;
}
.close-dropdown {
cursor: pointer;
font-size: 22px;
line-height: 1;
color: #eee;
}
.song-list {
list-style: none;
overflow-y: auto;
max-height: 620px;
margin: 0;
padding: 0;
}
.song-list li {
padding: 8px 16px;
font-size: 14px;
color: #fff000;
cursor: pointer;
display: flex;
gap: 10px;
border-bottom: 1px solid #f0e9d6;
transition: 0.1s;
}
.song-list li.active-song {
background: #0000;
font-weight: 300;
color: #eee;
}
.song-list li:hover {
background: #0000;
}
</style>
<div id="papa">
<img id = "zhezhao" src = "https://pic1.imgdb.cn/i/034RyKzgBDkHjULEfNKCk2.gif">
<img id = "wudao" src = "https://pic1.imgdb.cn/i/5J7YeInUWYhpX12NNsd6R1.gif">
<!-- ===== 播放器主体 ===== -->
<div id="amazingaudioplayer-1">
<div class="amazingaudioplayer-player-wrapper">
<!-- 歌词区域 -->
<div class="amazingaudioplayer-text">
<div class="amazingaudioplayer-lyrics">
<div id="lrc" data-lrc="♪ 加载中..." data-motion="cover1">♪ 加载中...</div>
</div>
</div>
<!-- 控制栏 -->
<div class="amazingaudioplayer-bar">
<div class="amazingaudioplayer-playpause">
<div class="amazingaudioplayer-play" id="playBtn"></div>
<div class="amazingaudioplayer-pause" id="pauseBtn" style="display:none;"></div>
</div>
<div class="amazingaudioplayer-prev" id="prevBtn"></div>
<div class="amazingaudioplayer-next" id="nextBtn"></div>
<div class="amazingaudioplayer-loop" id="loopBtn"></div>
<div class="amazingaudioplayer-time" id="timeDisplay">00:00 / 00:00</div>
<div class="amazingaudioplayer-volume">
<div class="amazingaudioplayer-volume-button" id="volBtn"></div>
<div class="amazingaudioplayer-volume-bar">
<div class="amazingaudioplayer-volume-bar-adjust" id="volAdjust">
<div class="amazingaudioplayer-volume-bar-adjust-active" id="volFill"></div>
</div>
</div>
</div>
<button class="playlist-btn" id="playlistBtn" title="播放列表">
<svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<line x1="3" y1="6" x2="21" y2="6"></line>
<line x1="3" y1="12" x2="21" y2="12"></line>
<line x1="3" y1="18" x2="21" y2="18"></line>
</svg>
</button>
</div>
<!-- 进度条 -->
<div class="amazingaudioplayer-progress" id="progressTrack">
<div class="amazingaudioplayer-progress-loaded" id="loadedBar"></div>
<div class="amazingaudioplayer-progress-played" id="playedBar"></div>
</div>
<!-- 底部歌曲信息 -->
<div class="amazingaudioplayer-tracklist">
<div class="current-info" id="currentSongName"></div>
</div>
</div>
</div>
<!-- 播放列表浮层 -->
<div id="playlistDropdown" class="playlist-dropdown">
<div class="dropdown-header">
<span>📖 播放列表</span>
<span class="close-dropdown" id="closeDropdownBtn">×</span>
</div>
<ul class="song-list" id="songListContainer"></ul>
</div>
<div class="current-sub" id="currentSongSub">mp3专辑播放器</div>
</div>
<script>
// ========== 歌曲数据 ==========
const songs = [{
title: "得意的笑(雷鬼版)/阿啸",
src: "http://music.163.com/song/media/outer/url?id=3372341193.mp3",
lrc: `得意的笑(雷鬼版) - 阿啸
人生本来就是一出戏
恩恩怨怨又何必太在意
名和利啊
什么东西
生不带来死不带去
世事难料人间的悲喜
今生无缘来生再聚
爱与恨哪
什么玩意
船到桥头自然行
且挥挥袖莫回头
饮酒作乐是时候
那千金虽好
快乐难找
我潇洒走过条条大道
我得意的笑
又得意的笑
笑看红尘人不老
我得意的笑
又得意的笑
求得一生乐逍遥
我得意的笑
又得意的笑
把酒当歌趁今朝
我得意的笑
又得意的笑
求得一生乐逍遥
人生本来就是一出戏
恩恩怨怨又何必太在意
名和利啊
什么东西
生不带来死不带去
世事难料人间的悲喜
今生无缘来生再聚
爱与恨哪
什么玩意
船到桥头自然行
且挥挥袖莫回头
饮酒作乐是时候
那千金虽好
快乐难找
我潇洒走过条条大道
我得意的笑
又得意的笑
笑看红尘人不老
我得意的笑
又得意的笑
求得一生乐逍遥
我得意的笑
又得意的笑
把酒当歌趁今朝
我得意的笑
又得意的笑
求得一生乐逍遥
`},{
title: "踏马寻花向自由/半吨兄弟",
src: "http://music.163.com/song/media/outer/url?id=3405360137.mp3",
lrc: `踏马寻花向自由
作词Lyrics: 疯狂的羊/作曲Composer: 郭仔
演唱Vocal: 半吨兄弟
我自有节奏天高任我游
我要逃离世俗的烦忧
命运的岔路口到底往哪走
随着微风四处去漂流
想喝李白的酒醉倒那忧愁
想与杜甫畅聊人生自由
随云朵去漫游跟鸟儿招招手
举杯邀明月叫三两好友
就别管那么多踏马肆意挥霍
岁月不过是一场蹉跎
不必计较太多世俗的对与错
去看向阳花开满那山坡
去远方摘一朵叫自由的花朵
纵马高歌肆意潇洒的活
燃篝火哼着歌找月儿陪着我
抛开世俗去找回那自我
想喝李白的酒醉倒那忧愁
想与杜甫畅聊人生自由
随云朵去漫游跟鸟儿招招手
举杯邀明月叫三两好友
就别管那么多踏马肆意挥霍
岁月不过是一场蹉跎
不必计较太多世俗的对与错
去看向阳花开满那山坡
去远方摘一朵叫自由的花朵
纵马高歌肆意潇洒的活
燃篝火哼着歌找月儿陪着我
抛开世俗去找回那自我
`},{
title: "从此天涯再不相逢/沧桑老吴",
src: "https://music.163.com/song/media/outer/url?id=3389789293.MP3",
lrc: `《从此天涯再不相逢》
作词：没心眼子
作曲：沧桑小杰
演唱：沧桑老吴
出品：亚伦影音工作室
从此天涯再不相逢
往后山河各自西东
往事匆匆吹尽长风
爱恨从此无影无踪
余生冷暖不再相拥
是非对错一笑包容
旧日情愫消散风中
你我缘分到此成空
人海漂泊独望长空
旧日情深埋入心中
一别之后各赴西穹
缘尽陌路不必相拥
酸甜苦辣独自去容
旧人旧事消散烟中
此生缘分到此皆空
一别千里再难相通
余生冷暖不再相拥
是非对错一笑包容
旧日情愫消散风中
你我缘分到此成空
人海漂泊独望长空
旧日情深埋入心中
一别之后各赴西穹
缘尽陌路不必相拥
酸甜苦辣独自去容
旧人旧事消散烟中
此生缘分到此皆空
一别千里再难相通
人海漂泊独望长空
旧日情深埋入心中
一别之后各赴西穹
缘尽陌路不必相拥
酸甜苦辣独自去容
旧人旧事消散烟中
此生缘分到此皆空
一别千里再难相通
`},{
title: "落雨的秋-孙晓雨",
src: "https://www.djdvd.com/plug/down.php?ac=music&lk=mp3&id=646e6433654868756141.mp3",
lrc: `落雨的秋-孙晓雨
词：刘艳梅
曲：王帅
出品：亚伦影音工作室
又是落叶飘零的秋
我站在拥挤的街头
静静守望 你归来的温柔
再次温暖我 寂寞的等候
又是候鸟南飞的时候
漫天秋雨诉说着离愁
几许回望 你远去的轻舟
泪水模糊我无助的眼眸
人世间有多少无望的守候
总是在这泛黄的清秋
新月如钩 谁伫立在窗口
一缕牵挂醉了几个秋
红尘中有多少无奈的分手
相思淋湿在多雨的秋
场景依旧 谁在风中驻守
一曲相思 绵绵永无休
又是候鸟南飞的时候
漫天秋雨诉说着离愁
几许回望 你远去的轻舟
泪水模糊我无助的眼眸
人世间有多少无望的守候
总是在这泛黄的清秋
新月如钩 谁伫立在窗口
一缕牵挂 醉了几个秋
红尘中有多少无奈的分手
相思淋湿在多雨的秋
场景依旧 谁在风中驻守
一曲相思 绵绵永无休
人世间有多少无望的守候
总是在这泛黄的清秋
新月如钩 谁伫立在窗口
一缕牵挂 醉了几个秋
红尘中有多少无奈的分手
相思淋湿在多雨的秋
场景依旧 谁在风中驻守
一曲相思 绵绵永无休
一曲相思 绵绵永无休
`},{
title: "云边的思念",
src: "https://music.163.com/song/media/outer/url?id=3379577341.mp3",
lrc: `《云边的思念》
演唱：陈嘉宇
编辑制作 :亚伦
云在天边风在耳畔
心事轻淡落满山川
路还很远你已不见
只剩想念绕在云间
云影慢慢飘向远方
心事轻轻无人来讲
晚风微凉旧梦一场
思念生长不肯遗忘
云边的思念
漫过了天边
风带一声念
落在你窗前
云边的思念
缠成了流年
不问多遥远
心一直相连
月落窗前星影浅浅
回忆蔓延温柔不变
云卷云舒岁岁年年
那份眷恋藏在心间
云过山岗风过旧巷
时光流淌念念不忘
梦有多长爱有多烫
云边守望等你回望
云边的思念
漫过了天边
风带一声念
落在你窗前
云边的思念
缠成了流年
不问多遥远
心一直相连
一朵云一片天
一句念一瞬间
爱未减情未变
守着云守着愿
云边的思念
漫过了天边
风带一声念
落在你窗前
云边的思念
缠成了流年
不问多遥远
心一直相连
云边思念岁岁安然
`},{
title: "转身又见秋-影子",
src: "https://www.panurl.cn/view.php/d8183cb6ddd05de0c3aaac3761a7c728.mp3",
lrc: `转身又见秋-影子
词: 四毛
曲: 李勇军
编曲: 姜凯升
和声: 雪无影
后期: 鲁晓锋
月亮替我倒满酒
秋风陪我醉了一宿
都说这世上酒能解忧
我却喝到泪湿眼眸
相思最怕绕指柔
才下眉间却上心头
对你的思念覆水难收
醉了曾经醉了今秋
那日我转身又见秋
才知你在心中不曾走
灯火阑珊处不见你回首
寂寞最是黄昏后
那日我转身又见秋
却不见你曾经的温柔
片片的落叶都是我的愁
原来爱比不爱更难受
相思最怕绕指柔
才下眉间却上心头
对你的思念覆水难收
醉了曾经醉了今秋
那日我转身又见秋
才知你在心中不曾走
灯火阑珊处不见你回首
寂寞最是黄昏后
那日我转身又见秋
却不见你曾经的温柔
片片的落叶都是我的愁
原来爱比不爱更难受
那日我转身又见秋
才知你在心中不曾走
灯火阑珊处不见你回首
寂寞最是黄昏后
那日我转身又见秋
却不见你曾经的温柔
片片的落叶都是我的愁
原来爱比不爱更难受
`
}, {
title: "恋曲1990（律动男版）",
src: "http://music.163.com/song/media/outer/url?id=3389354291.mp3",
lrc: `恋曲1990（律动男版） DJ阿涵
音画设计：亚伦影音工作室
乌溜溜的黑眼珠和你的笑脸
怎么也难忘记你容颜的转变
轻飘飘的旧时光就这么溜走
转头回去看看时已匆匆数年
苍茫茫的天涯路是你的飘泊
寻寻觅觅长相守是我的脚步
黑漆漆的孤枕边是你的温柔
醒来时的清晨里是我的哀愁
或许明日太阳西下倦鸟已归时
你将已经踏上旧时的归途
人生难得再次寻觅相知的伴侣
生命终究难舍蓝蓝的白云天
轰隆隆的雷雨声在我的窗前
怎么也难忘记你离去的转变
孤单单的身影后寂寥的心情
永远无怨的是我的双眼
苍茫茫的天涯路是你的飘泊
寻寻觅觅长相守是我的脚步
黑漆漆的孤枕边是你的温柔
醒来时的清晨里是我的哀愁
或许明日太阳西下倦鸟已归时
你将已经踏上旧时的归途
人生难得再次寻觅相知的伴侣
生命终究难舍蓝蓝的白云天
轰隆隆的雷雨声在我的窗前
怎么也难忘记你离去的转变
孤单单的身影后寂寥的心情
永远无怨的是我的双眼
永远无怨的是我的双眼`
}, {
title: "新鸳鸯蝴蝶梦",
src: "https://www.panurl.cn/view.php/a419b9d1a4112ea840aff217b909a6c0.m4a",
lrc: `嘉欣《新鸳鸯蝴蝶梦》
音画设计：亚伦影音工作室
没有三分爱意在
怎惹七分伤与害
爱恋一对字 拆不开
旧爱一声再见后
转眼新欢走过来
爱新不爱旧 还是爱
历遍风花与雪月
可有结果可有缘
想天想地 太辛酸
乱世心慌意更乱
找个青天许个愿
怨天且怨地 难尽怨
鸳鸯似永远不死
哪管哪段年代
红男绿女都相信相爱
可化蝶远飞
旧戏新做 化作传奇
最易惹乐与悲
最难判是与非
又甜又苦全是戏
没有三分爱意在
怎惹七分伤与害
爱恋一对字 拆不开
旧爱一声再见后
转眼新欢走过来
爱新不爱旧 还是爱
鸳鸯似永远不死
哪管哪段年代
红男绿女都相信相爱
可化蝶远飞
旧戏新做 化作传奇
最易惹乐与悲
最难判是与非
又甜又苦全是戏
`
}, {
title: "落日留恋的地方",
src: "https://music.163.com/song/media/outer/url?id=3389032274.mp3",
lrc: `落日留恋的地方
作词：铃花花
作曲：铃花花
演唱：铃花花
编辑制作：亚伦
呼伦湖含着斜阳
候鸟衔来半片暮色
马头琴轻摇着金色光阴
锡林郭勒 成了歌的故乡
科尔沁草原绿了又黄
云影低垂 风也很凉
宝格达乌拉神山沉默不语
这里是落日最美的地方
你走后 晚霞也变得苍茫
草原姑娘从不掉眼泪
只把思念藏进草场
心随云雁 划向远方
科尔沁草原绿了又黄
云影低垂 风也很凉
宝格达乌拉神山沉默不语
这里是落日最美的地方
你走后 晚霞也变得苍茫
草原姑娘从不掉眼泪
只把思念藏进草场
心随云雁 划向远方
心随云雁 划向远方
`
}, {
title: "珊瑚颂 (雷鬼版)",
src: "https://music.163.com/song/media/outer/url?id=3384778015.mp3",
lrc: `珊瑚颂 (雷鬼版) - 大头钉团队
词：赵忠/钟艺兵/林萌梧/单文
曲：胡士平/王锡仁
一树红花照碧海
一团火焰出水来
珊瑚树红春常在
风里浪里花常开
哎
云来遮
雾来盖
云里雾里放光彩
风吹来
浪打来
风吹浪打花常开
一树红花照碧海
一团火焰出水来
珊瑚树红春常在
风里浪里花常开
哎
云来遮
雾来盖
云里雾里放光彩
风吹来
浪打来
风吹浪打花常开
`
}];
// ========== DOM 引用 ==========
var audio = new Audio();
var playBtn = document.getElementById('playBtn');
var pauseBtn = document.getElementById('pauseBtn');
var prevBtn = document.getElementById('prevBtn');
var nextBtn = document.getElementById('nextBtn');
var loopBtn = document.getElementById('loopBtn');
var timeDisplay = document.getElementById('timeDisplay');
var progressTrack = document.getElementById('progressTrack');
var loadedBar = document.getElementById('loadedBar');
var playedBar = document.getElementById('playedBar');
var volBtn = document.getElementById('volBtn');
var volFill = document.getElementById('volFill');
var volAdjust = document.getElementById('volAdjust');
var lrcElement = document.getElementById('lrc');
var currentSongNameSpan = document.getElementById('currentSongName');
var currentSongSub = document.getElementById('currentSongSub');
var playlistBtn = document.getElementById('playlistBtn');
var closeDropdownBtn = document.getElementById('closeDropdownBtn');
var dropdown = document.getElementById('playlistDropdown');
var songListContainer = document.getElementById('songListContainer');
// ========== 状态 ==========
var currentIndex = 0;
var isPlaying = false;
var loopMode = 0;
var volume = 0.80;
var isDragging = false;
var lyricsData = [];
var currentLrcIndex = -1;
var motionFlag = true;
// ========== 工具 ==========
function formatTime(sec) {
if (isNaN(sec) || !isFinite(sec) || sec < 0) return '00:00';
var m = Math.floor(sec / 60);
var s = Math.floor(sec % 60);
return String(m).padStart(2, '0') + ':' + String(s).padStart(2, '0');
}
function parseLrc(lrcStr) {
if (!lrcStr) return [];
var lines = lrcStr.split(/\r?\n/);
var items = [];
var regex = /\[(\d{2}):(\d{2}\.\d{2})\]/;
for (var i = 0; i < lines.length; i++) {
var line = lines;
var m = line.match(regex);
if (m) {
var t = parseInt(m) * 60 + parseFloat(m);
var txt = line.replace(regex, '').trim();
if (txt && !txt.includes('LRC编辑') && !txt.includes('歌手：') && !txt.includes('词：') && !txt.includes(
'曲：')) {
items.push({ time: t, lrc: txt });
}
}
}
items.sort(function(a, b) { return a.time - b.time; });
for (var j = 0; j < items.length; j++) {
items.duration = (j + 1 < items.length) ? items.time - items.time : 4.0;
if (items.duration <= 0.2) items.duration = 0.8;
}
return items;
}
function renderSongList() {
songListContainer.innerHTML = '';
for (var i = 0; i < songs.length; i++) {
var li = document.createElement('li');
li.className = i === currentIndex ? 'active-song' : '';
li.innerHTML = '<span>' + String(i + 1).padStart(2, '0') + '</span><span>' + songs.title + '</span>';
li.onclick = (function(idx) {
return function() {
if (currentIndex === idx) { closeDropdown(); return; }
loadSong(idx);
if (!isPlaying) play();
else audio.play().catch(function() {});
closeDropdown();
};
})(i);
songListContainer.appendChild(li);
}
}
function loadSong(idx) {
if (idx < 0) idx = 0;
if (idx >= songs.length) idx = songs.length - 1;
currentIndex = idx;
var s = songs;
var wasPlaying = isPlaying;
audio.pause();
audio.src = s.src;
audio.load();
lyricsData = parseLrc(s.lrc);
currentLrcIndex = -1;
if (lyricsData.length) {
lrcElement.innerText = lyricsData.lrc;
lrcElement.setAttribute('data-lrc', lyricsData.lrc);
lrcElement.style.setProperty('--tt', '0.8s');
lrcElement.style.setProperty('--state', 'paused');
} else {
lrcElement.innerText = "♪ ";
lrcElement.setAttribute('data-lrc', "♪");
}
currentSongNameSpan.innerText = s.title;
currentSongSub.innerText = "mp3专辑播放器";
renderSongList();
if (wasPlaying) {
audio.play().then(function() {
isPlaying = true;
updateBtnUI();
lrcElement.style.setProperty('--state', 'running');
fullRefreshLyrics();
}).catch(function(e) { console.warn("自动播放被阻止"); });
} else {
isPlaying = false;
updateBtnUI();
lrcElement.style.setProperty('--state', 'paused');
fullRefreshLyrics();
}
}
function updateBtnUI() {
playBtn.style.display = isPlaying ? 'none' : 'block';
pauseBtn.style.display = isPlaying ? 'block' : 'none';
}
function applyLyrics(txt, dur) {
lrcElement.innerText = txt;
lrcElement.setAttribute('data-lrc', txt);
var newMotion = motionFlag ? 'cover1' : 'cover2';
lrcElement.setAttribute('data-motion', newMotion);
motionFlag = !motionFlag;
lrcElement.style.setProperty('--state', 'paused');
void lrcElement.offsetHeight;
var d = Math.max(0.3, Math.min(dur, 3.2));
lrcElement.style.setProperty('--tt', d + 's');
if (isPlaying && !audio.paused) lrcElement.style.setProperty('--state', 'running');
else lrcElement.style.setProperty('--state', 'paused');
}
function refreshLrc(ct) {
if (!lyricsData.length) return;
var idx = -1;
for (var i = lyricsData.length - 1; i >= 0; i--) {
if (ct >= lyricsData.time - 0.03) {
idx = i;
break;
}
}
if (idx === -1 && lyricsData.length) idx = 0;
if (idx === currentLrcIndex) {
if (currentLrcIndex >= 0 && isPlaying && !audio.paused) {
var remain = Math.max(0.2, lyricsData.duration - (ct - lyricsData
.time));
if (remain > 0.1) {
lrcElement.style.setProperty('--state', 'paused');
void lrcElement.offsetHeight;
lrcElement.style.setProperty('--tt', remain + 's');
lrcElement.style.setProperty('--state', 'running');
}
}
return;
}
if (idx >= 0 && idx < lyricsData.length) {
currentLrcIndex = idx;
var remain2 = lyricsData.duration;
if (ct > lyricsData.time) remain2 = Math.max(0.2, lyricsData.duration - (ct - lyricsData
.time));
applyLyrics(lyricsData.lrc, remain2);
}
}
function fullRefreshLyrics() {
if (audio.duration) refreshLrc(audio.currentTime);
}
function updateUI() {
if (!audio.duration) return;
var pct = (audio.currentTime / audio.duration) * 100;
playedBar.style.width = pct + '%';
timeDisplay.textContent = formatTime(audio.currentTime) + ' / ' + formatTime(audio.duration);
refreshLrc(audio.currentTime);
if (audio.buffered.length) {
var loaded = audio.buffered.end(audio.buffered.length - 1);
loadedBar.style.width = Math.min((loaded / audio.duration) * 100, 100) + '%';
}
}
function play() {
audio.play().then(function() {
isPlaying = true;zhezhao.src = "https://pic1.imgdb.cn/i/034RyKzgBDkHjULEfNKCk2.gif";
wudao.src = "https://pic1.imgdb.cn/i/5J7YeInUWYhpX12NNsd6R1.gif";
updateBtnUI();
lrcElement.style.setProperty('--state', 'running');
fullRefreshLyrics();
}).catch(function(e) { console.log("播放失败，请手动点击"); });
}
function pause() {
audio.pause();zhezhao.src = "https://pic1.imgdb.cn/i/034S2wJ5hjotGpXHHythL2.png";
wudao.src = "https://pic1.imgdb.cn/i/034S4u8q3nNubRoi48XQ74.png";
isPlaying = false;
updateBtnUI();
lrcElement.style.setProperty('--state', 'paused');
}
function togglePlay() { isPlaying ? pause() : play(); }
function prevSong() {
var idx = (currentIndex - 1 + songs.length) % songs.length;
loadSong(idx);
if (!isPlaying) play();
else audio.play().catch(function() {});
}
function nextSong() {
var idx = (currentIndex + 1) % songs.length;
loadSong(idx);
if (!isPlaying) play();
else audio.play().catch(function() {});
}
function toggleLoop() {
loopMode = 1 - loopMode;
loopBtn.style.backgroundPosition = loopMode ? 'center top' : 'left top';
}
function setProgressByEvent(e) {
var rect = progressTrack.getBoundingClientRect();
var x = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
if (audio.duration && !isNaN(audio.duration) && isFinite(audio.duration) && audio.duration > 0) {
audio.currentTime = x * audio.duration;
}
playedBar.style.width = (x * 100) + '%';
timeDisplay.textContent = formatTime(audio.currentTime) + ' / ' + formatTime(audio.duration);
}
function setVolume(val) {
volume = Math.max(0, Math.min(1, val));
audio.volume = volume;
volFill.style.height = (volume * 100) + '%';
volBtn.style.backgroundPosition = (volume === 0 ? 'right top' : 'left top');
}
function setVolumeByEvent(e) {
var rect = volAdjust.getBoundingClientRect();
var y = Math.max(0, Math.min(1, 1 - (e.clientY - rect.top) / rect.height));
setVolume(y);
}
function openDropdown() { renderSongList();
dropdown.classList.add('show'); }
function closeDropdown() { dropdown.classList.remove('show'); }
// ========== 事件绑定 ==========
playBtn.addEventListener('click', togglePlay);
pauseBtn.addEventListener('click', togglePlay);
prevBtn.addEventListener('click', prevSong);
nextBtn.addEventListener('click', nextSong);
loopBtn.addEventListener('click', toggleLoop);
progressTrack.addEventListener('click', function(e) { setProgressByEvent(e); });
progressTrack.addEventListener('mousedown', function(e) {
isDragging = true;
setProgressByEvent(e);
document.addEventListener('mousemove', onDragMove);
document.addEventListener('mouseup', onDragEnd);
e.preventDefault();
});
function onDragMove(e) { setProgressByEvent(e); }
function onDragEnd(e) {
isDragging = false;
setProgressByEvent(e);
document.removeEventListener('mousemove', onDragMove);
document.removeEventListener('mouseup', onDragEnd);
}
volBtn.addEventListener('click', function() { setVolume(volume > 0 ? 0 : 0.8); });
volAdjust.addEventListener('mousedown', function(e) {
setVolumeByEvent(e);
document.addEventListener('mousemove', onVolMove);
document.addEventListener('mouseup', onVolEnd);
e.preventDefault();
});
function onVolMove(e) { setVolumeByEvent(e); }
function onVolEnd(e) {
setVolumeByEvent(e);
document.removeEventListener('mousemove', onVolMove);
document.removeEventListener('mouseup', onVolEnd);
}
playlistBtn.addEventListener('click', function(e) {
e.stopPropagation();
dropdown.classList.contains('show') ? closeDropdown() : openDropdown();
});
closeDropdownBtn.addEventListener('click', closeDropdown);
document.addEventListener('click', function(e) {
if (dropdown.classList.contains('show') && !dropdown.contains(e.target) && e.target !== playlistBtn && !playlistBtn
.contains(e.target)) {
closeDropdown();
}
});
audio.addEventListener('timeupdate', updateUI);
audio.addEventListener('loadedmetadata', function() {
if (lyricsData.length) applyLyrics(lyricsData.lrc, lyricsData.duration);
updateUI();
if (isPlaying) play();
});
audio.addEventListener('ended', function() {
if (loopMode === 1) {
audio.currentTime = 0;
audio.play().catch(function() {});
fullRefreshLyrics();
} else {
nextSong();
}
});
document.addEventListener('keydown', function(e) {
if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
if (e.code === 'Space') { e.preventDefault();
togglePlay(); }
});
// ========== 初始化 ==========
setVolume(0.8);
loopBtn.style.backgroundPosition = 'left top';
loadSong(0);
// 自动播放
setTimeout(function() {
play();
}, 500);
console.log(' 播放器已加载');
</script>
欣赏佳作！
歌声动人，余音绕梁。 制作大气 期待亚伦影音工作室佳作频出！
感谢亚伦影音工作室带来的精彩，辛苦了！中秋将至，阖家幸福。 构思新颖，效果漂亮，谢谢亚伦老师精彩示范{:4_190:}
页:
[1]