旧姻缘《黄安专辑》
本帖最后由 亚伦影音工作室 于 2026-10-20 10:18 编辑 <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:#800000;
box-shadow: 3px 3px 20px #000;
user-select: none;
overflow: hidden;
position: relative;
z-index: 111; --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);
}
.slide-container {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 5;
overflow: hidden;
}
.slide {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: 0;
background-size: cover;
background-position: center;
animation: 78s infinite var(--state);
}
.slide1 {
background-image: url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/ac38da664809e61b83885f937aa575c6.jpg');
animation-name: fade1;
animation-delay: 0s;
}
.slide2 {
background-image: url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/9325aad1e73c12e8bbd87974c55aa0f2.jpg');
animation-name: fade2;
animation-delay: 6s;
}
.slide3 {
background-image: url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/e72071f77ad379248819a3defaeccb00.jpg');
animation-name: fade3;
animation-delay: 12s;
}
.slide4 {
background-image: url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/d8b302c002013f3c58e92ad9eb8093ee.jpg');
animation-name: fade4;
animation-delay: 18s;
}
.slide5 {
background-image: url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/de3509375dad2d49454d4b0d05433fdb.jpg');
animation-name: fade5;
animation-delay: 24s;
}
.slide6 {
background-image: url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/e8546b5aaffb07791ed178d61e7cff7a.jpg');
animation-name: fade6;
animation-delay: 30s;
}
.slide7 {
background-image: url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/7f2a8237ef017e2687f8f8ff2795b33d.jpg');
animation-name: fade7;
animation-delay: 36s;
}
.slide8 {
background-image: url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/d8479e15a051125823083f4d4d362b98.jpg');
animation-name: fade8;
animation-delay: 42s;
}
.slide9 {
background-image: url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/49b4f5138da37043e9b2651842d4dc6d.jpg');
animation-name: fade9;
animation-delay: 48s;
}
.slide10 {
background-image: url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/7f2a8237ef017e2687f8f8ff2795b33d.jpg');
animation-name: fade10;
animation-delay: 54s;
}
.slide11 {
background-image: url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/c13f2247989b826d3bf1af1c93dcf851.jpg');
animation-name: fade11;
animation-delay: 60s;
}
.slide12 {
background-image: url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/9c4aef5dba82acda1e5d9fad5c09bb4d.jpg');
animation-name: fade12;
animation-delay: 66s;
}
.slide13 {
background-image: url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/c13f2247989b826d3bf1af1c93dcf851.jpg');
animation-name: fade13;
animation-delay: 72s;
}
@keyframes fade1 {
0% {
opacity: 1;
-webkit-transform: scale(1);clip-path: polygon(50% 20%, 50% 50%, 20% 50%, 50% 50%, 50% 80%, 50% 50%, 80% 50%, 50% 50%);}
6% {
opacity: 1;clip-path: polygon(50% 0%, 0% 0%, 0% 50%, 0% 100%, 50% 100%, 100% 100%, 100% 50%, 100% 0%);
-webkit-transform:translate(0%,0%)scale(1);
}
9% {
opacity: 1;clip-path: polygon(50% 0%, 0% 0%, 0% 50%, 0% 100%, 50% 100%, 100% 100%, 100% 50%, 100% 0%);
-webkit-transform:translate(0%,0%)scale(1);
}
10% {
opacity: 0;clip-path: polygon(50% 0%, 0% 0%, 0% 50%, 0% 100%, 50% 100%, 100% 100%, 100% 50%, 100% 0%);
-webkit-transform:translate(0%,0%)scale(1);
}
}
@keyframes fade2 {0% {opacity: 1;clip-path:polygon(0 0, 40% 40%, 50% 86.60254%, 60% 40%, 100% 0, 50% 20%, 0 0);
-webkit-transform:translate(0%,0%)scale(1);}
5% {
opacity: 1;clip-path: polygon(0 0, 0 100%, 50% 100%, 100% 100%, 100% 0, 50% 0, 0 0);
-webkit-transform:translate(0%,0%)scale(1);}
8% {
opacity: 1;clip-path: polygon(0 0, 0 100%, 50% 100%, 100% 100%, 100% 0, 50% 0, 0 0);
-webkit-transform:translate(0%,0%)scale(1);}
10% {
opacity: 0;clip-path: polygon(0 0, 0 100%, 50% 100%, 100% 100%, 100% 0, 50% 0, 0 0);
-webkit-transform:translate(0%,0%)scale(1);}
}
@keyframes fade3 {0% {
-webkit-transform-origin:right bottom;
-webkit-transform:rotate(-90deg)scale(1)translate(0%,0%);
opacity:1}
4% {
-webkit-transform-origin:right bottom;
-webkit-transform:rotate(0deg)scale(1)translate(0%,0%);
opacity:1}
8% {
-webkit-transform-origin:right bottom;
-webkit-transform:rotate(0deg)scale(1)translate(0%,0%);
opacity:1}
10% {
-webkit-transform-origin:right bottom;
-webkit-transform:rotate(90deg)scale(1)translate(0%,0%);
opacity:0}
}
@keyframes fade4{
0% {
opacity: 1;
-webkit-transform: scale(1);clip-path:polygon(0 0, 0 10%, 50% 50%, 0 100%, 10% 100%, 50% 50%, 100% 100%, 100% 90%, 50% 50%, 100% 0, 90% 0, 50% 50%);}
8% {
opacity: 1;clip-path: polygon(0 0, 0 100%, 50% 50%, 0 100%, 100% 100%, 50% 50%, 100% 100%, 100% 0, 50% 50%, 100% 0, 0 0, 50% 50%);
-webkit-transform:translate(0%,0%)scale(1);
}
10% {
opacity: 1;clip-path: polygon(0 0, 0 100%, 50% 50%, 0 100%, 100% 100%, 50% 50%, 100% 100%, 100% 0, 50% 50%, 100% 0, 0 0, 50% 50%);
-webkit-transform:translate(0%,0%)scale(1);
}
12% {
opacity: 0;clip-path: polygon(0 0, 0 100%, 50% 50%, 0 100%, 100% 100%, 50% 50%, 100% 100%, 100% 0, 50% 50%, 100% 0, 0 0, 50% 50%);
-webkit-transform:translate(0%,0%)scale(1);
}
}
@keyframes fade5 {
0% {
opacity: 1;transform:translate(0%,0%)scale(4);
}
8% {
opacity: 1;transform:translate(0%,0%)scale(1);
}
10% {
opacity: 1;transform:translate(0%,0%)scale(1);
}
12% {
opacity: 0;transform:translate(0%,0%)scale(1);}
}
@keyframes fade6 {0% {
opacity: 1;clip-path:polygon(50% 100%, 50% 0%, 0% 0%, 100% 0%,50% 0%);
-webkit-transform:translate(0%,0%)scale(1);}
6% {
opacity: 1;clip-path:polygon(50% 100%, 0% 0%, 0% 0%, 100% 0%, 100% 0%);
-webkit-transform:translate(0%,0%)scale(1);}
10% {
opacity: 0.8;clip-path:polygon(50% 100%, 0% 100%, 0% 0%, 100% 0%, 100% 100%);
-webkit-transform:translate(0%,0%)scale(1);}
12% {
opacity: 0;clip-path:polygon(50% 100%, 0% 100%, 0% 0%, 100% 0%, 100% 100%);
-webkit-transform:translate(0%,0%)scale(1);}
}
@keyframes fade7 {0% {opacity: 1;transform:translate(-100%,-100%)scale(0);}
4% {opacity: 1;transform:translate(0%,0%)scale(0.6)rotate(-360deg);}
5% {opacity: 1;transform:translate(0%,0%)scale(0.7)rotate(-360deg);}
7% {opacity: 1;transform: perspective(1300px) rotateY(70deg)scale(0.7)}
9% {opacity: 1;transform: perspective(1300px) rotateY(-70deg)scale(0.7)}
10% {opacity: 1;transform:translate(100%,100%) perspective(1300px)rotatex(-90deg) rotateY(-40deg)scale(3);}
12% {opacity: 0;transform:translate(100%,100%) perspective(1300px)rotatex(-90deg) rotateY(-40deg)scale(3);}
}
@keyframes fade8 {0% {opacity: 1;transform:translate(-100%,100%)matrix(1, 6, 5, 5, 6, 6)scale(0.2);}
5% {opacity: 1;transform:translate3d(0px,0px,0px)scale(0.5)}
7% {opacity: 1;transform:translate3d(0px,0px,0px)scale(1)}
10% {opacity: 1;transform:translate3d(0px,0px,0px)scale(1)}
12% {opacity: 0;transform:translate3d(0px,0px,0px)scale(3)}
}
@keyframes fade9 {0% {opacity: 1;clip-path:inset(50% 50% 50% 50%);
transform:translate(0%,0%)scale(1);}
5% {
opacity: 1;clip-path: inset(0 0 0 0);
transform:translate(0%,0%)scale(1);}
10% {
opacity: 1;clip-path: inset(0 0 0 0);
transform:translate(0%,0%)scale(1);}
11% {
opacity: 0;clip-path:inset(0 0 0 0);
transform:translate(0%,0%)scale(1);}
}
@keyframes fade10 {0% {
opacity: 1;clip-path:polygon(50% 50%, 100% 50%, 50% 50%, 50% 100%, 50% 50%, 0 50%, 50% 50%, 50% 0);
-webkit-transform:translate(0%,0%)scale(1);}
4% {
opacity: 1;background-position: 0% -100%;clip-path: polygon(75% 25%, 100% 50%, 75% 75%, 50% 100%, 25% 75%, 0 50%, 25% 25%, 50% 0);
}
8% {
opacity: 1;background-position: 0% -100%;clip-path: polygon(50% 0, 100% 0, 100% 50%, 100% 100%, 50% 100%, 0 100%, 0 50%, 0 0);
}
10% {
opacity: 0;background-position: 0% -100%;clip-path:polygon(50% 0, 100% 0, 100% 50%, 100% 100%, 50% 100%, 0 100%, 0 50%, 0 0);
-webkit-transform:translate(0%,0%)scale(1);}
}
@keyframes fade11{0% {
opacity: 1;clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 75% 100%, 100% 50%, 75% 0);
-webkit-transform:translate(0%,0%)scale(1);}
4% {
opacity: 1;clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);
}
8% {
opacity: 1;clip-path: polygon(100% 0, 100% 50%, 100% 100%, 0% 100%, 0 50%, 0% 0%);
}
10% {
opacity: 0;clip-path: polygon(100% 0, 100% 50%, 100% 100%, 0% 100%, 0 50%, 0% 0%);
-webkit-transform:translate(0%,0%)scale(1);}
}
@keyframes fade12{0% {
opacity: 1;clip-path: polygon(0% 20%, 0 20%, 0 0, 45% 50%, 0 100%, 0 80%, 0% 80%);
-webkit-transform:translate(0%,0%)scale(1);}
3% {
opacity: 1;clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%);
}
6% {
opacity: 1;clip-path: polygon(0% 20%, 100% 20%, 100% 0, 150% 50%, 100% 100%, 100% 80%, 0% 80%);
}
8% {
opacity: 1;clip-path: polygon(0 0, 100% 0, 100% 0, 150% 50%, 100% 100%, 100% 100%, 0 100%);
-webkit-transform:translate(0%,0%)scale(1);}
9% {
opacity: 0;clip-path: polygon(0 0, 100% 0, 100% 0, 150% 50%, 100% 100%, 100% 100%, 0 100%);
-webkit-transform:translate(0%,0%)scale(1);}
}
@keyframes fade13{0% {
opacity: 1;clip-path: polygon(50% 0, 75% 50%, 50% 100%, 50% 100%, 75% 50%, 50% 0);
-webkit-transform:translate(0%,0%)scale(1);}
4% {
opacity: 1;clip-path: polygon(75% 0, 100% 50%, 75% 100%, 0 100%, 25% 50%, 0 0);
}
8% {
opacity: 1;clip-path: polygon(125% 0, 125% 50%, 125% 100%, -25% 100%, -25% 50%, -25% 0);
}
9% {
opacity: 0;clip-path: polygon(125% 0, 125% 50%, 125% 100%, -25% 100%, -25% 50%, -25% 0);
-webkit-transform:translate(0%,0%)scale(1);}
}
/* ===== 播放器父元素===== */
#bfqfq {z-index: 222;
width: 550px;height:320px;
transform:scale(0.8);
top: 60%; left:20%;
position: absolute;
}
/* ===== 播放器子元素 ===== */
#amazingaudioplayer-1 {
width: 420px;height:200px;
max-width: 100%; background:linear-gradient(to top, rgba(139,0,0,0.35) 15%, rgba(139,0,0,0) 100%);
margin: 0 0%;
top: 76px;
z-index: 3;
font-family: 'Segoe UI', 'Noto Sans', system-ui, 'Microsoft YaHei', sans-serif;
position: absolute;
}
@keyframes color { from {
filter: hue-rotate(0);
}
to {
filter: hue-rotate(360deg);
}
}
/* =====唱碟元素===== */
#tp{position:absolute;width: 200px;height: 200px;left: -170px;top:26px;border-radius: 50%;animation:tion3s linear 1.5s infinite var(--state),opentop 0.5s 1 1s ;z-index: -1;transition: 2s;box-shadow: 0px 0px 0px 2px #cccccc;}
@keyframes opentop { 0% {transform: translatex(-50px);} 100% { transform:rotateX(0px);}}
@keyframes tion { 0% {}
100% {transform: rotateZ(360deg);}
}
/* =====专辑封面 ===== */
#cip{z-index:1;
position: absolute;
top: 0px;background: url(http://p1.music.126.net/xy0RrtN2YQ_kM_e8hjP4-Q==/86861418599938.jpg?param=300x300) no-repeat center/cover;
top: 20px; left: -282px;
border-radius: 2%;border: 2px solid #cccccc;
width: 210px;height:210px;
mask: radial-gradient(circle at 100% 50%,transparent 44px,#red 0%);-webkit-mask: radial-gradient(circle at 100% 50%,transparent 44px,red 0%);
}
/* ===== 歌词父元素 ===== */
.amazingaudioplayer-text {position: relative;
padding: 10px 12px 0px;
top: 70%;
text-align: center;
}
/* =====歌词元素===== */
#lrc {position:absolute; --motion: cover2;--tt: 1s; left: 50%;bottom:0px;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;transform-origin:left bottom;
}
#lrc::before {
animation-name:cover2;transform-origin:left bottom;
}
#bs {animation: color1 3s linear infinite ;}
@keyframes color1 { 50% { filter: hue-rotate(360deg)brightness(260%);} }
@keyframes cover1 {
0% {transform:rotate(-120deg)}
50% {transform: rotate(0deg);}
100% {transform:rotate(0deg)}
}
@keyframes cover2 {
0% {transform:rotate(-120deg);}
20% {transform: rotate(0deg);}
100% {transform:rotate(0deg);}
}
/* =====按钮控制栏===== */
.amazingaudioplayer-bar {
position: relative; left: 10px;
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: 22px;
left: 32px;
color: #eee;
font-size: 16px;
font-weight: 500;
font-family:cursive;
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: 4px;
height: 42px;
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: 140px;
margin-bottom: 0px;
width:350px;
height: 3px;
background: #fff;
cursor: pointer;
left: 40px;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: 160px 30px;position: absolute;
background: rgba(235, 225, 200, 0);
border-radius: 0px;width:340px;
padding: 0px 18px;
text-align: center;
}
.current-info {font-family: cursive, serif;
font-size: 22px;
font-weight: 400;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transform-origin:top;
color: #fff; animation:yao 0s linear infinite alternate var(--state), color 0s 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: 2%;
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 class="slide-container">
<div class="slide slide1"></div>
<div class="slide slide2"></div>
<div class="slide slide3"></div>
<div class="slide slide4"></div>
<div class="slide slide5"></div>
<div class="slide slide6"></div>
<div class="slide slide7"></div>
<div class="slide slide8"></div>
<div class="slide slide9"></div>
<div class="slide slide10"></div>
<div class="slide slide11"></div>
<div class="slide slide12"></div>
<div class="slide slide13"></div>
</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 id="amazingaudioplayer-1">
<div class="amazingaudioplayer-player-wrapper">
<img id="tp"src = "https://pic1.imgdb.cn/item/69e5e442198dd6f8d6ac9407.png">
<div id="cip" alt="专辑封面"></div>
<div class="amazingaudioplayer-tracklist">
<div class="current-info" id="currentSongName"></div>
<div class="current-sub" id="currentSongSub">mp3</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>
</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: "http://music.163.com/song/media/outer/url?id=95370.mp3",
lrc: ` 作词 : 黄安
作曲 : 黄安
编曲 : 詹宏达
苍天可老 海水可翻
爱到深处几多难
看我这一生 峰回路转
为谁辛苦为谁忙
人间路短 儿女情长
人间路短 儿女情长
一路上有你 嘘寒问暖
生生世世 姻缘不断
昨是今非旧时光
当我初见你的模样 笑看贞节牌坊
当我初见你的模样 笑看贞节牌坊
情愿用一生陪我闯
多少年来的风霜 改变了模样
该还的就还 该偿的就偿
前世今生共徜佯
苍天可老 海水可翻
苍天可老 海水可翻
苍天可老 海水可翻
爱到深处几多难
看我这一生 峰回路转
为谁辛苦为谁忙
人间路短 儿女情长
人间路短 儿女情长
一路上有你 嘘寒问暧
生生世世 姻缘不断
昨是今非旧时光
当我初见你的模样 笑看贞节牌坊
当我初见你的模样 笑看贞节牌坊
情愿用一生陪我闯
多少年来的风霜 改变了模样
该还的就还 该偿的就偿
前世今生共徜佯
该还的就还 该偿的就偿
前世今生共徜佯
救姻缘 - 黄安.lrc
`},{
title: "《新鸳鸯蝴蝶梦》黄安",
src: "http://music.163.com/song/media/outer/url?id=95410.mp3",
lrc: ` 作词 : 黄安
作曲 : 黄安
编曲 : 尤景仰
昨日像那东流水离我远去不可留
今日乱我心多烦忧
抽刀断水水更流举杯消愁愁更愁
明朝清风四飘流
由来只有新人笑有谁听到旧人哭
由来只有新人笑有谁听到旧人哭
爱情两个字好辛苦
是要问一个明白还是要装作糊涂
知多知少难知足
看似个鸳鸯蝴蝶不应该的年
看似个鸳鸯蝴蝶不应该的年代
可是谁又能摆脱人世间的悲哀
花花世界鸳鸯蝴蝶
在人间已是癫何苦要上青天
不如温柔同眠
昨日像那东流水离我远去不可留
昨日像那东流水离我远去不可留
今日乱我心多烦忧
抽刀断水水更流举杯消愁愁更愁
明朝清风四飘流
由来只有新人笑有谁听到旧人哭
由来只有新人笑有谁听到旧人哭
爱情两个字好辛苦
是要问一个明白还是要装作糊涂
知多知少难知足
看似个鸳鸯蝴蝶不应该的年代
看似个鸳鸯蝴蝶不应该的年代
可是谁又能摆脱人世间的悲哀
花花世界鸳鸯蝴蝶
在人间已是癫 何苦要上青天
不如温柔同眠
看似个鸳鸯蝴蝶不应该的年代
看似个鸳鸯蝴蝶不应该的年代
可是谁又能摆脱人世间的悲哀
花花世界鸳鸯蝴蝶
在人间已是癫 何苦要上青天
不如温柔同眠
`
}, {
title: "《明明知道相思苦》黄安",
src: "http://music.163.com/song/media/outer/url?id=95290.mp3",
lrc:`作词 : 黄安
作曲 : 黄安
编曲 : 涂惠源/徐德昌
明明知道相思苦
偏偏对你牵肠挂肚
经过几许细思量
宁愿承受这痛苦
认识你之前是无靠无依
认识你之前是无靠无依
认识你后无药可医
原本以为你只是短暂的插曲
从没想到竟成不朽的传奇
多少男男女女相聚分离
遇见你是千万分之一
管他时空拉开我们的距离
我只想和你在一起
一声声难了 难了
往日的甜蜜欢笑何处找
早知道难了 难了
会不会路归路 桥归桥
明明知道相思苦
偏偏对你牵肠挂肚
经过几许细思量
宁愿承受这痛苦
明明知道相思苦
偏偏对你牵肠挂肚
经过几许细思量
宁愿承受这痛苦
多少男男女女相聚分离
多少男男女女相聚分离
遇见你是千万分之一
管他时空拉开我们的距离
我只想和你在一起
一声声难了 难了
往日的甜蜜欢笑何处找
早知道难了 难了
会不会路归路 桥归桥
明明知道相思苦
偏偏对你牵肠挂肚
经过几许细思量
宁愿承受这痛苦
明明知道相思苦
偏偏对你牵肠挂肚
经过几许细思量
宁愿承受这痛苦
经过几许细思量
宁愿承受这痛苦
/name/明明知道相思苦 - 黄安
`
}, {
title: "《东南西北风 》黄安",
src: "http://music.163.com/song/media/outer/url?id=95393.mp3",
lrc: ` 作词 : 黄安
作曲 : 黄安
编曲 : 王豫民
与你相逢 其实就像一个梦
梦醒无影又无踪
总是看了不能忘 总是过了不能想
总让我为你痴狂
让我爱上你 其实没什么道理
明明知道不可以
让我痛苦为了你 让我快乐为了你
没有你还有什么意义
看那东南西北风 吹着不同的脸孔
难道爱情只是一阵风
我的心儿碰呀碰 因为有你在梦中
从此生命不再空呀空
也许爱变得更浓 也许变得无影踪
只要有你我就有笑容
让我爱上你 其实没什么道理
明明知道不可以
让我痛苦为了你 让我快乐为了你
没有你还有什么意义
与你相逢 其实就像一个梦
梦醒无影又无踪
总是看了不能忘 总是过了不能想
总让我为你痴狂
看那东南西北风 吹着不同的脸孔
难道爱情只是一阵风
我的心儿碰呀碰 因为有你在梦中
从此生命不再空呀空
也许爱变得更浓 也许变得无影踪
只要有你我就有笑容
看那东南西北风 吹着不同的脸孔
难道爱情只是一阵风
我的心儿碰呀碰 因为有你在梦中
从此生命不再空呀空
也许爱变得更浓 也许变得无影踪
只要有你我就有笑容
让我爱上你 其实没什么道理
明明知道不可以
让我痛苦为了你 让我快乐为了你
没有你还有什么意义
让我痛苦为了你 让我快乐为了你
没有你还有什么意义
/name/东南西北风 - 黄安
`
}, {
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=3402999324.mp3",
lrc: `《迷人的姑娘》
演唱：陈嘉宇
编辑制作：潇湘翁
晚风掠过街边橱窗
一眼撞进你温柔目光
长发轻晃笑意坦荡
世间风光都黯淡无光
心跳悄悄乱了节奏
目光总忍不住停留
平凡街头因你温柔
所有烦恼全部抛走
迷人的姑娘眉眼藏星光
一笑融化所有寒冬冰霜
步履轻轻扬自带好风光
余生只想陪在你身旁
迷人的姑娘温柔入心房
你的美好没人能够模仿
岁岁好时光守在你身旁
满眼皆是你的模样
落日铺满整条街巷
你抬手拂去肩上风霜
眼神明亮干净坦荡
胜过人间万千景象
晚风轻吹你的衣袖
心动反复不停翻涌
人海游走唯独你出众
牢牢占据我的眼眸
迷人的姑娘眉眼藏星光
一笑融化所有寒冬冰霜
步履轻轻扬自带好风光
余生只想陪在你身旁
迷人的姑娘温柔入心房
你的美好没人能够模仿
岁岁好时光守在你身旁
满眼皆是你的模样
不问远方不问过往
只想握紧你的手掌
朝朝暮暮岁岁寻常
有你便是最好景象
迷人的姑娘眉眼藏星光
一笑融化所有寒冬冰霜
步履轻轻扬自带好风光
余生只想陪在你身旁
迷人的姑娘温柔入心房
你的美好没人能够模仿
岁岁好时光守在你身旁
满眼皆是你的模样
迷人的姑娘
迷人的姑娘
迷人的姑娘
`
}, {
title: "《晚风不懂我遗憾》睡眠火山",
src: "https://music.163.com/song/media/outer/url?id=3387467085.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();tp.style.left = '-170px';
}).catch(function(e) { console.log("播放失败，请手动点击"); });
}
function pause() {
audio.pause();
isPlaying = false;
updateBtnUI();tp.style.left = '-230px';
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]