505 lines
20 KiB
JavaScript
505 lines
20 KiB
JavaScript
|
// 题目数据数组
|
|||
|
|
const questions = [
|
|||
|
|
// 简单难度题目 (5道)
|
|||
|
|
{
|
|||
|
|
difficulty: 'easy',
|
|||
|
|
text: '下列哪个物理量是矢量？',
|
|||
|
|
options: ['A. 质量', 'B. 时间', 'C. 位移', 'D. 路程'],
|
|||
|
|
answer: 'C',
|
|||
|
|
explanation: '矢量具有大小和方向，位移是矢量，其他选项均为标量。'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
difficulty: 'easy',
|
|||
|
|
text: '下列哪个物理量是矢量？',
|
|||
|
|
options: ['A. 质量', 'B. 时间', 'C. 位移', 'D. 路程'],
|
|||
|
|
answer: 'C',
|
|||
|
|
explanation: '矢量具有大小和方向，位移是矢量，其他选项均为标量。'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
difficulty: 'easy',
|
|||
|
|
text: '下列哪个物理量是矢量？',
|
|||
|
|
options: ['A. 质量', 'B. 时间', 'C. 位移', 'D. 路程'],
|
|||
|
|
answer: 'C',
|
|||
|
|
explanation: '矢量具有大小和方向，位移是矢量，其他选项均为标量。'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
difficulty: 'easy',
|
|||
|
|
text: '下列哪个物理量是矢量？',
|
|||
|
|
options: ['A. 质量', 'B. 时间', 'C. 位移', 'D. 路程'],
|
|||
|
|
answer: 'C',
|
|||
|
|
explanation: '矢量具有大小和方向，位移是矢量，其他选项均为标量。'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
difficulty: 'easy',
|
|||
|
|
text: '下列哪个物理量是矢量？',
|
|||
|
|
options: ['A. 质量', 'B. 时间', 'C. 位移', 'D. 路程'],
|
|||
|
|
answer: 'C',
|
|||
|
|
explanation: '矢量具有大小和方向，位移是矢量，其他选项均为标量。'
|
|||
|
|
},
|
|||
|
|
// 中等难度题目 (5道)
|
|||
|
|
{
|
|||
|
|
difficulty: 'medium',
|
|||
|
|
text: '关于万有引力定律，下列说法正确的是？',
|
|||
|
|
options: [
|
|||
|
|
'A. 万有引力只存在于天体之间',
|
|||
|
|
'B. 万有引力与物体质量成正比，与距离成反比',
|
|||
|
|
'C. 万有引力的发现者是牛顿',
|
|||
|
|
'D. 地球对苹果的引力大于苹果对地球的引力'
|
|||
|
|
],
|
|||
|
|
answer: 'C',
|
|||
|
|
explanation: '万有引力存在于任何有质量的物体之间，A错误；万有引力与距离的平方成反比，B错误；牛顿发现了万有引力定律，C正确；物体间的引力是相互的，大小相等，D错误。'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
difficulty: 'medium',
|
|||
|
|
text: '关于万有引力定律，下列说法正确的是？',
|
|||
|
|
options: [
|
|||
|
|
'A. 万有引力只存在于天体之间',
|
|||
|
|
'B. 万有引力与物体质量成正比，与距离成反比',
|
|||
|
|
'C. 万有引力的发现者是牛顿',
|
|||
|
|
'D. 地球对苹果的引力大于苹果对地球的引力'
|
|||
|
|
],
|
|||
|
|
answer: 'C',
|
|||
|
|
explanation: '万有引力存在于任何有质量的物体之间，A错误；万有引力与距离的平方成反比，B错误；牛顿发现了万有引力定律，C正确；物体间的引力是相互的，大小相等，D错误。'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
difficulty: 'medium',
|
|||
|
|
text: '关于万有引力定律，下列说法正确的是？',
|
|||
|
|
options: [
|
|||
|
|
'A. 万有引力只存在于天体之间',
|
|||
|
|
'B. 万有引力与物体质量成正比，与距离成反比',
|
|||
|
|
'C. 万有引力的发现者是牛顿',
|
|||
|
|
'D. 地球对苹果的引力大于苹果对地球的引力'
|
|||
|
|
],
|
|||
|
|
answer: 'C',
|
|||
|
|
explanation: '万有引力存在于任何有质量的物体之间，A错误；万有引力与距离的平方成反比，B错误；牛顿发现了万有引力定律，C正确；物体间的引力是相互的，大小相等，D错误。'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
difficulty: 'medium',
|
|||
|
|
text: '关于万有引力定律，下列说法正确的是？',
|
|||
|
|
options: [
|
|||
|
|
'A. 万有引力只存在于天体之间',
|
|||
|
|
'B. 万有引力与物体质量成正比，与距离成反比',
|
|||
|
|
'C. 万有引力的发现者是牛顿',
|
|||
|
|
'D. 地球对苹果的引力大于苹果对地球的引力'
|
|||
|
|
],
|
|||
|
|
answer: 'C',
|
|||
|
|
explanation: '万有引力存在于任何有质量的物体之间，A错误；万有引力与距离的平方成反比，B错误；牛顿发现了万有引力定律，C正确；物体间的引力是相互的，大小相等，D错误。'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
difficulty: 'medium',
|
|||
|
|
text: '关于万有引力定律，下列说法正确的是？',
|
|||
|
|
options: [
|
|||
|
|
'A. 万有引力只存在于天体之间',
|
|||
|
|
'B. 万有引力与物体质量成正比，与距离成反比',
|
|||
|
|
'C. 万有引力的发现者是牛顿',
|
|||
|
|
'D. 地球对苹果的引力大于苹果对地球的引力'
|
|||
|
|
],
|
|||
|
|
answer: 'C',
|
|||
|
|
explanation: '万有引力存在于任何有质量的物体之间，A错误；万有引力与距离的平方成反比，B错误；牛顿发现了万有引力定律，C正确；物体间的引力是相互的，大小相等，D错误。'
|
|||
|
|
},
|
|||
|
|
// 困难难度题目 (5道)
|
|||
|
|
{
|
|||
|
|
difficulty: 'hard',
|
|||
|
|
text: '相对论中质量与能量的关系表达式是？',
|
|||
|
|
options: ['A. E=mc²', 'B. F=ma', 'C. E=hv', 'D. P=mv'],
|
|||
|
|
answer: 'A',
|
|||
|
|
explanation: '爱因斯坦的质能方程E=mc²表明质量和能量可以相互转换。'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
difficulty: 'hard',
|
|||
|
|
text: '相对论中质量与能量的关系表达式是？',
|
|||
|
|
options: ['A. E=mc²', 'B. F=ma', 'C. E=hv', 'D. P=mv'],
|
|||
|
|
answer: 'A',
|
|||
|
|
explanation: '爱因斯坦的质能方程E=mc²表明质量和能量可以相互转换。'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
difficulty: 'hard',
|
|||
|
|
text: '相对论中质量与能量的关系表达式是？',
|
|||
|
|
options: ['A. E=mc²', 'B. F=ma', 'C. E=hv', 'D. P=mv'],
|
|||
|
|
answer: 'A',
|
|||
|
|
explanation: '爱因斯坦的质能方程E=mc²表明质量和能量可以相互转换。'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
difficulty: 'hard',
|
|||
|
|
text: '相对论中质量与能量的关系表达式是？',
|
|||
|
|
options: ['A. E=mc²', 'B. F=ma', 'C. E=hv', 'D. P=mv'],
|
|||
|
|
answer: 'A',
|
|||
|
|
explanation: '爱因斯坦的质能方程E=mc²表明质量和能量可以相互转换。'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
difficulty: 'hard',
|
|||
|
|
text: '相对论中质量与能量的关系表达式是？',
|
|||
|
|
options: ['A. E=mc²', 'B. F=ma', 'C. E=hv', 'D. P=mv'],
|
|||
|
|
answer: 'A',
|
|||
|
|
explanation: '爱因斯坦的质能方程E=mc²表明质量和能量可以相互转换。'
|
|||
|
|
},
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
// 当前难度级别，初始为中等
|
|||
|
|
let currentDifficulty = 'medium';
|
|||
|
|
// 已完成的难度
|
|||
|
|
const completedDifficulties = [];
|
|||
|
|
// 各难度得分情况
|
|||
|
|
const scores = {
|
|||
|
|
easy: { score: 0, correct: 0, incorrect: 0 },
|
|||
|
|
medium: { score: 0, correct: 0, incorrect: 0 },
|
|||
|
|
hard: { score: 0, correct: 0, incorrect: 0 }
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 学伴功能相关变量
|
|||
|
|
let mediaRecorder; let audioChunks = []; let isRecording = false;
|
|||
|
|
let audioElement = null; let isPlaying = false;
|
|||
|
|
let currentQuestion = null;
|
|||
|
|
|
|||
|
|
// DOM元素
|
|||
|
|
const questionContainer = document.getElementById('question-container');
|
|||
|
|
const submitBtn = document.getElementById('submit-btn');
|
|||
|
|
const resultSection = document.getElementById('result-section');
|
|||
|
|
const totalScoreElement = document.getElementById('total-score');
|
|||
|
|
const correctCountElement = document.getElementById('correct-count');
|
|||
|
|
const incorrectCountElement = document.getElementById('incorrect-count');
|
|||
|
|
const navigationSection = document.getElementById('navigation-section');
|
|||
|
|
const navigationMessage = document.getElementById('navigation-message');
|
|||
|
|
const nextBtn = document.getElementById('next-btn');
|
|||
|
|
const difficultyIndicator = document.querySelector('.difficulty-indicator');
|
|||
|
|
// 学伴功能DOM元素
|
|||
|
|
const recordingIndicator = document.getElementById('recordingIndicator');
|
|||
|
|
const thinkingIndicator = document.getElementById('thinkingIndicator');
|
|||
|
|
const resultContainer = document.getElementById('resultContainer');
|
|||
|
|
const asrResultText = document.getElementById('asrResultText');
|
|||
|
|
const feedbackResultText = document.getElementById('feedbackResultText');
|
|||
|
|
const playAudioBtn = document.getElementById('playAudioBtn');
|
|||
|
|
const audioProgress = document.getElementById('audioProgress');
|
|||
|
|
const progressBar = document.getElementById('progressBar');
|
|||
|
|
const audioTime = document.getElementById('audioTime');
|
|||
|
|
|
|||
|
|
// 初始化页面
|
|||
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|||
|
|
renderQuestions(currentDifficulty);
|
|||
|
|
// 绑定学伴答疑按钮事件
|
|||
|
|
document.addEventListener('click', function(e) {
|
|||
|
|
if (e.target && e.target.classList.contains('ask-xueban-btn')) {
|
|||
|
|
currentQuestion = {
|
|||
|
|
number: e.target.dataset.question,
|
|||
|
|
difficulty: e.target.dataset.difficulty
|
|||
|
|
};
|
|||
|
|
startRecording();
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 渲染指定难度的题目
|
|||
|
|
function renderQuestions(difficulty) {
|
|||
|
|
questionContainer.innerHTML = '';
|
|||
|
|
|
|||
|
|
// 筛选当前难度的题目
|
|||
|
|
const filteredQuestions = questions.filter(q => q.difficulty === difficulty);
|
|||
|
|
|
|||
|
|
// 生成题目HTML
|
|||
|
|
filteredQuestions.forEach((q, index) => {
|
|||
|
|
const questionNumber = index + 1;
|
|||
|
|
const questionElement = document.createElement('div');
|
|||
|
|
questionElement.className = 'question';
|
|||
|
|
questionElement.dataset.difficulty = q.difficulty;
|
|||
|
|
questionElement.dataset.question = questionNumber;
|
|||
|
|
|
|||
|
|
questionElement.innerHTML = `
|
|||
|
|
<div class="question-header">
|
|||
|
|
<div class="question-number">${getDifficultyName(q.difficulty)}难度 - 问题 ${questionNumber}</div>
|
|||
|
|
<div class="question-points">20分</div>
|
|||
|
|
</div>
|
|||
|
|
<p class="question-text">${q.text}</p>
|
|||
|
|
<div class="options">
|
|||
|
|
${q.options.map((option, optIndex) => {
|
|||
|
|
const optionLetter = String.fromCharCode(65 + optIndex);
|
|||
|
|
return `
|
|||
|
|
<div class="option">
|
|||
|
|
<input type="radio" name="q${q.difficulty}-${questionNumber}" id="q${q.difficulty}-${questionNumber}-${optionLetter.toLowerCase()}" value="${optionLetter}">
|
|||
|
|
<label for="q${q.difficulty}-${questionNumber}-${optionLetter.toLowerCase()}">${option}</label>
|
|||
|
|
</div>
|
|||
|
|
`;
|
|||
|
|
}).join('')}
|
|||
|
|
</div>
|
|||
|
|
<div class="explanation" id="explanation-${q.difficulty}-${questionNumber}">${q.explanation}</div>
|
|||
|
|
<button class="ask-xueban-btn hidden" data-question="${questionNumber}" data-difficulty="${q.difficulty}">学伴答疑</button>
|
|||
|
|
`;
|
|||
|
|
|
|||
|
|
questionContainer.appendChild(questionElement);
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 获取难度名称
|
|||
|
|
function getDifficultyName(difficulty) {
|
|||
|
|
const names = {
|
|||
|
|
easy: '简单',
|
|||
|
|
medium: '中等',
|
|||
|
|
hard: '高级'
|
|||
|
|
};
|
|||
|
|
return names[difficulty] || difficulty;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 提交答案
|
|||
|
|
submitBtn.addEventListener('click', () => {
|
|||
|
|
checkAnswers();
|
|||
|
|
submitBtn.disabled = true;
|
|||
|
|
submitBtn.textContent = '已提交';
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 检查答案
|
|||
|
|
function checkAnswers() {
|
|||
|
|
let correctCount = 0;
|
|||
|
|
let incorrectCount = 0;
|
|||
|
|
let totalScore = 0;
|
|||
|
|
|
|||
|
|
// 获取当前难度的题目
|
|||
|
|
const currentQuestions = questions.filter(q => q.difficulty === currentDifficulty);
|
|||
|
|
|
|||
|
|
// 检查每道题的答案
|
|||
|
|
currentQuestions.forEach((q, index) => {
|
|||
|
|
const questionNumber = index + 1;
|
|||
|
|
const selectedOption = document.querySelector(`input[name="q${q.difficulty}-${questionNumber}"]:checked`);
|
|||
|
|
const explanationElement = document.getElementById(`explanation-${q.difficulty}-${questionNumber}`);
|
|||
|
|
const optionsContainer = document.querySelector(`div[data-difficulty="${q.difficulty}"][data-question="${questionNumber}"] .options`);
|
|||
|
|
const allOptions = optionsContainer.querySelectorAll('.option');
|
|||
|
|
|
|||
|
|
// 显示解析
|
|||
|
|
explanationElement.classList.add('show');
|
|||
|
|
|
|||
|
|
if (!selectedOption) {
|
|||
|
|
// 未答题
|
|||
|
|
optionsContainer.style.border = '2px solid #f39c12';
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 标记正确或错误
|
|||
|
|
const selectedValue = selectedOption.value;
|
|||
|
|
if (selectedValue === q.answer) {
|
|||
|
|
// 正确
|
|||
|
|
selectedOption.closest('.option').classList.add('correct');
|
|||
|
|
correctCount++;
|
|||
|
|
totalScore += 20;
|
|||
|
|
} else {
|
|||
|
|
// 错误
|
|||
|
|
selectedOption.closest('.option').classList.add('incorrect');
|
|||
|
|
// 标记正确答案
|
|||
|
|
allOptions.forEach(option => {
|
|||
|
|
if (option.querySelector(`input[value="${q.answer}"]`)) {
|
|||
|
|
option.classList.add('correct');
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
incorrectCount++;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 更新当前难度得分
|
|||
|
|
scores[currentDifficulty] = {
|
|||
|
|
score: totalScore,
|
|||
|
|
correct: correctCount,
|
|||
|
|
incorrect: incorrectCount
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 添加到已完成难度
|
|||
|
|
if (!completedDifficulties.includes(currentDifficulty)) {
|
|||
|
|
completedDifficulties.push(currentDifficulty);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 显示结果
|
|||
|
|
showResults();
|
|||
|
|
|
|||
|
|
// 显示下一步建议
|
|||
|
|
showNextRecommendation();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 显示结果
|
|||
|
|
function showResults() {
|
|||
|
|
resultSection.style.display = 'block';
|
|||
|
|
|
|||
|
|
// 计算总得分
|
|||
|
|
let totalScore = 0;
|
|||
|
|
let totalCorrect = 0;
|
|||
|
|
let totalIncorrect = 0;
|
|||
|
|
|
|||
|
|
completedDifficulties.forEach(difficulty => {
|
|||
|
|
totalScore += scores[difficulty].score;
|
|||
|
|
totalCorrect += scores[difficulty].correct;
|
|||
|
|
totalIncorrect += scores[difficulty].incorrect;
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 更新结果显示
|
|||
|
|
totalScoreElement.textContent = totalScore;
|
|||
|
|
correctCountElement.textContent = totalCorrect;
|
|||
|
|
incorrectCountElement.textContent = totalIncorrect;
|
|||
|
|
|
|||
|
|
// 滚动到结果区域
|
|||
|
|
resultSection.scrollIntoView({ behavior: 'smooth' });
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 显示下一步建议
|
|||
|
|
function showNextRecommendation() {
|
|||
|
|
navigationSection.style.display = 'block';
|
|||
|
|
const currentScore = scores[currentDifficulty];
|
|||
|
|
|
|||
|
|
if (currentDifficulty === 'medium') {
|
|||
|
|
if (currentScore.correct >= 3) {
|
|||
|
|
navigationMessage.textContent = `恭喜！您在${getDifficultyName(currentDifficulty)}难度中答对了${currentScore.correct}题，表现优秀，建议挑战高级难度。`;
|
|||
|
|
nextBtn.onclick = () => switchDifficulty('hard');
|
|||
|
|
} else {
|
|||
|
|
navigationMessage.textContent = `您在${getDifficultyName(currentDifficulty)}难度中答对了${currentScore.correct}题，建议先尝试简单难度巩固基础。`;
|
|||
|
|
nextBtn.onclick = () => switchDifficulty('easy');
|
|||
|
|
}
|
|||
|
|
} else if (currentDifficulty === 'easy') {
|
|||
|
|
navigationMessage.textContent = `您已完成${getDifficultyName(currentDifficulty)}难度，建议继续挑战中等难度。`;
|
|||
|
|
nextBtn.onclick = () => switchDifficulty('medium');
|
|||
|
|
} else if (currentDifficulty === 'hard') {
|
|||
|
|
navigationMessage.textContent = `恭喜您完成了所有难度级别！您的总分为${scores.easy.score + scores.medium.score + scores.hard.score}分。`;
|
|||
|
|
nextBtn.style.display = 'none';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
navigationSection.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 切换难度
|
|||
|
|
function switchDifficulty(nextDifficulty) {
|
|||
|
|
currentDifficulty = nextDifficulty;
|
|||
|
|
difficultyIndicator.textContent = `当前难度：${getDifficultyName(nextDifficulty)}`;
|
|||
|
|
difficultyIndicator.className = `difficulty-indicator difficulty-${nextDifficulty}`;
|
|||
|
|
|
|||
|
|
// 重置按钮状态
|
|||
|
|
submitBtn.disabled = false;
|
|||
|
|
submitBtn.textContent = '提交答案';
|
|||
|
|
|
|||
|
|
// 隐藏结果和导航区域
|
|||
|
|
resultSection.style.display = 'none';
|
|||
|
|
navigationSection.style.display = 'none';
|
|||
|
|
|
|||
|
|
// 渲染新难度题目
|
|||
|
|
renderQuestions(nextDifficulty);
|
|||
|
|
|
|||
|
|
// 滚动到页面顶部
|
|||
|
|
window.scrollTo({ top: 0, behavior: 'smooth' });
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 学伴功能 - 开始录音
|
|||
|
|
function startRecording() {
|
|||
|
|
if (isRecording) return;
|
|||
|
|
|
|||
|
|
navigator.mediaDevices.getUserMedia({ audio: true })
|
|||
|
|
.then(stream => {
|
|||
|
|
mediaRecorder = new MediaRecorder(stream);
|
|||
|
|
audioChunks = [];
|
|||
|
|
|
|||
|
|
mediaRecorder.ondataavailable = event => {
|
|||
|
|
if (event.data.size > 0) audioChunks.push(event.data);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
mediaRecorder.onstop = () => {
|
|||
|
|
const audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
|
|||
|
|
uploadAudioToServer(audioBlob);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
mediaRecorder.start();
|
|||
|
|
isRecording = true;
|
|||
|
|
recordingIndicator.style.display = 'flex';
|
|||
|
|
|
|||
|
|
// 设置最长录音时间为60秒
|
|||
|
|
setTimeout(stopRecording, 60000);
|
|||
|
|
})
|
|||
|
|
.catch(error => {
|
|||
|
|
console.error("获取麦克风权限失败:", error);
|
|||
|
|
alert("请授权麦克风权限以使用录音功能");
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 学伴功能 - 停止录音
|
|||
|
|
function stopRecording() {
|
|||
|
|
if (!isRecording || !mediaRecorder) return;
|
|||
|
|
|
|||
|
|
mediaRecorder.stop();
|
|||
|
|
isRecording = false;
|
|||
|
|
recordingIndicator.style.display = 'none';
|
|||
|
|
|
|||
|
|
if (mediaRecorder.stream) {
|
|||
|
|
mediaRecorder.stream.getTracks().forEach(track => track.stop());
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 学伴功能 - 上传音频到服务器
|
|||
|
|
function uploadAudioToServer(audioBlob) {
|
|||
|
|
thinkingIndicator.style.display = 'flex';
|
|||
|
|
resultContainer.style.display = 'none';
|
|||
|
|
|
|||
|
|
const formData = new FormData();
|
|||
|
|
formData.append('file', audioBlob, 'recording.wav');
|
|||
|
|
if (currentQuestion) {
|
|||
|
|
formData.append('question_number', currentQuestion.number);
|
|||
|
|
formData.append('difficulty', currentQuestion.difficulty);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
fetch('/api/xueban/upload-audio', { method: 'POST', body: formData })
|
|||
|
|
.then(response => response.json())
|
|||
|
|
.then(data => {
|
|||
|
|
thinkingIndicator.style.display = 'none';
|
|||
|
|
if (data.success) {
|
|||
|
|
asrResultText.textContent = data.asr_text || '未识别到内容';
|
|||
|
|
feedbackResultText.textContent = data.feedback_text || '无反馈内容';
|
|||
|
|
resultContainer.style.display = 'flex';
|
|||
|
|
|
|||
|
|
if (data.audio_url) {
|
|||
|
|
audioElement = new Audio(data.audio_url);
|
|||
|
|
audioElement.onloadedmetadata = function() { updateAudioTimeDisplay(); };
|
|||
|
|
audioElement.ontimeupdate = function() { updateAudioProgress(); updateAudioTimeDisplay(); };
|
|||
|
|
audioElement.onended = function() { isPlaying = false; updatePlayButton(); };
|
|||
|
|
playAudioBtn.onclick = togglePlayAudio;
|
|||
|
|
audioProgress.onclick = function(e) {
|
|||
|
|
const rect = audioProgress.getBoundingClientRect();
|
|||
|
|
const clickPosition = (e.clientX - rect.left) / rect.width;
|
|||
|
|
audioElement.currentTime = clickPosition * audioElement.duration;
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
alert('音频处理失败: ' + data.message);
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
.catch(error => {
|
|||
|
|
thinkingIndicator.style.display = 'none';
|
|||
|
|
alert('上传音频失败: ' + error.message);
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 学伴功能 - 切换音频播放/暂停
|
|||
|
|
function togglePlayAudio() {
|
|||
|
|
if (!audioElement) return;
|
|||
|
|
isPlaying ? audioElement.pause() : audioElement.play();
|
|||
|
|
isPlaying = !isPlaying;
|
|||
|
|
updatePlayButton();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 学伴功能 - 更新播放按钮状态
|
|||
|
|
function updatePlayButton() {
|
|||
|
|
playAudioBtn.innerHTML = isPlaying ?
|
|||
|
|
`<svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M6 19H10V5H6V19ZM14 19H18V5H14V19Z" fill="white"/></svg>` :
|
|||
|
|
`<svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M8 5V19L19 12L8 5Z" fill="white"/></svg>`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 学伴功能 - 更新音频进度条
|
|||
|
|
function updateAudioProgress() {
|
|||
|
|
if (audioElement && audioElement.duration) {
|
|||
|
|
progressBar.style.width = `${(audioElement.currentTime / audioElement.duration) * 100}%`;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 学伴功能 - 更新音频时间显示
|
|||
|
|
function updateAudioTimeDisplay() {
|
|||
|
|
if (audioElement && audioElement.duration) {
|
|||
|
|
const currentTime = formatTime(audioElement.currentTime);
|
|||
|
|
const duration = formatTime(audioElement.duration);
|
|||
|
|
audioTime.textContent = `${currentTime} / ${duration}`;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 学伴功能 - 格式化时间为 MM:SS
|
|||
|
|
function formatTime(seconds) {
|
|||
|
|
const mins = Math.floor(seconds / 60);
|
|||
|
|
const secs = Math.floor(seconds % 60);
|
|||
|
|
return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
|
|||
|
|
}
|