山坡上的风吹过我门前等----10首联播
本帖最后由 亚伦影音工作室 于 2026-10-26 18:56 编辑 <br /><br /><meta charset="UTF-8"><style>@import url("https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap");
#papa{
margin: 30px 0 0px calc(50% - 680px);
width: 1286px;
height: 720px;
background:#800000;
box-shadow: 3px 3px 20px #000;
user-select: none;
overflow: hidden;
position: relative;
z-index: 42111; --state: running;
}
#intro {margin: 0px0px;
width: 100%;
height:100%;
position: absolute;
background:#800000;
background-size: cover;
opacity:1;
animation: color 4s linear infinite var(--state);
}
.photo{
width: 100%;-webkit-mask-image: radial-gradient(black 25% ,transparent 85%);
height: 100%;position:absolute; position: absolute;top:0px; left:0px;
animation: round 16s infinite var(--state);
opacity: 0;
}
@keyframes round {
25% {
opacity: 1;
}
40% {
opacity: 0;
}
}
img:nth-child(1) {
animation-delay: 12s;
}
img:nth-child(2) {
animation-delay: 8s;
}
img:nth-child(3) {
animation-delay: 4s;
}
img:nth-child(4) {
animation-delay: 0s;
}
/* ===== 播放器父元素===== */
#bfqfq {z-index: 2;
width: 580px;height:320px;
transform:translate(0%,0%)scale(0.6);
top: 310px; left: 740px;
position: absolute;
}
/* ===== 播放器子元素 ===== */
#amazingaudioplayer-1 {box-shadow:0px 0px 0px 2px #fff000, 0px 0px 0px 12px #123456;
width: 550px;height:140px;
max-width: 100%;
margin: 0 0%;
top: 76px;
background:rgba(0,0,250, 0.2);
backdrop-filter: blur(20px);
border-radius: 10px;
z-index: 3;
font-family: 'Segoe UI', 'Noto Sans', system-ui, 'Microsoft YaHei', sans-serif;
position: absolute;
}
#cp {position:absolute; width:220px; height:260px;top: -50px; left: 0px; z-index: 1;}
@keyframes color { from {
filter: hue-rotate(0);
}
to {
filter: hue-rotate(360deg);
}
}
/* =====仿频谱元素===== */
#pp{position:absolute;animation: color 1s linear 1.5s infinite var(--state);
width:450px;height:160px; top: -40px; left: 140px;
}
.pp img{
height:100%}
/* ===== 播放器子元素 ===== */
.amazingaudioplayer-text {position: relative;
padding: 10px 12px 0px;
top: 80%;
text-align: center;
}
/* =====唱碟元素===== */
#tp{position:absolute;width: 280px;height: 280px;left: 20px;top:0px;border-radius: 50%;box-shadow:0px 0px 0px 1px #fff124,0px 0px 0px 13px #123456; animation:tion3s linear 1.5s infinite var(--state),color 3s linear 1.5s infinite var(--state); }
@keyframes tion { 0% {} 100% { transform:rotate(360deg) } }
/* =====歌词元素===== */
#lrc {position:absolute; --motion: cover2;--tt: 1s; left: 50%;top:52%;transform: translate(-50%);perspective: 320px;
font:normal 3em "Ma Shan Zheng","STKaiti"; color:#0000; z-index: 21;animation: color1 1s linear infinite var(--state);}
#lrc::before {position:absolute; content: attr(data-lrc); text-align: center;width: 100%; height: 100%; color: transparent; white-space: pre;background: linear-gradient(40deg, #1E9600 0%,#FFF200 50%,#FF0000 100%); filter: drop-shadow( 0px 0px 1px #000000)drop-shadow( 0px 0px 1px #000000); -webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards; animation-play-state: var(--state); }
#lrc::before {
animation-name:cover1;
}
#lrc::before {
animation-name:cover2;
}
#bs {animation: color1 3s linear infinite ;}
@keyframes color1 { 50% { filter: hue-rotate(360deg)brightness(260%);} }
@keyframes cover1 {
0% {transform: rotate3d(0, 1, 0, 0deg);}
50% {transform: rotate3d(0, 1, 0, -360deg);}
100% {transform: rotate3d(0, 1, 0, -360deg);}
}
@keyframes cover2 {0% {transform: rotate3d(0, 1, 0, 0deg);}
50% {transform: rotate3d(0, 1, 0, -360deg);}
100% {transform: rotate3d(0, 1, 0, -360deg);}
}
/* =====按钮控制栏===== */
.amazingaudioplayer-bar {
position: relative; left: 100px;
height: 0px;top: 80px;
}
/* 播放/暂停 */
.amazingaudioplayer-playpause {z-index: 4;
position: absolute;
left: 50%;
margin-left: -24px;
top: 12px;
}
.amazingaudioplayer-play,
.amazingaudioplayer-pause {
width: 45px;
height: 45px;
background: url('https://pic1.imgdb.cn/i/034VyZNyJ2UhU8KPoC2ljy.png')no-repeat center/cover;
cursor: pointer;
}
.amazingaudioplayer-play {
background-position: right top;
}
.amazingaudioplayer-pause {
background-position: left top;
display: none;
}
/* 上一首 */
.amazingaudioplayer-prev {
position: absolute;
left: 50%;
margin-left: -70px;
top: 12px;
width: 42px;
height: 42px;
background: url('https://pic1.imgdb.cn/i/034VyZNybLaIcBahgr7d1n.png')no-repeat center/cover;
z-index: 4;
background-position: left top;
cursor: pointer;
}
/* 下一首 */
.amazingaudioplayer-next {
position: absolute;z-index: 4;
left: 50%;
margin-left: 30px;
top: 12px;
width: 40px;
height: 40px;
background: url('https://pic1.imgdb.cn/i/034VyZNybLaIcBahgr7d1n.png')no-repeat center/cover;
background-position: right top;
cursor: pointer;
}
/* 循环按钮 */
.amazingaudioplayer-loop {
position: absolute;z-index: 2;
top: 24px;filter: invert(100%);
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;z-index: 3;
top: 24px;
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: #eee;
stroke-width: 2.2;
width: 20px;
height: 20px;
}
.playlist-btn:hover svg {
stroke: #00aa12;
}
/* 时间显示 */
.amazingaudioplayer-time {
position: absolute;
top: 20px;
left: 90px;
color: #eee;
font-size: 14px;
font-weight: 500;
font-family: monospace;
background: rgba(255, 248, 225, 0);
padding: 0 8px;
border-radius: 20px;
}
/* 音量等控制 */
.amazingaudioplayer-volume {
position: absolute;
top: 24px;
left: 50%;filter: invert(100%);
margin-left: 138px;
z-index: 40;
cursor: pointer;
}
.amazingaudioplayer-volume-button {
width: 26px;
height: 26px;
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-volume-bar {
position: absolute;
left: 50%;
margin-left: -10px;
bottom: 20%;
width: 6px;
height: 36px;
background-color:rgba(254, 252, 245, 0);
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-volume:hover .amazingaudioplayer-volume-bar,
.amazingaudioplayer-volume-button:hover+.amazingaudioplayer-volume-bar {
visibility: visible;
opacity: 1;
}
.amazingaudioplayer-volume-bar-adjust {
position: relative;
width: 100%;
height: 100%;
background-color:#000;
border-radius: 20px;
overflow: hidden;
}
.amazingaudioplayer-volume-bar-adjust-active {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 80%;
background:#429d7a;
border-radius: 20px;
}
/* ===== 进度条 ===== */
.amazingaudioplayer-progress {
position: relative;
top: 80px;
margin-bottom: 0px;
width:360px;
height: 3px;
background: #fff;
cursor: pointer;
left: 180px;z-index: 6;
margin-right: auto;
border-radius: 12px;
}
.amazingaudioplayer-progress-loaded {
position: absolute;
left: 0;
top: 0;
height: 100%;
background: #bcb694;
width: 0%;
border-radius: 12px;
}
.amazingaudioplayer-progress-played {
position: absolute;
left: 0;
top: 0;
height: 100%;
background:#00aa34;
width: 0%;
border-radius: 12px;
}
/* ===== 歌曲信息 ===== */
.amazingaudioplayer-tracklist {z-index: 3;
margin: 10px 60px;position: absolute;
background: rgba(235, 225, 200, 0);
border-radius: 0px;
padding: 0px 12px;
text-align: center;
}
.current-info {font-family:"Ma Shan Zheng","STKaiti","SimHei", cursive, serif;
font-size: 30px;
font-weight: 300;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transform-origin:top;
color: #fff100; animation:yao 1.0s linear infinite alternate var(--state), color 2s linear 1.5s infinite var(--state);
text-shadow: 0 2px 2px rgba(0, 0, 0, 1);
}
@keyframes yao { from{transform:perspective(300px) rotatex(30deg)} to{transform:perspective(300px) rotatex(-30deg)} }
.current-sub {
font-size: 13px;
opacity: 0;
color: #2b5e4f;
}
/* ===== 播放列表浮层 ===== */
.playlist-dropdown {
position: absolute;
bottom: 160px;
right: 62%;
width: 420px;
max-height: 560px;
z-index: 200;
overflow: hidden;
display: none;
flex-direction: column;
}
.playlist-dropdown.show {display: flex;
}
.dropdown-header {
padding: 0px 0px;
font-weight: 600;
display: none;
display: flex;left: 0px;
justify-content: space-between;
border-bottom: 0px solid #ddd2b6;
}
.close-dropdown {
cursor: pointer;
font-size: 22px;
line-height: 1;
color: #ff0000;
}
.song-list {
list-style: none;
overflow-y: auto;
max-height: 500px;
margin: 0;
padding: 0;
}
.song-list li {
padding: 6px 16px;
font-size: 14px;
color: #fff;
cursor: pointer;
display: flex;
gap: 10px;
border-bottom: 0px solid #f0e9d6;
transition: 0.1s;
}
.song-list li.active-song {
background: #0000;
font-weight: 700;
color: #ff0000;
}
.song-list li:hover {
background: #0000;
}
#fullscreen { position: absolute; top: 30px; right:30px;font: normal 2em/0em 楷体;color:#fff000; opacity: 1; cursor: pointer; animation: color 2s linearinfinite var(--state);z-index: 111}
</style>
<div id="papa">
<div id="intro"></div>
<div>
<img class='photo'src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/71ffec53bb67ec510bac752ce1c5ea25.jpg" alt="" />
<img class='photo'src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/9b97b03e68b10f92144f96a2d124d66b.png" alt="" />
<img class='photo'src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/4f500524d240b5ee5fd23de1c070e3fa.jpg" alt="" />
<img class='photo'src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/bd6b63dd6cbd6efb2f94f6bce346ce20.jpg" alt="" />
</div>
<span id="fullscreen">全屏欣赏</span>
<!-- 歌词区域 -->
<div class="amazingaudioplayer-text">
<div class="amazingaudioplayer-lyrics">
<div id="lrc" data-lrc="♪ ..." >♪ ...</div>
</div>
</div>
<!-- =====播放器主体 ===== -->
<div id="bfqfq">
<div><img id="tp"src = "https://pic1.imgdb.cn/i/034Sa0XFUdJ2G5gG40NzCe.png"></div>
<div id="amazingaudioplayer-1">
<div class="amazingaudioplayer-player-wrapper">
<img src="https://pic1.imgdb.cn/i/034VPqxM5kWQ3Kz81Zmrk5.gif"id="pp" />
<!---->
<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><img src="https://pic1.imgdb.cn/i/034VFM3wcR3T02UUIYOUgo.png"id="cp" /></div>
</div>
</div>
</div>
<!--歌曲信息-->
<div class="amazingaudioplayer-tracklist">
<div class="current-info" id="currentSongName"></div>
<div class="current-sub" id="currentSongSub">mp3</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>
<script>
// ========== 歌曲数据 ==========
const songs = [{
title: "《我向山河借束光》念兮",
src: "https://music.163.com/song/media/outer/url?id=3436389449.MP3",
lrc: `《我向山河借束光》念兮
演唱：念兮
编辑制作：亚伦
我向山河借束光
我曾站在山口望
看云落在远方
问过多少次自己
要去哪里流浪
后来背起了行囊
走向陌生地方
才发现每次告别
都是新的成长
我向山河借束光
照亮心里的方向
借一阵长风飞翔
穿过岁月的漫长
我向山河借束光
不是为了躲风霜
等我走过万里路
也成为自己的光
我听过草原回响
也见过人海茫茫
有些梦想没人懂
就自己慢慢珍藏
我走过低谷迷惘
也拥抱过月亮
那些曾经的眼泪
都变成今日锋芒
我向山河借束光
照亮心里的方向
借一阵长风飞翔
穿过岁月的漫长
我向山河借束光
不是为了躲风霜
等我走过万里路
也成为自己的光
我向山河借束光
照亮未来的远方
不问前路多漫长
心中一直有太阳
我向山河借束光
也把光留在人间
当我回望来时路
已经站在山岗上
`},{
title: "《山坡上的风吹过我门前》故事人生",
src: "https://music.163.com/song/media/outer/url?id=3427143093.mp3",
lrc: `《山坡上的风吹过我门前》
演唱：故事人生
编辑制作：亚伦
山坡上的风哟吹过我门前
竹林里的鸟哟唱到我心尖
你从那条小路慢慢走上来
我看你一眼哟脸就红开来
你挑着一筐花哟脚步轻又快
我手里的茶碗哟差点端不稳
山泉水叮咚哟绕过青石板
我想跟你说话哟又怕人听见
哎哟喂山高路不远
你来我就欢喜
哎哟喂风吹松树尖
把我的心吹起
山坡上等你等你来
等你把春天带进来
山坡上等你等你来
等你把笑声唱开来
山坡上等你别走远
我在这里望着天
山坡上等你等你来
今晚月亮最圆
石榴花开了哟
`
}, {
title: "《你一天比一天老》红尘兄弟",
src: "https://music.163.com/song/media/outer/url?id=3420287968.mp3",
lrc:`《你一天比一天老》
作词 : 广羽人彡
作曲 : KING 老舅
演唱：红尘兄弟
编辑制作: 亚伦
你一天比一天老
也一天比一天少
累了你就歇歇脚
要把自己照顾好
人生在世走一遭
健康平安最重要
看淡得失少计较
珍惜当下每一秒
你一天比一天老
也一天比一天少
钱重要命更重要
粗茶淡饭也能饱
开开心心没烦恼
糊里糊涂也挺好
心态常青人不老
知足常乐才是宝
你一天比一天老
也一天比一天少
累了你就歇歇脚
要把自己照顾好
人生在世走一遭
健康平安最重要
看淡得失少计较
珍惜当下每一秒
你一天比一天老
也一天比一天少
钱重要命更重要
粗茶淡饭也能饱
开开心心没烦恼
糊里糊涂也挺好
心态常青人不老
知足常乐才是宝
`
}, {
title: "《我把半生说给秋天》卓吉拉姆",
src: "http://music.163.com/song/media/outer/url?id=3431161107.mp3",
lrc: `我把半生说给秋天(律动版)
作词：山川
作曲：山川
编曲：卓吉拉姆
出品：亚伦影音工作室
人到半程才懂得流年
走着走着有些人就走远。
我把清纯放在心里面，
一走多年再回不到从前。
曾经总以为来日方长，
总以为错过还能再见。
直到秋风吹过那片草原，
才发现有些告别就是永远。
我把半生说给了秋天，
说那些走远的人和从前。
说年轻时不懂的聚散，
说后来再也回不去的那一年。
我把心事藏进了冬天，
把多少委屈都交给时间。
曾以为放下只在一瞬间，
直到秋叶落尽思念无边，
才明白有些人一生都难忘却。
曾经总以为来日方长，
总以为错过还能再见。
直到秋风吹过那片草原，
才发现有些告别就是永远。
我把半生说给了秋天，
说那些走远的人和从前。
说年轻时不懂的聚散，
说后来再也回不去的那一年。
我把心事藏进了冬天，
把多少委屈都交给时间。
曾以为放下只在一瞬间，
直到秋叶落尽思念无边，
才明白有些人一生都难忘却。
`
}, {
title: "《一念情深一念伤》故事人生",
src: "https://music.163.com/song/media/outer/url?id=3398334015.mp3",
lrc: `《一念情深一念伤》
演唱：故事人生
编辑制作：潇湘翁
泪湿孤枕夜未央
往事不堪回首望
苦酒本是痴人酿
杯杯入喉断愁肠
一场回忆一场霜
滴滴眼泪汇汪洋
半生痴情结成伤
相思入骨无处藏
一念情深一念伤
爱来爱去散了场
余生独自度寒凉
半生痴念空守旧时光
一念情深一念伤
只叹纸短相思长
我若提笔诉衷肠
字字句句赋予谁人讲
泪湿孤枕夜未央
往事不堪回首望
苦酒本是痴人酿
杯杯入喉断愁肠
一场回忆一场霜
滴滴眼泪汇汪洋
半生痴情结成伤
相思入骨无处藏
一念情深一念伤
爱来爱去散了场
余生独自度寒凉
半生痴念空守旧时光
一念情深一念伤
只叹纸短相思长
我若提笔诉衷肠
字字句句赋予谁人讲
`
},{
title: "《我把思念留在秋天》云卓拉姆",
src: "https://music.163.com/song/media/outer/url?id=3440587097.mp3",
lrc: `《我把思念留在秋天》
作词 : 云卓拉姆
作曲 : 云卓拉姆
演唱: 云卓拉姆
编辑制作: 潇湘翁
我把思念留在秋天
让秋风带我吹到你身边
吹过雪山吹过草原
吹到哪里都有我的挂念
我把思念留在秋天
让每一片落叶替我想念
花开花落又是一年
你是否也会想起从前
秋风一吹我就想起你
吹过哪里都有你痕迹
我把想念写进秋里
随着秋风飘向你
秋叶一落我又念起你
落满了草原都是回忆
一片一片落在心底
把我心意寄给你
我把思念留在秋天
让秋风带我吹到你身边
吹过雪山吹过草原
吹到哪里都有我的挂念
我把思念留在秋天
让每一片落叶替我想念
花开花落又是一年
你是否也会想起从前
秋风一吹我就想起你
吹过哪里都有你痕迹
我把想念写进秋里
随着秋风飘向你
秋叶一落我又念起你
落满了草原都是回忆
一片一片落在心底
把我心意寄给你
`
}, {
title: "《秋风又绵绵落叶又翩翩》烟嗓青叔",
src: "https://music.163.com/song/media/outer/url?id=3439718248.mp3",
lrc:` 《秋风又绵绵落叶又翩翩》
作词 : 林子祺
作曲 : 林子祺
演唱：烟嗓青叔
编辑制作：潇湘翁
秋风又绵绵落叶又翩翩
转眼之间又一年
走过半生尝尽了苦甜
多少往事藏心间
回忆一件件浮现在眼前
有笑也有泪流年
曾经熟悉的人渐渐走远
只剩孤灯伴长夜
不知不觉鬓角添了白
不知不觉脚步慢下来
曾经想去的远方
还藏在心里的口袋
这一生有过苦也有甜
有些遗憾留给昨天
看着窗外秋叶落下
学会和遗憾说再见
秋风又绵绵落叶又翩翩
转眼之间又一年
走过半生尝尽了苦甜
多少往事藏心间
回忆一件件浮现在眼前
有笑也有泪流年
曾经熟悉的人渐渐走远
只剩孤灯伴长夜
不知不觉鬓角添了白
不知不觉脚步慢下来
曾经想去的远方
还藏在心里的口袋
这一生有过苦也有甜
有些遗憾留给昨天
看着窗外秋叶落下
学会和遗憾说再见
`
}, {
title: "《思念那么痛》全网找歌君",
src: "https://music.163.com/song/media/outer/url?id=3399343297.MP3",
lrc: `《思念那么痛》
演唱：全网找歌君
编辑制作：潇湘翁
寂静的夜里 孤独的心里
独自的我想的都是你
空落的心里 寂寞在哭泣
酒后惆怅对你难忘记
冷冷的雨水敲打着玻璃
远方的你是否把我想起
曾经的温柔 如今的离去
我的心痛有谁能代替
想你的时候问问天
问天问地问问我自己
我们曾说过生死不分离
如今你却狠心把我抛弃
想你的时候问问天
问天问地问问我自己
既然你已经不再爱我
为何还要夺走我的呼吸
`
}, {
title: "《山上的风往哪儿吹》央金拉姆山野",
src: "https://music.163.com/song/media/outer/url?id=3431161256.mp3",
lrc: `《山上的风往哪儿吹》
作词：董慧
作曲：董慧
演唱：央金拉姆山野
编辑制作：潇湘翁
山上的风往哪儿吹
吹过我的头发飞
阿妈说风会带话
可它把我思念往哪儿推
山下的河往哪儿流
流过我的脚趾头
阿爸说河会回头
可它把我的眼泪全带走
风啊风啊慢点走
帮我看看他在不在山口
云啊云啊别害羞
帮我告诉他我在这儿守
草原的花往哪儿开
开在我的心上来
阿姐说花会等待
可我等的他呀怎么还不来
风啊风啊慢点走
帮我看看他在不在山口
云啊云啊别害羞
帮我告诉他我在这儿守
风啊 慢点走
`
},{
title: "《离天空最近的地方》小钢刀",
src: "https://music.163.com/song/media/outer/url?id=3439802229.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;
updateBtnUI();
lrcElement.style.setProperty('--state', 'running');
fullRefreshLyrics();pp.src = "https://pic1.imgdb.cn/i/034VPqxM5kWQ3Kz81Zmrk5.gif";
}).catch(function(e) { console.log("播放失败，请手动点击"); });
}
function pause() {
audio.pause();
isPlaying = false;
updateBtnUI();pp.src = "https://www.panurl.cn/view.php/71aa8644b454129c268aae48d789d547.png";
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(' 播放器已加载');
(function() {
var mState = () => {papa.style.setProperty('--state',audio.paused ? 'paused' : 'running');};
audio.onplaying =audio.onpause = () => mState();
})();
let fs = true;
fullscreen.onclick = () => {
fs ? (fullscreen.innerText = '退出全屏', papa.requestFullscreen()) : (fullscreen.innerText = '全屏欣赏', document.exitFullscreen());
fs = !fs;
};
</script>
欣赏亚伦老师精彩播放器！ 变色播放器真漂亮！ 感谢亚伦老师分享！ 视听盛宴，感谢亚伦老师精彩分享
页:
[1]