视频转场
本帖最后由 亚伦影音工作室 于 2026-10-20 09:59 编辑 <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;
}
.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/d8594d1140134812a1fff95961434fb4_preview.mp4" loop muted autoplay></video>
<video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/dbea1d51204219706410b4def884b9c8_preview.mp4" loop muted autoplay></video>
<video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/20bfeebe9e314eef46ce51106a2e0957_preview.mp4" loop muted autoplay></video>
<video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/119794fa6c842ab769528d19899daf72_preview.mp4" loop muted autoplay></video>
<video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/888e053f86c27c9c4797fe046129e943_preview.mp4" loop muted autoplay></video>
<video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/ff54d79ff2ebf815ef1b29d476374829_preview.mp4" loop muted autoplay></video>
<video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/23180b490ae23f70410ec0f4bd50e695_preview.mp4" loop muted autoplay></video>
<video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/6d9e9273dad200f7c9d99684715ee37e_preview.mp4" loop muted autoplay></video>
<video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/faa2d9de08d5ea200a9a57c4c98389fc_preview.mp4" loop muted autoplay></video>
<video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/0540a449967dc511122be6c46d14e977_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: "http://music.163.com/song/media/outer/url?id=3394044655.mp3",
lrc: `你又来我梦里说爱我 - 瓦特
演唱：瓦特
出品：亚伦影音工作室
昨夜你又来梦里说爱我
不敢睁开眼怕泪水滑落
恨你许的承诺随口一说
可放下你却又舍不得
其实我知道不该再执着
可回忆始终不肯放过我
如果当初选择擦肩而过
如今也不会为爱尝尽苦涩
我到底前世欠你什么今生为你难过
还要多久才能解脱
转身的是你 走不出来的是我
怪我爱你比爱自己更多
我到底前世欠你什么今生受尽折磨
你却对我如此冷漠
我把心给你 你却狠心丢下我
只剩满身伤痛无人可说
其实我知道不该再执着
可回忆始终不肯放过我
如果当初选择擦肩而过
如今也不会为爱尝尽苦涩
我到底前世欠你什么今生为你难过
还要多久才能解脱
转身的是你 走不出来的是我
怪我爱你比爱自己更多
我到底前世欠你什么今生受尽折磨
你却对我如此冷漠
我把心给你 你却狠心丢下我
只剩满身伤痛无人可说
我到底前世欠你什么今生为你难过
还要多久才能解脱
转身的是你 走不出来的是我
怪我爱你比爱自己更多
我到底前世欠你什么今生受尽折磨
你却对我如此冷漠
我把心给你 你却狠心丢下我
只剩满身伤痛无人可说
`},{
title: "《相逢只一夜》[瓦特] 编辑 亚伦",
src: "https://music.163.com/song/media/outer/url?id=3431144189.mp3",
lrc: `《相逢只一夜》
演唱：瓦特
编辑制作 亚伦
初逢堤畔结缘
许诺岁岁平安
天意狠心拆散
天河横隔两端
朝朝望月长叹
熬过四季严寒
煎熬整整一年
只求今夜相见
苦苦期盼 转瞬离散
贪恋此番 离别已然
为什么相逢太短 留不住温暖
为什么相逢太短 留不住温暖
为什么情深两难 相爱却走散
为什么情深两难 相爱却走散
为什么冷月漫漫 困住了悲欢
为什么冷月漫漫 困住了悲欢
为什么一世痴缠 结局尽遗憾
为什么一世痴缠 结局尽遗憾
为什么天河难断 隔断了牵绊
为什么天河难断 隔断了牵绊
为什么岁岁相见 终究要离散
为什么岁岁相见 终究要离散
为什么长夜漫漫 孤身伴清寒
为什么长夜漫漫 孤身伴清寒
为什么刻骨情缘 终究残破不堪
为什么刻骨情缘 终究残破不堪
鹊桥夜色漫漫
相拥不敢多贪
生怕晨光漫染
打碎此刻相伴
温存片刻消散
天色慢慢泛白
雀鸟纷纷飞散
再度分隔两岸
紧紧牵绊 转眼拆断
相聚短暂 一别永远
终究残破不堪
`},{
title: "《我在红尘里苦苦守望》[华鹏] 编辑 亚伦",
src: "https://upfile.mp3.wf/view.php/0b5a1ae10b1a7d941d154e190ea8f5e2.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>
欣赏亚伦老师精彩视频播放器！ 效果漂亮，切换顺畅，谢谢亚伦老师精彩示范
页:
[1]