迷人的姑娘等10首抖音歌曲
本帖最后由 亚伦影音工作室 于 2026-10-15 13:32 编辑 <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: 540px;height:320px;
transform:scale(0.7);
top: 65%; left:60%;
position: absolute;
}
/* ===== 播放器子元素 ===== */
#amazingaudioplayer-1 {
width: 550px;height:140px;
max-width: 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);
}
}
/* ===== 播放器子元素 ===== */
.amazingaudioplayer-text {position: relative;
padding: 10px 12px 0px;
top: 80%;
text-align: center;
}
/* =====唱碟元素===== */
#tp{position:absolute;width: 55px;height: 55px;left: 100px;top:120px;border-radius: 50%; transform: rotateX(45deg) rotateY(20deg) rotateZ(0deg); animation:tion3s linear 1.5s infinite var(--state),color 3s linear 1.5s infinite var(--state); }
@keyframes tion { 0% {transform: rotateX(45deg) rotateY(20deg) rotateZ(0deg);}
100% {transform: rotateX(45deg) rotateY(20deg) rotateZ(360deg);}
}
#pp { position: absolute; width: 260px; height: 70px;bottom:-10px;left:-180px;filter: grayscale(0%)contrast(250%);animation: color 3s linear infinite ; }
#pp img{ width: 100%; }
/* =====歌词元素===== */
#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: 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: 75px;
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: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: 160px 190px;position: absolute;
background: rgba(235, 225, 200, 0);
border-radius: 0px;width:300px;
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">
<div><img id="tp"src = "https://pic1.imgdb.cn/i/034Sa0XFUdJ2G5gG40NzCe.png"></div>
<img id="pp" src="https://pic1.imgdb.cn/i/034gB2a2naiCiSEnILmdTV.gif" alt="仿频谱" />
<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: "https://music.163.com/song/media/outer/url?id=3438042109.mp3",
lrc: `《月亮替我望故乡》
演唱：睡眠火山
编辑制作：潇湘翁
旧梦收留不住满城烟尘
新城却锁不紧半掩的门
看那长街孤影独步的人
风吹过眼底有多冷
繁华街市锁住南下车程
千山万水拦住疲惫的身
谁常念秋风起叶落红
这光阴从来不留痕
月亮你替我望望故乡
将满腹心事洒在路上
别提这长夜多么凄凉
且当做大梦一场
月亮你替我看看故乡
将离愁别绪静静埋藏
回首才觉路早已漫长
斩断了年少轻狂
旧梦收留不住满城烟尘
新城却锁不紧半掩的门
看那长街孤影独步的人
风吹过眼底有多冷
繁华街市锁住南下车程
千山万水拦住疲惫的身
谁常念秋风起叶落红
这光阴从来不留痕
月亮你替我望望故乡
将满腹心事洒在路上
别提这长夜多么凄凉
且当做大梦一场
月亮你替我看看故乡
将离愁别绪静静埋藏
回首才觉路早已漫长
斩断了年少轻狂
月亮你替我望望故乡
将满腹心事洒在路上
别提这长夜多么凄凉
且当做大梦一场
月亮你替我看看故乡
将离愁别绪静静埋藏
回首才觉路早已漫长
斩断了年少轻狂
`},{
title: "《知不知道我想你》睡眠火山",
src: "https://music.163.com/song/media/outer/url?id=3395279911.mp3",
lrc: `《知不知道我想你》
演唱：睡眠火山
编辑制作：潇湘翁
好久没有你信息
知不知道我想你
手机放下又拿起
消息不敢发出去
若我给你发信息
你会不会不搭理
若我突然去找你
你是惊吓是惊喜
想让风儿去找你
替我问问你心意
是我已被谁替代
还是已把我忘记
想让风儿去找你
把我思念寄给你
替我轻轻拥抱你
但不能打扰到你
若我给你发信息
你会不会不搭理
若我突然去找你
你是惊吓是惊喜
想让风儿去找你
替我问问你心意
是我已被谁替代
还是已把我忘记
想让风儿去找你
把我思念寄给你
替我轻轻拥抱你
但不能打扰到你
`
}, {
title: "《落日最美的地方》演唱：DJ阿布",
src: "https://music.163.com/song/media/outer/url?id=3392144755.mp3",
lrc:`《落日最美的地方》
演唱：DJ阿布
编辑制作：潇湘翁
达里湖含着斜阳
候鸟衔来半片暮色
白风车轻摇着金色光阴
达拉诺日 成了诗的故乡
贡格尔草原绿了又黄
云幕低垂 风也很凉
达尔罕乌拉神山沉默不语
这里是落日最美的地方
你走后 晚霞也变得苍茫
草原姑娘从不掉眼泪
只把思念藏进草场
心随云雁 划向远方
贡格尔草原绿了又黄
云幕低垂 风也很凉
达尔罕乌拉神山沉默不语
这里是落日最美的地方
你走后 晚霞也变得苍茫
草原姑娘从不掉眼泪
只把思念藏进草场
心随云雁 划向远方
心随云雁 划向远方
`
}, {
title: "《我在梦里与你再相见》大头针",
src: "https://music.163.com/song/media/outer/url?id=3359725349.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=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();pp.src = "https://pic1.imgdb.cn/i/034gB2a2naiCiSEnILmdTV.gif";
}).catch(function(e) { console.log("播放失败，请手动点击"); });
}
function pause() {
audio.pause();
isPlaying = false;
updateBtnUI();pp.src = "https://pic1.imgdb.cn/i/034g41xof7R9KLaebrDaMO.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]