新增音乐播放、图片压缩
This commit is contained in:
@@ -0,0 +1,7 @@
|
||||
# Anian-Tool
|
||||
|
||||
> 一些小工具
|
||||
|
||||
#### v260717
|
||||
1. 新增JS音乐播放器（基于Meting-API）
|
||||
2. 新增Python图片压缩（基于Pillow）
|
||||
@@ -0,0 +1,120 @@
|
||||
# pip install pillow
|
||||
from PIL import Image
|
||||
import os
|
||||
import shutil
|
||||
|
||||
def get_file_kb(file_path: str) -> float:
|
||||
"""获取文件大小 KB"""
|
||||
size_byte = os.path.getsize(file_path)
|
||||
return size_byte / 1024
|
||||
|
||||
def compress_to_jpg_loop(
|
||||
input_path: str,
|
||||
output_path: str,
|
||||
min_size_kb: float,
|
||||
max_size_kb: float,
|
||||
init_quality: int,
|
||||
quality_step: int,
|
||||
min_quality: int,
|
||||
max_width: int,
|
||||
max_height: int
|
||||
):
|
||||
try:
|
||||
ori_size = get_file_kb(input_path)
|
||||
print(f"\n原图: {os.path.basename(input_path)} | 大小: {ori_size:.2f} KB")
|
||||
|
||||
# 小于阈值，直接复制原图，不压缩
|
||||
if ori_size < min_size_kb:
|
||||
shutil.copy2(input_path, output_path)
|
||||
print(f"✅ 小于{min_size_kb}KB，无需压缩，直接复制")
|
||||
return
|
||||
|
||||
# 打开图片，处理透明通道
|
||||
img = Image.open(input_path)
|
||||
if img.mode in ("RGBA", "P"):
|
||||
new_img = Image.new("RGB", img.size, (255, 255, 255))
|
||||
mask = img.split()[-1] if img.mode == "RGBA" else None
|
||||
new_img.paste(img, mask=mask)
|
||||
img = new_img
|
||||
|
||||
# 等比例缩放
|
||||
if max_width and max_height:
|
||||
img.thumbnail((max_width, max_height))
|
||||
|
||||
current_quality = init_quality
|
||||
while True:
|
||||
img.save(output_path, format="JPEG", quality=current_quality, optimize=True)
|
||||
out_size = get_file_kb(output_path)
|
||||
|
||||
if out_size <= max_size_kb or current_quality <= min_quality:
|
||||
print(f"✅ 最终画质 {current_quality} | 输出大小: {out_size:.2f} KB")
|
||||
break
|
||||
|
||||
current_quality -= quality_step
|
||||
print(f"⚠️ {out_size:.2f}KB > {max_size_kb}KB，降低画质至 {current_quality} 重新压缩")
|
||||
|
||||
except Exception as e:
|
||||
print(f"❌ 处理失败 {input_path}：{str(e)}")
|
||||
|
||||
|
||||
def batch_compress_folder(
|
||||
input_dir: str,
|
||||
output_dir: str,
|
||||
min_kb,
|
||||
max_kb,
|
||||
init_q,
|
||||
q_step,
|
||||
min_q,
|
||||
max_w,
|
||||
max_h
|
||||
):
|
||||
os.makedirs(output_dir, exist_ok=True)
|
||||
support_ext = (".png", ".jpg", ".jpeg", ".webp", ".bmp")
|
||||
|
||||
for filename in os.listdir(input_dir):
|
||||
file_path = os.path.join(input_dir, filename)
|
||||
if not filename.lower().endswith(support_ext):
|
||||
continue
|
||||
if os.path.isdir(file_path):
|
||||
continue
|
||||
|
||||
name_no_ext = os.path.splitext(filename)[0]
|
||||
out_file = os.path.join(output_dir, f"{name_no_ext}.jpg")
|
||||
compress_to_jpg_loop(
|
||||
input_path=file_path,
|
||||
output_path=out_file,
|
||||
min_size_kb=min_kb,
|
||||
max_size_kb=max_kb,
|
||||
init_quality=init_q,
|
||||
quality_step=q_step,
|
||||
min_quality=min_q,
|
||||
max_width=max_w,
|
||||
max_height=max_h
|
||||
)
|
||||
|
||||
|
||||
if __name__ == "__main__":
|
||||
# ==================== 批量配置区（仅需修改这里） ====================
|
||||
INPUT_FOLDER = "./input"
|
||||
OUTPUT_FOLDER = "./output"
|
||||
MIN_SIZE_KB = 200 # 小于该KB不压缩
|
||||
MAX_SIZE_KB = 800 # 超过该KB循环再压
|
||||
INIT_QUALITY = 75 # 初始画质
|
||||
QUALITY_STEP = 8 # 每次降低画质数值
|
||||
MIN_QUALITY = 20 # 最低画质底线
|
||||
LIMIT_W = 2560 # 不需要缩放填 None
|
||||
LIMIT_H = 1440
|
||||
# ==================================================================
|
||||
|
||||
# 仅批量执行，无任何单张代码
|
||||
batch_compress_folder(
|
||||
input_dir=INPUT_FOLDER,
|
||||
output_dir=OUTPUT_FOLDER,
|
||||
min_kb=MIN_SIZE_KB,
|
||||
max_kb=MAX_SIZE_KB,
|
||||
init_q=INIT_QUALITY,
|
||||
q_step=QUALITY_STEP,
|
||||
min_q=MIN_QUALITY,
|
||||
max_w=LIMIT_W,
|
||||
max_h=LIMIT_H
|
||||
)
|
||||
@@ -0,0 +1,467 @@
|
||||
(() => {
|
||||
let songs, audio, currentIndex = 0;
|
||||
let floatingButton, progressRing, playerPanel, coverImg, popupBgImg, animationFrameId;
|
||||
let lyricLines = [];
|
||||
let isPlayerClosed = false;
|
||||
|
||||
const playlistApiUrl = "https://api.i-meto.com/meting/api?server=netease&type=playlist&id=8034031191";
|
||||
|
||||
// =========================
|
||||
// 工具
|
||||
// =========================
|
||||
const getRandomSongIndex = () => {
|
||||
if (!songs || !songs.length) return 0;
|
||||
return Math.floor(Math.random() * songs.length);
|
||||
};
|
||||
|
||||
const getCoverSrc = () => {
|
||||
if (!songs || !songs.length) return "/logo.webp";
|
||||
const pic = songs[currentIndex % songs.length]?.pic;
|
||||
return pic?.trim() ? pic.trim() : "/logo.webp";
|
||||
};
|
||||
|
||||
const setPopupBackground = (src) => {
|
||||
if (!popupBgImg) return;
|
||||
|
||||
const fallback = "/logo.webp";
|
||||
const nextSrc = src?.trim() ? src.trim() : fallback;
|
||||
popupBgImg.src = nextSrc;
|
||||
};
|
||||
|
||||
// =========================
|
||||
// 封面
|
||||
// =========================
|
||||
const setCover = () => {
|
||||
if (!coverImg) return;
|
||||
const cover = getCoverSrc();
|
||||
coverImg.src = cover;
|
||||
setPopupBackground(cover);
|
||||
};
|
||||
|
||||
// =========================
|
||||
// audio
|
||||
// =========================
|
||||
const initAudio = () => {
|
||||
if (!audio) {
|
||||
audio = new Audio();
|
||||
audio.volume = 0.5;
|
||||
|
||||
audio.onplay = () => { syncUI(); setRotate(); };
|
||||
audio.onpause = () => { syncUI(); setRotate(); };
|
||||
audio.onended = () => next();
|
||||
}
|
||||
};
|
||||
|
||||
// =========================
|
||||
// LRC解析
|
||||
// =========================
|
||||
const parseLrc = (text) => {
|
||||
const lines = text.split("\n");
|
||||
const res = [];
|
||||
const reg = /\[(\d{2}):(\d{2})\.(\d{2,3})\]/;
|
||||
|
||||
for (let line of lines) {
|
||||
const timeMatch = line.match(reg);
|
||||
if (!timeMatch) continue;
|
||||
|
||||
const time =
|
||||
(+timeMatch[1]) * 60 +
|
||||
(+timeMatch[2]) +
|
||||
(+timeMatch[3]) / (timeMatch[3].length === 3 ? 1000 : 100);
|
||||
|
||||
const txt = line.replace(reg, "").trim();
|
||||
if (txt) res.push({ time, text: txt });
|
||||
}
|
||||
|
||||
return res.sort((left, right) => left.time - right.time);
|
||||
};
|
||||
|
||||
// =========================
|
||||
// 歌词渲染
|
||||
// =========================
|
||||
const renderLrc = (top, mid, bottom) => {
|
||||
const box = playerPanel?.querySelector(".lrc");
|
||||
if (!box) return;
|
||||
|
||||
box.innerHTML = `
|
||||
<div style="opacity:.4;font-size:12px;line-height:1.2;min-height:16px">${top}</div>
|
||||
<div style="font-size:14px;font-weight:600;margin:2px 0;line-height:1.2;min-height:18px">${mid}</div>
|
||||
<div style="opacity:.4;font-size:12px;line-height:1.2;min-height:16px">${bottom}</div>
|
||||
`;
|
||||
};
|
||||
|
||||
const renderLoadingLrc = () => {
|
||||
renderLrc("加", "载", "中");
|
||||
};
|
||||
|
||||
// =========================
|
||||
// loading歌词
|
||||
// =========================
|
||||
const loadLyric = (song) => {
|
||||
lyricLines = [];
|
||||
|
||||
renderLoadingLrc();
|
||||
|
||||
if (!song?.lrc) {
|
||||
renderLrc("-", "暂无歌词", "-");
|
||||
return;
|
||||
}
|
||||
|
||||
fetch(song.lrc)
|
||||
.then(response => response.text())
|
||||
.then(text => {
|
||||
lyricLines = parseLrc(text);
|
||||
})
|
||||
.catch(() => {
|
||||
lyricLines = [];
|
||||
renderLrc("-", "加载失败", "-");
|
||||
});
|
||||
};
|
||||
|
||||
// =========================
|
||||
// load song
|
||||
// =========================
|
||||
const loadSong = () => {
|
||||
if (!songs || !songs.length) return;
|
||||
|
||||
const currentSong = songs[currentIndex % songs.length];
|
||||
initAudio();
|
||||
|
||||
audio.src = currentSong.url;
|
||||
loadLyric(currentSong);
|
||||
};
|
||||
|
||||
// =========================
|
||||
// UI（标题）
|
||||
// =========================
|
||||
const syncUI = () => {
|
||||
if (!playerPanel) return;
|
||||
|
||||
const titleBox = playerPanel.querySelector(".t");
|
||||
if (!titleBox) return;
|
||||
|
||||
const currentSong = songs?.length ? songs[currentIndex % songs.length] : null;
|
||||
|
||||
titleBox.innerHTML = `
|
||||
<div style="display:flex;justify-content:space-between;align-items:flex-start;gap:6px">
|
||||
<div style="flex:1;line-height:1.2">
|
||||
<div style="font-size:13px">${currentSong?.title || "加载中"}</div>
|
||||
<div style="font-size:11px;opacity:.7;margin-top:2px">${currentSong?.author || "请稍候"}</div>
|
||||
</div>
|
||||
|
||||
<div style="display:flex;gap:6px;align-items:center;flex-shrink:0;">
|
||||
<button class="minPlayerBtn" style="
|
||||
width:24px;height:24px;
|
||||
border:none;
|
||||
border-radius:6px;
|
||||
background:rgba(255,255,255,.08);
|
||||
color:#fff;
|
||||
font-size:14px;
|
||||
cursor:pointer;
|
||||
">−</button>
|
||||
|
||||
<button class="closePlayerBtn" style="
|
||||
width:24px;height:24px;
|
||||
border:none;
|
||||
border-radius:6px;
|
||||
background:rgba(255,255,255,.08);
|
||||
color:#fff;
|
||||
font-size:14px;
|
||||
cursor:pointer;
|
||||
">×</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
const isPlaying = audio && !audio.paused;
|
||||
playerPanel.querySelector(".pp").textContent = isPlaying ? "暂停" : "播放";
|
||||
|
||||
// 关闭（彻底关闭）
|
||||
titleBox.querySelector(".closePlayerBtn").onclick = (event) => {
|
||||
event.stopPropagation();
|
||||
|
||||
if (audio) {
|
||||
audio.pause();
|
||||
audio.src = "";
|
||||
}
|
||||
|
||||
isPlayerClosed = true;
|
||||
|
||||
floatingButton.style.display = "none";
|
||||
playerPanel.style.display = "none";
|
||||
};
|
||||
|
||||
// 最小化（只收起面板）
|
||||
titleBox.querySelector(".minPlayerBtn").onclick = (event) => {
|
||||
event.stopPropagation();
|
||||
if (playerPanel) playerPanel.style.display = "none";
|
||||
};
|
||||
};
|
||||
|
||||
// =========================
|
||||
// rotate
|
||||
// =========================
|
||||
const setRotate = () => {
|
||||
if (!coverImg) return;
|
||||
coverImg.style.animationPlayState = (audio && !audio.paused) ? "running" : "paused";
|
||||
};
|
||||
|
||||
// =========================
|
||||
// 歌词更新
|
||||
// =========================
|
||||
const updateLrc = () => {
|
||||
if (!lyricLines.length || !audio) return;
|
||||
|
||||
const currentTime = audio.currentTime;
|
||||
|
||||
let lyricIndex = 0;
|
||||
for (let lyricLineIndex = 0; lyricLineIndex < lyricLines.length; lyricLineIndex++) {
|
||||
if (currentTime >= lyricLines[lyricLineIndex].time) lyricIndex = lyricLineIndex;
|
||||
else break;
|
||||
}
|
||||
|
||||
renderLrc(
|
||||
lyricLines[lyricIndex - 1]?.text || "-",
|
||||
lyricLines[lyricIndex]?.text || "-",
|
||||
lyricLines[lyricIndex + 1]?.text || "-"
|
||||
);
|
||||
};
|
||||
|
||||
// =========================
|
||||
// progress
|
||||
// =========================
|
||||
const progress = () => {
|
||||
if (!audio || !audio.duration) return;
|
||||
|
||||
const progressPercent = audio.currentTime / audio.duration;
|
||||
|
||||
progressRing.style.background =
|
||||
`conic-gradient(#fff ${progressPercent * 360}deg,rgba(255,255,255,.15) 0)`;
|
||||
|
||||
const seek = playerPanel?.querySelector(".seek");
|
||||
if (seek && !seek.matches(":active")) {
|
||||
seek.value = Math.floor(progressPercent * 1000);
|
||||
}
|
||||
|
||||
updateLrc();
|
||||
};
|
||||
|
||||
// =========================
|
||||
// play / pause / next
|
||||
// =========================
|
||||
const play = async () => {
|
||||
initAudio();
|
||||
if (!audio.src) loadSong();
|
||||
|
||||
try { await audio.play(); } catch { }
|
||||
|
||||
syncUI();
|
||||
setRotate();
|
||||
|
||||
cancelAnimationFrame(animationFrameId);
|
||||
loop();
|
||||
};
|
||||
|
||||
const pause = () => {
|
||||
if (audio) audio.pause();
|
||||
syncUI();
|
||||
setRotate();
|
||||
};
|
||||
|
||||
const next = () => {
|
||||
if (!songs || !songs.length) return;
|
||||
|
||||
let newIndex = getRandomSongIndex();
|
||||
if (songs.length > 1) {
|
||||
while (newIndex === currentIndex) newIndex = getRandomSongIndex();
|
||||
}
|
||||
|
||||
currentIndex = newIndex;
|
||||
|
||||
const currentSong = songs[currentIndex % songs.length];
|
||||
|
||||
loadSong();
|
||||
syncUI();
|
||||
setRotate();
|
||||
setCover();
|
||||
|
||||
loadLyric(currentSong);
|
||||
|
||||
audio.play().catch(() => { });
|
||||
};
|
||||
|
||||
// =========================
|
||||
// volume
|
||||
// =========================
|
||||
const volUp = () => {
|
||||
if (!audio) return;
|
||||
audio.volume = Math.min(1, audio.volume + 0.1);
|
||||
};
|
||||
|
||||
const volDown = () => {
|
||||
if (!audio) return;
|
||||
audio.volume = Math.max(0, audio.volume - 0.1);
|
||||
};
|
||||
|
||||
// =========================
|
||||
// loop
|
||||
// =========================
|
||||
const loop = () => {
|
||||
progress();
|
||||
animationFrameId = requestAnimationFrame(loop);
|
||||
};
|
||||
|
||||
// =========================
|
||||
// UI init
|
||||
// =========================
|
||||
const initUI = () => {
|
||||
floatingButton = document.createElement("div");
|
||||
floatingButton.style.cssText =
|
||||
"position:fixed;right:18px;bottom:18px;width:58px;height:58px;border-radius:50%;background:#111;z-index:99999;display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden";
|
||||
|
||||
progressRing = document.createElement("div");
|
||||
progressRing.style.cssText =
|
||||
"position:absolute;inset:0;border-radius:50%;background:conic-gradient(rgba(255,255,255,.15) 0deg,transparent 0);z-index:0";
|
||||
|
||||
coverImg = document.createElement("img");
|
||||
coverImg.src = "/logo.webp";
|
||||
coverImg.style.cssText =
|
||||
"width:46px;height:46px;border-radius:50%;object-fit:cover;z-index:2;position:relative;animation:spin 6s linear infinite;animation-play-state:paused";
|
||||
|
||||
floatingButton.appendChild(progressRing);
|
||||
floatingButton.appendChild(coverImg);
|
||||
|
||||
playerPanel = document.createElement("div");
|
||||
playerPanel.style.cssText =
|
||||
"position:fixed;right:18px;bottom:90px;width:240px;background:#000;color:#fff;border-radius:12px;display:none;z-index:99999;overflow:hidden";
|
||||
|
||||
playerPanel.innerHTML = `
|
||||
<div class="t"></div>
|
||||
<div class="lrc" style="margin:10px 0 8px 0;text-align:center"></div>
|
||||
<input class="seek" type="range" min="0" max="1000" value="0"
|
||||
style="width:100%;margin:0 0 8px 0;accent-color:#fff">
|
||||
<div style="display:flex;justify-content:space-evenly;align-items:center">
|
||||
<button class="pp">播放</button>
|
||||
<button class="cc">切歌</button>
|
||||
<button class="vu">音量+</button>
|
||||
<button class="vd">音量-</button>
|
||||
</div>`;
|
||||
|
||||
const popupBg = document.createElement("img");
|
||||
popupBg.className = "popupBg";
|
||||
popupBg.alt = "";
|
||||
|
||||
const popupShade = document.createElement("div");
|
||||
popupShade.className = "popupShade";
|
||||
|
||||
const popupContent = document.createElement("div");
|
||||
popupContent.className = "popupContent";
|
||||
|
||||
while (playerPanel.firstChild) popupContent.appendChild(playerPanel.firstChild);
|
||||
|
||||
playerPanel.appendChild(popupBg);
|
||||
playerPanel.appendChild(popupShade);
|
||||
playerPanel.appendChild(popupContent);
|
||||
|
||||
popupBgImg = popupBg;
|
||||
setPopupBackground("/logo.webp");
|
||||
|
||||
document.body.appendChild(floatingButton);
|
||||
document.body.appendChild(playerPanel);
|
||||
|
||||
const style = document.createElement("style");
|
||||
style.textContent = `
|
||||
@keyframes spin {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
button {
|
||||
transition: transform .05s ease, background .05s ease;
|
||||
}
|
||||
|
||||
button:active {
|
||||
transform: scale(0.92);
|
||||
}
|
||||
|
||||
.pp, .cc, .vu, .vd {
|
||||
background:transparent;
|
||||
color:#fff;
|
||||
border:none;
|
||||
font-size:16px;
|
||||
}
|
||||
|
||||
.popupBg {
|
||||
position:absolute;
|
||||
inset:0;
|
||||
width:100%;
|
||||
height:100%;
|
||||
object-fit:cover;
|
||||
z-index:0;
|
||||
}
|
||||
|
||||
.popupShade {
|
||||
position:absolute;
|
||||
inset:0;
|
||||
background:rgba(0,0,0,.58);
|
||||
z-index:1;
|
||||
}
|
||||
|
||||
.popupContent {
|
||||
position:relative;
|
||||
z-index:2;
|
||||
padding:10px;
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
|
||||
floatingButton.onclick = () => {
|
||||
if (isPlayerClosed) return;
|
||||
playerPanel.style.display = playerPanel.style.display === "none" ? "block" : "none";
|
||||
};
|
||||
|
||||
playerPanel.querySelector(".pp").onclick = (event) => {
|
||||
event.stopPropagation();
|
||||
if (!audio || audio.paused) play();
|
||||
else pause();
|
||||
};
|
||||
|
||||
playerPanel.querySelector(".cc").onclick = () => next();
|
||||
playerPanel.querySelector(".vu").onclick = () => volUp();
|
||||
playerPanel.querySelector(".vd").onclick = () => volDown();
|
||||
|
||||
const seek = playerPanel.querySelector(".seek");
|
||||
seek.addEventListener("input", () => {
|
||||
if (!audio || !audio.duration) return;
|
||||
audio.currentTime = (seek.value / 1000) * audio.duration;
|
||||
});
|
||||
|
||||
setInterval(progress, 100);
|
||||
};
|
||||
|
||||
// =========================
|
||||
// init
|
||||
// =========================
|
||||
initUI();
|
||||
|
||||
renderLoadingLrc();
|
||||
syncUI();
|
||||
|
||||
fetch(playlistApiUrl)
|
||||
.then(response => response.json())
|
||||
.then(responseSongs => {
|
||||
songs = responseSongs;
|
||||
|
||||
if (songs && songs.length) {
|
||||
currentIndex = getRandomSongIndex();
|
||||
|
||||
setCover();
|
||||
syncUI();
|
||||
|
||||
loadSong();
|
||||
} else {
|
||||
syncUI();
|
||||
}
|
||||
});
|
||||
|
||||
})();
|
||||
Reference in New Issue
Block a user