首页:修订间差异
跳转到导航
跳转到搜索
无编辑摘要 |
无编辑摘要 |
||
第1行: | 第1行: | ||
<html> | <html> | ||
歌曲来自b站up主: maltemarten | 歌曲来自b站up主: maltemarten | ||
<iframe src="/index.php/Player" | <iframe src="/index.php/Player" | ||
style="position: fixed; bottom: 20px; right: 20px; width: 320px; height: 60px; z-index:9999; border: 0;" scrolling="no"></iframe> | style="position: fixed; bottom: 20px; right: 20px; width: 320px; height: 60px; z-index:9999; border: 0;" scrolling="no"></iframe> | ||
<style> | |||
#floating-player { | |||
position: fixed; | |||
bottom: 20px; | |||
right: 20px; | |||
background: rgba(0, 0, 0, 0.85); | |||
border-radius: 12px; | |||
padding: 10px 14px; | |||
display: flex; | |||
flex-direction: column; | |||
align-items: center; | |||
z-index: 9999; | |||
width: 240px; | |||
font-family: sans-serif; | |||
color: white; | |||
box-shadow: 0 0 8px #000; | |||
} | |||
#floating-player button { | |||
margin: 6px; | |||
padding: 6px 12px; | |||
border-radius: 6px; | |||
border: none; | |||
background: #444; | |||
color: white; | |||
cursor: pointer; | |||
font-size: 14px; | |||
} | |||
#floating-player button:hover { | |||
background: #666; | |||
} | |||
#progress { | |||
width: 100%; | |||
margin-top: 8px; | |||
height: 6px; | |||
background: #222; | |||
border-radius: 4px; | |||
overflow: hidden; | |||
} | |||
#bar { | |||
height: 100%; | |||
width: 0%; | |||
background: #66f; | |||
transition: width 0.2s linear; | |||
} | |||
</style> | |||
<div id="floating-player"> | |||
<div> | |||
<button onclick="bgm.play()">▶ 播放</button> | |||
<button onclick="bgm.pause()">⏸ 暂停</button> | |||
</div> | |||
<div id="progress"><div id="bar"></div></div> | |||
</div> | |||
<audio id="bgm" src="https://d1rtq9slcl72gh.cloudfront.net/audio/home.mp3" loop></audio> | |||
<script> | |||
const bgm = document.getElementById('bgm'); | |||
const bar = document.getElementById('bar'); | |||
// 首次点击页面启用音乐播放权限(避免被浏览器拦截) | |||
document.body.addEventListener('click', () => { | |||
bgm.play().catch(() => {}); | |||
}, { once: true }); | |||
// 实时更新进度条 | |||
setInterval(() => { | |||
if (!bgm.duration) return; | |||
const percent = (bgm.currentTime / bgm.duration) * 100; | |||
bar.style.width = percent + '%'; | |||
}, 300); | |||
</script> | |||
<div style="display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; padding: 10px;"> | <div style="display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; padding: 10px;"> | ||
<a href="/index.php/首页" title="全部"><img src="https://wiki.len-chat.ca/images/e/e1/全部.png" width="32"></a> | <a href="/index.php/首页" title="全部"><img src="https://wiki.len-chat.ca/images/e/e1/全部.png" width="32"></a> |
2025年6月4日 (三) 22:10的版本
歌曲来自b站up主: maltemarten