空有一颗哪吒的心
<meta charset="UTF-8"><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;
}
.vid{width: 100%; height: 100%;
position:absolute;
top:0%; left:0%;
opacity: 0;
object-fit: cover;
pointer-events: none;
animation: round 80s linear infinite var(--state);}
@keyframes round {1% {opacity: 0;}
5% {
opacity: .6;}
10% {
opacity:.8;}
15% {
opacity:1;}
20% {
opacity: 0;}
}
.vid:nth-child(1){animation-delay: 72s;}
.vid:nth-child(2){animation-delay: 64s;}
.vid:nth-child(3){animation-delay: 56s;}
.vid:nth-child(4){animation-delay: 48s;}
.vid:nth-child(5){animation-delay: 40s;}
.vid:nth-child(6){animation-delay: 32s;}
.vid:nth-child(7){animation-delay: 24s;}
.vid:nth-child(8){animation-delay: 16s;}
.vid:nth-child(9){animation-delay: 8s;}
.vid:nth-child(10){animation-delay: 0s;}
/* ===== 播放器父元素===== */
#bfqfq {z-index: 222;
width:100%;height:30%;
background:linear-gradient(to top, rgba(102,0,0,0.45) 15%, rgba(102,0,0,0) 75%);
top: 78%; left: 0%;
user-select: none;
overflow: hidden;
animation: color 4s linear infinite var(--state);
position: relative;
}
/* ===== 播放器子元素 ===== */
#amazingaudioplayer-1 {box-shadow:0px 0px 0px 0px #fff000, 0px 0px 0px 0px #880000;
width: 100%;height:100%;
left: 0%;top:0px;
backdrop-filter: blur(0px);
border-radius: 0px;
max-width: 100%;
margin: 0 0%;
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;
}
/* =====歌词元素===== */
#lrc {position:absolute; --motion: cover2;--tt: 1s; left: 50%;bottom:0px;transform: translate(-50%);perspective: 50px;
font:normal 3.5em "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;-webkit-transform-origin:100% 100%;
}
#lrc::before {
animation-name:cover2;-webkit-transform-origin:100% 100%;
}
#bs {animation: color1 3s linear infinite ;}
@keyframes color1 { 50% { filter: hue-rotate(360deg)brightness(260%);} }
@keyframes cover1 { 0% {
-webkit-transform:rotatex(0deg)scale(1)translate(0%,0%)}
5% {
-webkit-transform:rotateX(90deg)scale(1)translate(0%,0%)}
20% {
-webkit-transform:rotatex(-90deg)scale(1)translate(0%,0%);}
40% {
-webkit-transform:rotatex(90deg)scale(1)translate(0%,0%);}
60% {
-webkit-transform:rotatex(-90deg)scale(1)translate(0%,0%);}
80% {
-webkit-transform:rotatex(90deg)scale(1)translate(0%,0%);}
100% {
-webkit-transform:rotate(0deg)scale(1)translate(0%,0%);}
}
@keyframes cover2{ 0% {
-webkit-transform:rotatex(0deg)scale(1)translate(0%,0%)}
5% {
-webkit-transform:rotateX(90deg)scale(1)translate(0%,0%)}
20% {
-webkit-transform:rotatex(-90deg)scale(1)translate(0%,0%);}
40% {
-webkit-transform:rotatex(90deg)scale(1)translate(0%,0%);}
60% {
-webkit-transform:rotatex(-90deg)scale(1)translate(0%,0%);}
80% {
-webkit-transform:rotatex(90deg)scale(1)translate(0%,0%);}
100% {
-webkit-transform:rotate(0deg)scale(1)translate(0%,0%);}
}
/* =====按钮控制栏===== */
.amazingaudioplayer-bar {
position: relative; left: 0px;
height: 0px;top: 80px;
}
/* 播放/暂停 */
.amazingaudioplayer-playpause {z-index: 4;
position: absolute;
left: 50%;
margin-left: -42%;
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: -45%;
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: -38%;
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: 0px;
width: 24px;
height: 24px; opacity: 0;
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: 18px;
left: 93%;
margin-left: 0px;
width: 25px;
height: 25px;
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: 82%;
color: #eee;
font-size: 18px;
font-weight: 400;
font-family:cursive;
background: rgba(255, 248, 225, 0);
padding: 0 8px;
}
/* 音量等控制 */
.amazingaudioplayer-volume {
position: absolute;
top: 20px;
left: 96%;filter: invert(0%);
margin-left:0px;
z-index: 10;
cursor: pointer;
}
.amazingaudioplayer-volume-button {
width: 22px;
height: 22px;
background: url(https://pic1.imgdb.cn/i/034hPYBYmxGiRAG0bfi8sS.png)no-repeat center/44px 22px;
background-position: right top;
}
.amazingaudioplayer-volume-bar {
position: absolute;
left: 50%;
margin-left: -10px;
bottom: 30%;
width: 5px;
height: 50px;
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: 1px 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:#fff;
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: 110px;
margin-bottom: -5px;
width:65%;
height: 3px;
background: #fff;
cursor: pointer;
left: 16%;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: 80px 240px;position: absolute;
background: rgba(235, 225, 200, 0);
border-radius: 0px;width:40%;
padding: 0px 18px;
text-align: center;
}
.current-info {font-family: cursive, serif;
font-size: 20px;
font-weight: 100;
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>
<video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/04ab5a013d42624a60bb7540015abc09_preview.mp4" loop muted autoplay></video>
<video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/c58c5da02d42d2f02f4c614c3534650a_preview.mp4" loop muted autoplay></video>
<video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/36290f617fd7e5ac8e53479a57615e44_preview.mp4" loop muted autoplay></video>
<video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/0ad58203e49e6628b814fa9b1dba1a67_preview.mp4" loop muted autoplay></video>
<video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/03b061d7f5470335cf859e286347bfe5_preview.mp4" loop muted autoplay></video>
<video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/dff651c500296dd819b3fe45d034aaaf_preview.mp4" loop muted autoplay></video>
<video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/4cc5024aac35ec7fe4d7296bba9a4d66_preview.mp4" loop muted autoplay></video>
<video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/bfd83cb857cfbd985b63482c66359d15_preview.mp4" loop muted autoplay></video>
<video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/bfd83cb857cfbd985b63482c66359d15_preview.mp4" loop muted autoplay></video>
</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 id="tp"></div>
<div id="tpp"></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: "https://www.joy127.com/url/159621.mp3",
lrc: `空有一颗哪吒的心
词: 黑白井子
曲: 王莹莹
制作人: 误漫蓝
OP: 十里春风
LRC编辑：醉美水芙蓉
空有一颗哪吒的心
却生来只是土拨鼠的命
以为努力就能成为敖丙
到头来也只是蟹将虾兵
谁又不是申公豹
没有出身也没有人依靠
吃尽了苦头折断了腰
只为了区区的几颗丹药
曾经我也心比天还高
可现实让我跪地求了饶
没有贵人提携没人撑腰
只能咬紧牙关慢慢的熬
我也想活的自在逍遥
可奈何还有一家老小
受尽了委屈还强颜欢笑
满腹心酸苦楚谁知晓
谁又不是申公豹
没有出身也没有人依靠
吃尽了苦头折断了腰
只为了区区的几颗丹药
曾经我也心比天还高
可现实让我跪地求了饶
没有贵人提携没人撑腰
只能咬紧牙关慢慢的熬
我也想活的自在逍遥
可奈何还有一家老小
受尽了委屈还强颜欢笑
满腹心酸苦楚谁知晓
曾经我也心比天还高
可现实让我跪地求了饶
没有贵人提携没人撑腰
只能咬紧牙关慢慢的熬
我也想活的自在逍遥
可奈何还有一家老小
受尽了委屈还强颜欢笑
满腹心酸苦楚谁知晓
谢谢欣赏！
`},{
title: "沧桑杰叔《你放心玫瑰不用长高》",
src: "https://www.joy127.com/url/159623.mp3",
lrc: `你放心玫瑰不用长高-沧桑杰叔
词：广羽人彡
曲：叨叨
编曲：澜音音乐
混音：澜音音乐
出品：苏州蔚象
LRC编辑：醉美水芙蓉
也许你也曾经 爱过一段时光
总有个人能让你朝思暮想
每当夜深人静 你还是会感伤
有些遗憾总是刻在心上
也许你也曾经 恨过那些过往
受过的伤总让你无法原谅
不如卸下伪装 释放所有倔强
让自己好好大哭一场
你放心
玫瑰不用长高爱人自会弯腰
你只管做你自己就很好
不必强装微笑 不必刻意讨好
会有人来把你拥抱
你放心
玫瑰不用长高爱的人会弯腰
对的人偶尔也会有迟到
总会有新风景藏在下个转角
让你觉得也被需要
也许你也曾经 恨过那些过往
受过的伤总让你无法原谅
不如卸下伪装 释放所有倔强
让自己好好大哭一场
你放心
玫瑰不用长高爱人自会弯腰
你只管做你自己就很好
不必强装微笑 不必刻意讨好
会有人来把你拥抱
你放心
玫瑰不用长高爱的人会弯腰
对的人偶尔也会有迟到
总会有新风景藏在下个转角
让你觉得也被需要
谢谢欣赏！
`},{
title: "王韵《今生最爱》",
src: "https://www.joy127.com/url/159631.mp3",
lrc: `今生最爱(DJ 九零版)-王韵
作词：王程明
作曲：王程明
LRC编辑：醉美水芙蓉
望着你
孤单离去
我的心就像块寒冰
纵然撕去
刻意伪装的冷漠
疯狂盲目找寻
找寻你的足迹
想着以往的你那种真感情
如今却只剩下些什么
我的泪
强忍不住
在无声中悄然滑落
你的影子
无情在身边徘徊
我又怎能忘记
你曾经给我美丽
是你的那眼睛把我给出卖
叫我如何忘记你的背影
我从来不敢相信
你爱得如此坚定
又怎么能够伤我的心
要我再付出多少
你才能真的明了
为何要让我苦苦逼近
何时你那天真的眼眸
竟然变得如此残忍
我就像海上浮萍
任由海水淹灭
爱将我推入无底深渊
你能否撇得下他
我怎么割舍得下
你是我最爱的女孩
我的泪
强忍不住
在无声中悄然滑落
你的影子
无情在身边徘徊
我又怎能忘记
你曾经给我美丽
是你的那眼睛把我给出卖
叫我如何忘记你的背影
我从来不敢相信
你爱得如此坚定
又怎么能够伤我的心
要我再付出多少
你才能真的明了
为何要让我苦苦逼近
何时你那天真的眼眸
竟然变得如此残忍
我就像海上浮萍
任由海水淹灭
爱将我推入无底深渊
你能否撇得下他
我怎么割舍得下
你是我最爱的女孩
我从来不敢相信
你爱得如此坚定
又怎么能够伤我的心
要我再付出多少
你才能真的明了
为何要让我苦苦逼近
何时你那天真的眼眸
竟然变得如此残忍
我就像海上浮萍
任由海水淹灭
爱将我推入无底深渊
你能否撇得下他
我怎么割舍得下
你是我最爱的女孩
谢谢欣赏！
`},{
title: "为了你犯下了痴情的错",
src: "https://www.joy127.com/url/159624.mp3",
lrc: `
欢迎光临
谢谢欣赏！
`},{
title: "夜雨中的迈巴赫 - dj阿能",
src: "https://www.joy127.com/url/159625.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();
}).catch(function(e) { console.log("播放失败，请手动点击"); });
}
function pause() {
audio.pause();
isPlaying = false;
updateBtnUI();
lrcElement.style.setProperty('--state', 'paused');
}
function togglePlay() { isPlaying ? pause() : play(); }
function prevSong() {
var idx = (currentIndex - 1 + songs.length) % songs.length;
loadSong(idx);
if (!isPlaying) play();
else audio.play().catch(function() {});
}
function nextSong() {
var idx = (currentIndex + 1) % songs.length;
loadSong(idx);
if (!isPlaying) play();
else audio.play().catch(function() {});
}
function toggleLoop() {
loopMode = 1 - loopMode;
loopBtn.style.backgroundPosition = loopMode ? 'center top' : 'left top';
}
function setProgressByEvent(e) {
var rect = progressTrack.getBoundingClientRect();
var x = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
if (audio.duration && !isNaN(audio.duration) && isFinite(audio.duration) && audio.duration > 0) {
audio.currentTime = x * audio.duration;
}
playedBar.style.width = (x * 100) + '%';
timeDisplay.textContent = formatTime(audio.currentTime) + ' / ' + formatTime(audio.duration);
}
function setVolume(val) {
volume = Math.max(0, Math.min(1, val));
audio.volume = volume;
volFill.style.height = (volume * 100) + '%';
volBtn.style.backgroundPosition = (volume === 0 ? 'right top' : 'left top');
}
function setVolumeByEvent(e) {
var rect = volAdjust.getBoundingClientRect();
var y = Math.max(0, Math.min(1, 1 - (e.clientY - rect.top) / rect.height));
setVolume(y);
}
function openDropdown() { renderSongList();
dropdown.classList.add('show'); }
function closeDropdown() { dropdown.classList.remove('show'); }
// ========== 事件绑定 ==========
playBtn.addEventListener('click', togglePlay);
pauseBtn.addEventListener('click', togglePlay);
prevBtn.addEventListener('click', prevSong);
nextBtn.addEventListener('click', nextSong);
loopBtn.addEventListener('click', toggleLoop);
progressTrack.addEventListener('click', function(e) { setProgressByEvent(e); });
progressTrack.addEventListener('mousedown', function(e) {
isDragging = true;
setProgressByEvent(e);
document.addEventListener('mousemove', onDragMove);
document.addEventListener('mouseup', onDragEnd);
e.preventDefault();
});
function onDragMove(e) { setProgressByEvent(e); }
function onDragEnd(e) {
isDragging = false;
setProgressByEvent(e);
document.removeEventListener('mousemove', onDragMove);
document.removeEventListener('mouseup', onDragEnd);
}
volBtn.addEventListener('click', function() { setVolume(volume > 0 ? 0 : 0.8); });
volAdjust.addEventListener('mousedown', function(e) {
setVolumeByEvent(e);
document.addEventListener('mousemove', onVolMove);
document.addEventListener('mouseup', onVolEnd);
e.preventDefault();
});
function onVolMove(e) { setVolumeByEvent(e); }
function onVolEnd(e) {
setVolumeByEvent(e);
document.removeEventListener('mousemove', onVolMove);
document.removeEventListener('mouseup', onVolEnd);
}
playlistBtn.addEventListener('click', function(e) {
e.stopPropagation();
dropdown.classList.contains('show') ? closeDropdown() : openDropdown();
});
closeDropdownBtn.addEventListener('click', closeDropdown);
document.addEventListener('click', function(e) {
if (dropdown.classList.contains('show') && !dropdown.contains(e.target) && e.target !== playlistBtn && !playlistBtn
.contains(e.target)) {
closeDropdown();
}
});
audio.addEventListener('timeupdate', updateUI);
audio.addEventListener('loadedmetadata', function() {
if (lyricsData.length) applyLyrics(lyricsData.lrc, lyricsData.duration);
updateUI();
if (isPlaying) play();
});
audio.addEventListener('ended', function() {
if (loopMode === 1) {
audio.currentTime = 0;
audio.play().catch(function() {});
fullRefreshLyrics();
} else {
nextSong();
}
});
document.addEventListener('keydown', function(e) {
if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
if (e.code === 'Space') { e.preventDefault();
togglePlay(); }
});
// ========== 初始化 ==========
setVolume(0.8);
loopBtn.style.backgroundPosition = 'left top';
loadSong(0);
// 自动播放
setTimeout(function() {
play();
}, 500);
console.log(' 播放器已加载');
(function() {
const vids = document.querySelectorAll('.vid');
var mState = () => {papa.style.setProperty('--state', audio.paused ? 'paused' : 'running');
vids.forEach(vid => audio.paused ? vid.pause() : vid.play());
};
audio.onplaying = audio.onpause = () => mState();
})();
let fs = true;
fullscreen.onclick = () => {
fs ? (fullscreen.innerText = '退出全屏', papa.requestFullscreen()) : (fullscreen.innerText = '全屏欣赏', document.exitFullscreen());
fs = !fs;
};
</script>
好听好看，效果漂亮，谢谢友友分享 klxf 发表于 2026-10-21 21:11
好听好看，效果漂亮，谢谢友友分享
谢谢友友支持！
页:
[1]