英雄赞歌
本帖最后由 亚伦影音工作室 于 2026-10-18 19:07 编辑 <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);
}
.book-wrap {width: 45%;
height: 55%;
position: absolute;z-index: 3;
left: 50%;
top: 27%;
transform: rotatez(6deg)rotateX(20deg);
transform-style: preserve-3d;}
.page { width: 100%;
height: 100%;
position: absolute;background: url(https://pic1.imgdb.cn/i/034hzWyVYnMpPNzrhC2tSM.jpg)no-repeat center/cover;
border-radius: 0px;border: 12px solid #ddd;
transform-origin: left;display: flex;
justify-content: center;
align-items: center;
box-shadow: 0px 0px 0px 2px #000;
background-size:100% 100%;}
.book-content1{animation: roll4s 18s 4 var(--state);background: url(https://pic1.imgdb.cn/i/034hzFS7FNBsRkVZigVqin.webp)no-repeat center/cover}
.book-content2{animation: roll6s 16sinfinite var(--state);background: url(https://pic1.imgdb.cn/i/034hzEYhkdcymxiU0gIi6s.webp)no-repeat center/cover}
.book-content3{animation: roll8s 14sinfinite var(--state);background: url(https://pic1.imgdb.cn/i/034hzEYwZKIWNHcNfqe77U.webp)no-repeat center/cover}
.book-content4{animation: roll 10s 12sinfinite var(--state);background: url(https://pic1.imgdb.cn/i/034hzEZSppPn30SrdCOjw9.webp)no-repeat center/cover}
.book-content5{animation: roll 12s 10s1 var(--state);background: url(https://pic1.imgdb.cn/i/034hzEZcySYDnuD2Nyibf4.webp)no-repeat center/cover}
.book-content6{animation: roll 14s8s2 var(--state);background: url(https://pic1.imgdb.cn/i/034hzEaJrlrEDemxe3CvK7.webp)no-repeat center/cover}
.book-content7{animation: roll 16s6s5 var(--state);background: url(https://pic1.imgdb.cn/i/034hzEYwZKIWNHcNfqe77U.webp)no-repeat center/cover}
.book-content8{animation: roll 18s4s2 var(--state);background: url(https://pic1.imgdb.cn/i/034hzEZHd0LMF88EwYpbnK.webp)no-repeat center/cover}
.book-content9{animation: roll 20s2s 3 var(--state);background: url(https://pic1.imgdb.cn/i/034hzFf1Ym3SNI6FchSubX.webp)no-repeat center/cover}
@keyframes roll {
0% {transform: rotateY(0deg);opacity: 1;}
4% {transform: rotateY(-8deg);opacity: 1;}
30% {transform: rotateY(-170deg);opacity: 1;}
40% {transform: rotateY(-178deg);opacity: 1;}
50% {transform: rotateY(-180deg);opacity: 1;}
95% {transform: rotateY(-180deg);opacity: 1;}
100% {transform: rotateY(-180deg);opacity: 0;}
}
/* ===== 播放器父元素===== */
#bfqfq {z-index: 222;
width: 580px;height:200px;
transform:translate(0%,0%)scale(0.6);
top: 75%; left: 28%;
user-select: none;
overflow: hidden;
position: relative;
}
/* ===== 播放器子元素 ===== */
#amazingaudioplayer-1 {box-shadow:0px 0px 0px 2px #fff000, 0px 0px 0px 10px #880000;
width: 560px;height:160px;
left: 50%;top:20px;transform: translate(-50%);
background:RGB(139,0,0,0.1);
backdrop-filter: blur(6px);
border-radius: 100px;
max-width: 100%;
margin: 0 0%;
animation: color 3s linear infinite var(--state);
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: 160px;height: 160px;left: 0px;top:0px;border-radius: 50%;animation:tion3s linear 1.5s infinite var(--state) ;z-index: -1;transition: 2s;box-shadow: 0px 0px 0px 2px #cccccc;background: url(https://pic1.imgdb.cn/i/034Sa0XFUdJ2G5gG40NzCe.png)no-repeat center/cover;}
#tpp{position:absolute;width: 160px;height: 160px;right: 0px;top:0px;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;background: url(https://pic1.imgdb.cn/i/034Sa0XFUdJ2G5gG40NzCe.png)no-repeat center/cover;}
@keyframes tion { 0% {}100% {transform: rotateZ(360deg);}}
/* ===== 歌词父元素 ===== */
.amazingaudioplayer-text {position: relative;
padding: 10px 12px 0px;
top: 15%;
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;
}
#lrc::before {
animation-name:cover2;
}
#bs {animation: color1 3s linear infinite ;}
@keyframes color1 { 50% { filter: hue-rotate(360deg)brightness(260%);} }
@keyframes cover1 { 0% {-webkit-transform-origin:50% 0%;
-webkit-transform:rotate(0deg)scale(1.1)translate(0%,0%)}
5% {-webkit-transform-origin:50% 0%;
-webkit-transform:rotateY(30deg)scale(1)translate(0%,0%)}
20% {-webkit-transform-origin:50% 0%;
-webkit-transform:rotateY(-30deg)scale(1.1)translate(0%,0%);}
40% {-webkit-transform-origin:50% 0%;
-webkit-transform:rotateY(30deg)scale(1.1)translate(0%,0%);}
60% {-webkit-transform-origin:50% 0%;
-webkit-transform:rotateY(-30deg)scale(1.1)translate(0%,0%);}
80% {-webkit-transform-origin:50% 0%;
-webkit-transform:rotateY(30deg)scale(1.1)translate(0%,0%);}
100% {-webkit-transform-origin:50% 0%;
-webkit-transform:rotate(0deg)scale(1)translate(0%,0%);}
}
@keyframes cover2{ 0% {-webkit-transform-origin:50% 0%;
-webkit-transform:rotate(0deg)scale(1.1)translate(0%,0%)}
5% {-webkit-transform-origin:50% 0%;
-webkit-transform:rotateY(30deg)scale(1)translate(0%,0%)}
20% {-webkit-transform-origin:50% 0%;
-webkit-transform:rotateY(-30deg)scale(1.1)translate(0%,0%);}
40% {-webkit-transform-origin:50% 0%;
-webkit-transform:rotateY(30deg)scale(1.1)translate(0%,0%);}
60% {-webkit-transform-origin:50% 0%;
-webkit-transform:rotateY(-30deg)scale(1.1)translate(0%,0%);}
80% {-webkit-transform-origin:50% 0%;
-webkit-transform:rotateY(30deg)scale(1.1)translate(0%,0%);}
100% {-webkit-transform-origin:50% 0%;
-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: -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: 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: 22px;
left: 50%;
margin-left: 78px;
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: 220px;
color: #eee;
font-size: 18px;
font-weight: 800;
font-family:cursive;
background: rgba(255, 248, 225, 0);
padding: 0 8px;
}
/* 音量等控制 */
.amazingaudioplayer-volume {
position: absolute;
top: 22px;
left: 50%;filter: invert(0%);
margin-left: -105px;
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: 140px;
margin-bottom: 0px;
width:226px;
height: 3px;
background: #fff;
cursor: pointer;
left: 165px;z-index: 6;
margin-right: auto;
border-radius: 12px;
}
.amazingaudioplayer-progress-loaded {
position: absolute;
left: 0;
top: 0;
height: 100%;
background: #bcb694;
width: 0%;
border-radius: 12px;
}
.amazingaudioplayer-progress-played {
position: absolute;
left: 0;
top: 0;
height: 100%;
background:#00aa34;
width: 0%;
border-radius: 12px;
}
/* ===== 歌曲信息 ===== */
.amazingaudioplayer-tracklist {z-index: 3;
margin: 10px 120px;position: absolute;
background: rgba(235, 225, 200, 0);
border-radius: 0px;width:280px;
padding: 0px 18px;
text-align: center;
}
.current-info {font-family: cursive, serif;
font-size: 24px;
font-weight: 700;
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="book-wrap" >
<div class="page " > </div>
<div class="pagebook-content1"> </div>
<div class="pagebook-content2" > </div>
<div class="page book-content3"> </div>
<div class="pagebook-content4" > </div>
<div class="pagebook-content5" > </div>
<div class="pagebook-content6"> </div>
<div class="pagebook-content7"> </div>
<div class="pagebook-content8" > </div>
<div class="page book-content9"> </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 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.qeecc.com/plug/down.php?ac=music&lk=mp3&id=Y2lkZ253ZHNk&.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() {
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]