<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>《将进酒》朗读评测系统</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Microsoft YaHei', 'STKaiti', serif;
}
body {
background: linear-gradient(135deg, #1a2a6c, #b21f1f, #1a2a6c);
color: #fff;
min-height: 100vh;
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
}
.container {
max-width: 1000px;
width: 100%;
background: rgba(0, 0, 20, 0.8);
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
padding: 30px;
margin-top: 20px;
position: relative;
overflow: hidden;
}
.header {
text-align: center;
margin-bottom: 30px;
position: relative;
z-index: 2;
}
.header h1 {
font-size: 2.8rem;
text-shadow: 0 0 10px rgba(255, 215, 0, 0.7);
margin-bottom: 10px;
letter-spacing: 3px;
background: linear-gradient(to right, #FFD700, #FFA500, #FF8C00);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: bold;
}
.header p {
font-size: 1.2rem;
opacity: 0.9;
max-width: 700px;
margin: 0 auto;
line-height: 1.6;
}
.poem-container {
display: flex;
gap: 40px;
margin-bottom: 30px;
position: relative;
z-index: 2;
}
.poem-section {
flex: 1;
background: rgba(30, 30, 60, 0.7);
border-radius: 15px;
padding: 25px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
}
.section-title {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 2px solid #FFD700;
font-size: 1.5rem;
color: #FFD700;
}
.poem-content {
font-size: 1.4rem;
line-height: 2.3;
text-align: center;
padding: 10px;
}
.rhythm-line {
position: relative;
margin-bottom: 15px;
}
.rhythm-marker {
position: absolute;
bottom: -15px;
color: #4CAF50;
font-weight: bold;
font-size: 1rem;
transform: translateX(-50%);
}
.rhythm-highlight {
color: #FFD700;
font-weight: bold;
text-shadow: 0 0 5px rgba(255, 215, 0, 0.7);
position: relative;
}
.rhythm-highlight::after {
content: '';
position: absolute;
bottom: -3px;
left: 0;
width: 100%;
height: 3px;
background: #FF5722;
border-radius: 2px;
}
.recorder-section {
background: rgba(40, 40, 80, 0.8);
border-radius: 15px;
padding: 25px;
text-align: center;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
margin-top: 20px;
}
.controls {
display: flex;
justify-content: center;
gap: 20px;
margin: 25px 0;
}
.btn {
padding: 14px 30px;
font-size: 1.2rem;
border: none;
border-radius: 50px;
cursor: pointer;
display: flex;
align-items: center;
gap: 10px;
transition: all 0.3s ease;
font-weight: bold;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}
.btn-record {
background: linear-gradient(to right, #e53935, #e35d5b);
color: white;
}
.btn-stop {
background: linear-gradient(to right, #1E88E5, #64B5F6);
color: white;
}
.btn:hover {
transform: translateY(-3px);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
}
.btn:active {
transform: translateY(1px);
}
.btn:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none;
}
.visualizer {
width: 100%;
height: 120px;
background: rgba(10, 10, 30, 0.7);
border-radius: 10px;
margin: 25px 0;
display: flex;
align-items: flex-end;
justify-content: center;
padding: 10px;
gap: 2px;
}
.bar {
width: 6px;
background: linear-gradient(to top, #1E88E5, #64B5F6);
border-radius: 3px 3px 0 0;
transition: height 0.2s ease;
}
.results {
display: none;
background: rgba(30, 50, 50, 0.7);
border-radius: 15px;
padding: 25px;
margin-top: 25px;
text-align: center;
}
.score-display {
font-size: 5rem;
font-weight: bold;
color: #FFD700;
text-shadow: 0 0 15px rgba(255, 215, 0, 0.7);
margin: 20px 0;
}
.feedback {
font-size: 1.3rem;
line-height: 1.6;
max-width: 700px;
margin: 0 auto;
}
.tip-box {
background: rgba(255, 215, 0, 0.15);
border-left: 4px solid #FFD700;
padding: 15px;
border-radius: 0 8px 8px 0;
margin: 25px 0;
text-align: left;
}
.tip-box h3 {
color: #FFD700;
margin-bottom: 10px;
display: flex;
align-items: center;
gap: 10px;
}
.decoration {
position: absolute;
opacity: 0.1;
z-index: 1;
}
.decoration-1 {
top: 20px;
right: 20px;
font-size: 8rem;
transform: rotate(15deg);
}
.decoration-2 {
bottom: 20px;
left: 30px;
font-size: 6rem;
transform: rotate(-10deg);
}
.decoration-3 {
top: 40%;
left: 10%;
font-size: 5rem;
transform: rotate(5deg);
}
.timer {
font-size: 1.5rem;
font-weight: bold;
color: #FFD700;
margin-top: 15px;
}
@media (max-width: 768px) {
.poem-container {
flex-direction: column;
}
.header h1 {
font-size: 2.2rem;
}
.poem-content {
font-size: 1.2rem;
}
}
</style>
</head>
<body>
<div class="container">
<div class="decoration decoration-1">诗</div>
<div class="decoration decoration-2">酒</div>
<div class="decoration decoration-3">唐</div>
<div class="header">
<h1><i class="fas fa-book-open"></i> 《将进酒》朗读评测系统</h1>
<p>感受李白诗中的豪迈气概，掌握古诗朗读的节奏技巧。系统将分析您的朗读节奏并提供评分反馈。</p>
</div>
<div class="poem-container">
<div class="poem-section">
<div class="section-title">
<i class="fas fa-music"></i>
<h2>原诗展示（带节奏标记）</h2>
</div>
<div class="poem-content">
<div class="rhythm-line">
君不见<span class="rhythm-highlight">黄河</span>之水<span class="rhythm-highlight">天</span>上来，
<div class="rhythm-marker" style="left: 25%;">↑扬</div>
<div class="rhythm-marker" style="left: 60%;">↓抑</div>
</div>
<div class="rhythm-line">
奔流到海<span class="rhythm-highlight">不复回</span>。
<div class="rhythm-marker" style="left: 70%;">重音</div>
</div>
<div class="rhythm-line">
君不见<span class="rhythm-highlight">高堂</span>明镜<span class="rhythm-highlight">悲</span>白发，
<div class="rhythm-marker" style="left: 25%;">↑扬</div>
<div class="rhythm-marker" style="left: 65%;">↓抑</div>
</div>
<div class="rhythm-line">
朝如<span class="rhythm-highlight">青丝</span>暮成<span class="rhythm-highlight">雪</span>。
<div class="rhythm-marker" style="left: 40%;">重音</div>
<div class="rhythm-marker" style="left: 85%;">重音</div>
</div>
<div class="rhythm-line">
人生<span class="rhythm-highlight">得意</span>须尽欢，
<div class="rhythm-marker" style="left: 35%;">↑扬</div>
</div>
<div class="rhythm-line">
莫使金樽<span class="rhythm-highlight">空对月</span>。
<div class="rhythm-marker" style="left: 75%;">↓抑</div>
</div>
<div class="rhythm-line">
<span class="rhythm-highlight">天生我材</span>必有用，
<div class="rhythm-marker" style="left: 45%;">重音</div>
</div>
<div class="rhythm-line">
千金散尽<span class="rhythm-highlight">还复来</span>。
<div class="rhythm-marker" style="left: 75%;">↓抑</div>
</div>
</div>
</div>
<div class="poem-section">
<div class="section-title">
<i class="fas fa-lightbulb"></i>
<h2>朗读技巧提示</h2>
</div>
<div class="tip-box">
<h3><i class="fas fa-volume-up"></i> 节奏技巧</h3>
<p>• 四三节奏：君不见|黄河之水|天上来（2+2+3）</p>
<p>• 句中停顿：高堂明镜↗悲白发（"悲"字前稍顿）</p>
<p>• 句尾拖音：不复回~~（"回"字拖长音）</p>
</div>
<div class="tip-box">
<h3><i class="fas fa-star"></i> 重音处理</h3>
<p>• 关键词重读：<strong>天</strong>上来、<strong>悲</strong>白发</p>
<p>• 比喻词强调：朝如<strong>青丝</strong>暮成<strong>雪</strong></p>
<p>• 名句加强：<strong>天生我材</strong>必有用</p>
</div>
<div class="tip-box">
<h3><i class="fas fa-heart"></i> 情感表达</h3>
<p>• 开头感叹：君不见！（高昂）</p>
<p>• 人生感慨：朝如青丝暮成雪（沉郁）</p>
<p>• 豪迈宣言：千金散尽还复来（激昂）</p>
</div>
</div>
</div>
<div class="recorder-section">
<div class="section-title">
<i class="fas fa-microphone-alt"></i>
<h2>朗读评测区</h2>
</div>
<div class="controls">
<button id="recordBtn" class="btn btn-record">
<i class="fas fa-microphone"></i> 开始朗读
</button>
<button id="stopBtn" class="btn btn-stop" disabled>
<i class="fas fa-stop"></i> 停止评测
</button>
</div>
<div class="timer">
<i class="fas fa-clock"></i> 朗读时间: <span id="timer">00:00</span>
</div>
<div class="visualizer" id="visualizer">
<!-- 音频可视化条将通过JS动态生成 -->
</div>
<p id="recordingStatus">准备朗读，请点击上方按钮开始</p>
</div>
<div class="results" id="results">
<div class="section-title">
<i class="fas fa-chart-bar"></i>
<h2>评测结果</h2>
</div>
<div class="score-display">
86<span style="font-size: 2rem;">分</span>
</div>
<div class="feedback">
<p><i class="fas fa-check-circle" style="color: #4CAF50;"></i> 您的朗读情感充沛，很好地表现了李白诗中的豪迈气概！</p>
<p><i class="fas fa-check-circle" style="color: #4CAF50;"></i> "天生我材必有用"等名句处理出色，重音准确</p>
<p><i class="fas fa-exclamation-triangle" style="color: #FFD700;"></i> 部分句尾拖音不够充分，如"不复回"的"回"字</p>
<p><i class="fas fa-exclamation-triangle" style="color: #FFD700;"></i> "朝如青丝暮成雪"中的对比可更强烈</p>
<p><i class="fas fa-lightbulb" style="color: #1E88E5;"></i> 建议：尝试在"君不见"处提高音量，增强开篇气势</p>
</div>
</div>
</div>
<script>
// 获取DOM元素
const recordBtn = document.getElementById('recordBtn');
const stopBtn = document.getElementById('stopBtn');
const timerDisplay = document.getElementById('timer');
const recordingStatus = document.getElementById('recordingStatus');
const visualizer = document.getElementById('visualizer');
const results = document.getElementById('results');
// 创建音频可视化条
for (let i = 0; i < 64; i++) {
const bar = document.createElement('div');
bar.className = 'bar';
bar.style.height = `${Math.random() * 30 + 5}px`;
visualizer.appendChild(bar);
}
const bars = document.querySelectorAll('.bar');
// 更新可视化效果
function updateVisualization() {
bars.forEach(bar => {
const newHeight = Math.random() * 80 + 10;
bar.style.height = `${newHeight}px`;
});
}
// 计时器变量
let timerInterval;
let seconds = 0;
// 开始计时
function startTimer() {
seconds = 0;
updateTimerDisplay();
timerInterval = setInterval(() => {
seconds++;
updateTimerDisplay();
updateVisualization();
}, 1000);
}
// 停止计时
function stopTimer() {
clearInterval(timerInterval);
}
// 更新时间显示
function updateTimerDisplay() {
const mins = Math.floor(seconds / 60).toString().padStart(2, '0');
const secs = (seconds % 60).toString().padStart(2, '0');
timerDisplay.textContent = `${mins}:${secs}`;
}
// 模拟录音开始
recordBtn.addEventListener('click', () => {
recordBtn.disabled = true;
stopBtn.disabled = false;
recordingStatus.textContent = "朗读中...请大声朗诵诗文";
recordingStatus.style.color = "#FFD700";
startTimer();
results.style.display = 'none';
// 模拟音频可视化动画
const animationInterval = setInterval(updateVisualization, 100);
// 停止录音时清除动画
stopBtn.addEventListener('click', () => {
clearInterval(animationInterval);
}, { once: true });
});
// 模拟录音停止
stopBtn.addEventListener('click', () => {
recordBtn.disabled = false;
stopBtn.disabled = true;
recordingStatus.textContent = "录音完成，正在分析...";
recordingStatus.style.color = "#64B5F6";
stopTimer();
// 模拟分析过程
setTimeout(() => {
recordingStatus.textContent = "分析完成！请查看评测结果";
results.style.display = 'block';
// 滚动到结果区域
results.scrollIntoView({ behavior: 'smooth' });
}, 2500);
});
// 初始可视化效果
setInterval(updateVisualization, 200);
</script>
</body>
</html>
index.html
index.html