268 lines
10 KiB
HTML
268 lines
10 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>MP3转WAV转换及语音评测测试</title>
|
||
<style>
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
body {
|
||
font-family: 'Microsoft YaHei', Arial, sans-serif;
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
min-height: 100vh;
|
||
padding: 20px;
|
||
}
|
||
.container {
|
||
max-width: 800px;
|
||
margin: 0 auto;
|
||
background: white;
|
||
border-radius: 12px;
|
||
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
|
||
padding: 30px;
|
||
}
|
||
h1 {
|
||
color: #667eea;
|
||
text-align: center;
|
||
margin-bottom: 30px;
|
||
font-size: 28px;
|
||
}
|
||
.upload-area {
|
||
border: 3px dashed #667eea;
|
||
border-radius: 8px;
|
||
padding: 40px;
|
||
text-align: center;
|
||
margin-bottom: 20px;
|
||
cursor: pointer;
|
||
transition: all 0.3s;
|
||
}
|
||
.upload-area:hover {
|
||
background: #f8f9ff;
|
||
border-color: #764ba2;
|
||
}
|
||
.upload-area.dragover {
|
||
background: #e8ecff;
|
||
border-color: #667eea;
|
||
}
|
||
input[type="file"] { display: none; }
|
||
.file-info {
|
||
margin: 20px 0;
|
||
padding: 15px;
|
||
background: #f8f9ff;
|
||
border-radius: 8px;
|
||
display: none;
|
||
}
|
||
.file-info.show { display: block; }
|
||
button {
|
||
width: 100%;
|
||
padding: 15px;
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
color: white;
|
||
border: none;
|
||
border-radius: 8px;
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
cursor: pointer;
|
||
transition: transform 0.2s;
|
||
}
|
||
button:hover { transform: translateY(-2px); }
|
||
button:disabled {
|
||
background: #ccc;
|
||
cursor: not-allowed;
|
||
}
|
||
.result {
|
||
margin-top: 20px;
|
||
padding: 20px;
|
||
border-radius: 8px;
|
||
display: none;
|
||
}
|
||
.result.show { display: block; }
|
||
.result.success { background: #d4edda; border: 1px solid #c3e6cb; }
|
||
.result.error { background: #f8d7da; border: 1px solid #f5c6cb; }
|
||
.log {
|
||
margin-top: 10px;
|
||
padding: 15px;
|
||
background: white;
|
||
border-radius: 4px;
|
||
font-family: 'Courier New', monospace;
|
||
font-size: 14px;
|
||
white-space: pre-wrap;
|
||
max-height: 400px;
|
||
overflow-y: auto;
|
||
}
|
||
.icon { font-size: 48px; margin-bottom: 15px; }
|
||
.tips {
|
||
margin-top: 20px;
|
||
padding: 15px;
|
||
background: #fff3cd;
|
||
border-radius: 8px;
|
||
font-size: 14px;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<h1>🎵 MP3→WAV 转换及语音评测测试</h1>
|
||
|
||
<div class="upload-area" id="uploadArea" onclick="document.getElementById('fileInput').click()">
|
||
<div class="icon">📁</div>
|
||
<h3>点击或拖拽上传MP3文件</h3>
|
||
<p style="color: #666; margin-top: 10px;">支持格式：MP3, M4A, AAC</p>
|
||
</div>
|
||
|
||
<input type="file" id="fileInput" accept=".mp3,.m4a,.aac">
|
||
|
||
<div class="file-info" id="fileInfo">
|
||
<strong>选择的文件：</strong>
|
||
<div id="fileName"></div>
|
||
<div id="fileSize"></div>
|
||
</div>
|
||
|
||
<div style="margin: 20px 0;">
|
||
<label for="testText" style="display: block; margin-bottom: 8px; font-weight: bold; color: #333;">
|
||
📝 评测文本（用于语音评测）:
|
||
</label>
|
||
<input type="text" id="testText" value="你好世界"
|
||
style="width: 100%; padding: 12px; border: 2px solid #667eea; border-radius: 6px; font-size: 14px;"
|
||
placeholder="请输入要评测的文本内容">
|
||
<p style="color: #666; font-size: 12px; margin-top: 5px;">
|
||
💡 提示：录音内容应与此文本一致，以便百度API进行准确评测
|
||
</p>
|
||
</div>
|
||
|
||
<button id="uploadBtn" disabled onclick="uploadFile()">开始测试转换及评测</button>
|
||
|
||
<div class="result" id="result"></div>
|
||
|
||
<div class="tips">
|
||
<strong>💡 提示：</strong><br>
|
||
• 这将测试完整的语音评测流程：MP3→WAV转换→百度API评测<br>
|
||
• 转换成功说明Jave2/FFmpeg工作正常<br>
|
||
• 评测成功说明百度语音服务配置正确<br>
|
||
• 建议录制与评测文本一致的语音进行测试
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
const API_URL = 'http://192.168.1.164:30091/study/voiceEvaluation/testConvertMp3';
|
||
let selectedFile = null;
|
||
|
||
// 文件选择
|
||
document.getElementById('fileInput').addEventListener('change', function(e) {
|
||
handleFile(e.target.files[0]);
|
||
});
|
||
|
||
// 拖拽上传
|
||
const uploadArea = document.getElementById('uploadArea');
|
||
uploadArea.addEventListener('dragover', (e) => {
|
||
e.preventDefault();
|
||
uploadArea.classList.add('dragover');
|
||
});
|
||
uploadArea.addEventListener('dragleave', () => {
|
||
uploadArea.classList.remove('dragover');
|
||
});
|
||
uploadArea.addEventListener('drop', (e) => {
|
||
e.preventDefault();
|
||
uploadArea.classList.remove('dragover');
|
||
handleFile(e.dataTransfer.files[0]);
|
||
});
|
||
|
||
function handleFile(file) {
|
||
if (!file) return;
|
||
|
||
if (!file.name.match(/\.(mp3|m4a|aac)$/i)) {
|
||
alert('请选择MP3/M4A/AAC格式的文件！');
|
||
return;
|
||
}
|
||
|
||
selectedFile = file;
|
||
document.getElementById('fileName').textContent = file.name;
|
||
document.getElementById('fileSize').textContent = `大小: ${(file.size / 1024).toFixed(2)} KB`;
|
||
document.getElementById('fileInfo').classList.add('show');
|
||
document.getElementById('uploadBtn').disabled = false;
|
||
}
|
||
|
||
async function uploadFile() {
|
||
if (!selectedFile) return;
|
||
|
||
const formData = new FormData();
|
||
formData.append('file', selectedFile);
|
||
|
||
// 添加评测文本参数
|
||
const testText = document.getElementById('testText').value || '你好世界';
|
||
formData.append('testText', testText);
|
||
|
||
document.getElementById('uploadBtn').disabled = true;
|
||
document.getElementById('uploadBtn').textContent = '转换及评测中...';
|
||
document.getElementById('result').className = 'result';
|
||
document.getElementById('result').textContent = '';
|
||
|
||
try {
|
||
const response = await fetch(API_URL, {
|
||
method: 'POST',
|
||
body: formData
|
||
});
|
||
|
||
const data = await response.json();
|
||
showResult(data);
|
||
|
||
} catch (error) {
|
||
showError('网络错误: ' + error.message);
|
||
} finally {
|
||
document.getElementById('uploadBtn').disabled = false;
|
||
document.getElementById('uploadBtn').textContent = '开始测试转换及评测';
|
||
}
|
||
}
|
||
|
||
function showResult(data) {
|
||
const resultDiv = document.getElementById('result');
|
||
resultDiv.classList.add('show');
|
||
|
||
if (data.code === 200) {
|
||
resultDiv.classList.add('success');
|
||
|
||
let evaluationHtml = '';
|
||
if (data.evaluationResult) {
|
||
const eval = data.evaluationResult;
|
||
evaluationHtml = `
|
||
<div style="margin-top: 20px; padding: 15px; background: #e8f5e9; border-radius: 8px;">
|
||
<h4 style="color: #2e7d32; margin-bottom: 10px;">📊 语音评测结果：</h4>
|
||
<div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;">
|
||
<div><strong>🎯 综合得分:</strong> <span style="color: #e91e63; font-size: 18px; font-weight: bold;">${eval.score || 'N/A'}</span></div>
|
||
<div><strong>✅ 准确度:</strong> ${eval.accuracy || 'N/A'}</div>
|
||
<div><strong>🗣️ 流利度:</strong> ${eval.fluency || 'N/A'}</div>
|
||
<div><strong>📋 完整度:</strong> ${eval.completeness || 'N/A'}</div>
|
||
<div><strong>🎵 发音标准度:</strong> ${eval.pronunciation || 'N/A'}</div>
|
||
</div>
|
||
</div>
|
||
`;
|
||
}
|
||
|
||
resultDiv.innerHTML = `
|
||
<h3 style="color: #28a745; margin-bottom: 10px;">✅ ${data.msg}</h3>
|
||
<div><strong>📝 评测文本:</strong> ${data.testText}</div>
|
||
<div><strong>📁 源文件:</strong> ${data.sourceFile}</div>
|
||
<div><strong>🎵 转换文件:</strong> ${data.convertedFile}</div>
|
||
<div><strong>📊 源文件大小:</strong> ${(data.sourceSize / 1024).toFixed(2)} KB</div>
|
||
<div><strong>📊 转换后大小:</strong> ${(data.convertedSize / 1024).toFixed(2)} KB</div>
|
||
${evaluationHtml}
|
||
<div class="log">${data.testLog}</div>
|
||
`;
|
||
} else {
|
||
resultDiv.classList.add('error');
|
||
resultDiv.innerHTML = `
|
||
<h3 style="color: #dc3545; margin-bottom: 10px;">❌ ${data.msg}</h3>
|
||
<div class="log">${data.testLog || data.errorDetail || '转换失败'}</div>
|
||
${data.solution ? `<div style="margin-top: 10px; color: #856404;"><strong>解决方案:</strong> ${data.solution}</div>` : ''}
|
||
`;
|
||
}
|
||
}
|
||
|
||
function showError(message) {
|
||
const resultDiv = document.getElementById('result');
|
||
resultDiv.classList.add('show', 'error');
|
||
resultDiv.innerHTML = `<h3 style="color: #dc3545;">❌ 测试失败</h3><p>${message}</p>`;
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|