<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="v
iewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
<title>FOUPK3音乐</title>
<
style>
/* 完整样式重置 */
* { margin
: 0; padding
: 0; box-sizing
: border-box; }
body {
font-family
: Arial, sans-serif;
background-color
: #f4f4f4;
display: flex;
flex-direction
: column;
align-items
: center;
padding-top
: 40px;
}
.container { width
: 90%; max-width
: 400px; }
h2 { text-align
: center; margin-bottom
: 20px; color
: #333; }
.button-group {
display: flex;
align-items
: center;
justify-content
: center;
gap
: 8px;
margin
: 15px 0;
}
button, select {
padding
: 8px 12px;
border-radius
: 4px;
border
: none;
cursor
: pointer;
font-size
: 14px;
}
button { background-color
: #007bff; color
: #fff; }
button
:hover { opacity
: 0.9; }
#qualitySelect {
background-color
: #fff;
color
: #333;
min-width
: 120px;
}
audio { width
: 100%; margin
: 10px 0; }
.file-popup {
display: none;
position
: fixed;
top
: 50%;
left
: 50%;
transform
: translate(-50%, -50%);
background
: #fff;
padding
: 20px;
border-radius
: 8px;
box-shadow
: 0 0 20px rgba(0,0,0,0.1);
z-index
: 9999;
width
: 85%;
max-width
: 350px;
}
.close-btn {
position
: absolute;
top
: 10px;
right
: 15px;
font-size
: 20px;
cursor
: pointer;
}
.file-list { max-height
: 150px; overflow-y
: auto; margin
: 15px 0; }
.file-item { padding
: 8px; border-bottom
: 1px solid #eee; cursor
: pointer; }
.file-item
:hover { background-color
: #f8f9fa; }
#playStatus { text-align
: center; margin
: 10px 0; color
: #666; }
</
style>
</head>
<body>
<div class="container">
<h2>FOUPK3音乐</h2>
<!-- 音效选择 -->
<div
style="text-align
: center; margin-bottom
: 10px;">
<label for="qualitySelect"
style="
display: block; margin-bottom
: 5px;">音效：</label>
<select id="qualitySelect">
<option value="standard">标准音质</option>
<option value="高品">高品音质</option>
<option value="SQ">SQ音质(VIP)</option>
<option value="HQ">HQ音质(VIP)</option>
<option value="无损">无损音质(VIP)</option>
<option value="您正在使用FOUPK3音乐ROS">ROS音质(VIP)</option>
<option value="母带High five">母带Highfive音质(VIP)</option>
<option value="SQM1.0">SQM1.0(VIP)</option>
<option value="您正在使用FOUPK3音乐SQM2.0全景">SQM2.0全景音效音质(SVIP)</option>
</select>
</div>
<!-- 音频控件 -->
<audio id="myAudio" controls></audio>
<!-- 操作按钮（图标替换为文字） -->
<div class="button-group">
<button id="loopBtn">循环</button>
<button id="playBtn">播放</button>
<button id="pauseBtn">暂停</button>
<button id="prevBtn">上一首</button>
<button id="nextBtn">下一首</button>
<button id="localBtn">本地音乐</button>
</div>
<!-- 播放状态 -->
<div id="playStatus"></div>
</div>
<!-- 本地音乐弹窗 -->
<div class="file-popup" id="filePopup">
<span class="close-btn" onclick="closePopup()">×</span>
<input type="file" id="fileInput" multiple accept="audio/*"
style="
display: none;">
<div
style="text-align
: center; margin-bottom
: 10px;">
<button onclick="openFilePicker()">选择音乐（最多15首）</button>
</div>
<div class="file-list" id="fileList"></div>
</div>
<script>
// 核心变量
const myAudio = document.getElementById('myAudio');
const playBtn = document.getElementById('playBtn');
const pauseBtn = document.getElementById('pauseBtn');
const qualitySelect = document.getElementById('qualitySelect');
const localBtn = document.getElementById('localBtn');
const filePopup = document.getElementById('filePopup');
const fileInput = document.getElementById('fileInput');
const fileList = document.getElementById('fileList');
const playStatus = document.getElementById('playStatus');
const loopBtn = document.getElementById('loopBtn');
let audioFiles = [];
let currentIndex = 0;
let loopMode = 'list'; // list | single | none
let isQualityChanging = false;
// 基础播放控制
playBtn.addEventListener('click', () => {
if(audioFiles.length === 0) {
showStatus('请先添加音乐');
return;
}
myAudio.play();
showStatus(`正在播放：${audioFiles[currentIndex]?.name || '音乐'}`);
});
pauseBtn.addEventListener('click', () => {
myAudio.pause();
showStatus('已暂停播放');
});
// 音质切换（带状态保持）
qualitySelect.addEventListener('change', () => {
isQualityChanging = true;
const currentTime = myAudio.currentTime;
const wasPlaying = !myAudio.paused;
showStatus(`切换至 ${qualitySelect.value} 音质`);
myAudio.src = '';
myAudio.load();
myAudio.addEventListener('canplay', () => {
myAudio.currentTime = currentTime;
if(wasPlaying) myAudio.play();
isQualityChanging = false;
}, { once
: true });
});
// 循环模式切换（文字显示模式）
loopBtn.addEventListener('click', () => {
loopMode = loopMode === 'list' ? 'single'
: loopMode === 'single' ? 'none'
: 'list';
updateLoopText();
showStatus(`循环模式：${loopMode === 'list' ? '列表循环'
: loopMode === 'single' ? '单曲循环'
: '关闭循环'}`);
});
// 更新循环按钮文字
function updateLoopText() {
switch(loopMode) {
case 'list'
:
loopBtn.textContent = '列表循环';
break;
case 'single'
:
loopBtn.textContent = '单曲循环';
break;
case 'none'
:
loopBtn.textContent = '不循环';
break;
}
}
// 本地音乐功能（保持不变）
localBtn.addEventListener('click', () => { filePopup.
style.
display = '
block'; });
function openFilePicker() { fileInput.click(); }
fileInput.addEventListener('change', (e) => { /* 逻辑不变 */ });
function renderFileList() { /* 逻辑不变 */ }
function playFile(index) { /* 逻辑不变 */ }
function handlePlayEnd() { /* 逻辑不变 */ }
function closePopup() { /* 逻辑不变 */ }
function showStatus(text, duration = 2000) { /* 逻辑不变 */ }
// 上一首/下一首（文字逻辑）
document.getElementById('prevBtn').addEventListener('click', () => {
if(loopMode === 'single') return;
currentIndex = (currentIndex - 1 + audioFiles.length) % audioFiles.length;
playFile(currentIndex);
});
document.getElementById('nextBtn').addEventListener('click', () => {
if(loopMode === 'single') return;
currentIndex = (currentIndex + 1) % audioFiles.length;
playFile(currentIndex);
});
</script>
</body>
</html>
修复已知错误和问题。
本文探讨了在IE、Firefox及Chrome浏览器中，当table内的tr元素使用style=display:block时出现的页面布局问题，并提供了解决方案。通过将display属性设置为none再恢复显示，而非使用block，可以避免此问题。
扫一扫
2571
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
