86 lines
3.3 KiB
HTML
86 lines
3.3 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Test Player</title>
|
|
<style>
|
|
body { font-family: Arial; padding: 20px; }
|
|
.avatar { width: 100px; height: 100px; border: 3px solid gray; border-radius: 50%; display: inline-block; margin: 20px; text-align: center; line-height: 100px; }
|
|
.avatar.active { border-color: gold; background: yellow; }
|
|
.subtitle { padding: 10px; margin: 5px; background: #f0f0f0; }
|
|
.subtitle.active { background: yellow; }
|
|
.s1 { border-left: 5px solid blue; }
|
|
.s2 { border-left: 5px solid green; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Test Player</h1>
|
|
|
|
<div>
|
|
<div class="avatar s1" id="avatar-s1">S1</div>
|
|
<div class="avatar s2" id="avatar-s2">S2</div>
|
|
</div>
|
|
|
|
<audio id="audio" controls>
|
|
<source src="chapter8_english_demo.wav" type="audio/wav">
|
|
</audio>
|
|
|
|
<div id="subtitle-container"></div>
|
|
|
|
<div id="debug" style="margin-top: 20px; padding: 10px; background: #eee;"></div>
|
|
|
|
<script>
|
|
// 测试字幕数据
|
|
const testSubtitles = [
|
|
{ start: 0, end: 3, speaker: 's1', text: 'First subtitle from S1' },
|
|
{ start: 3, end: 6, speaker: 's2', text: 'Second subtitle from S2' },
|
|
{ start: 6, end: 9, speaker: 's1', text: 'Third subtitle from S1' }
|
|
];
|
|
|
|
const audio = document.getElementById('audio');
|
|
const container = document.getElementById('subtitle-container');
|
|
const debug = document.getElementById('debug');
|
|
let currentIndex = -1;
|
|
|
|
// 渲染字幕
|
|
testSubtitles.forEach((sub, index) => {
|
|
const div = document.createElement('div');
|
|
div.className = `subtitle ${sub.speaker}`;
|
|
div.textContent = `[${sub.speaker}] ${sub.text}`;
|
|
div.dataset.index = index;
|
|
container.appendChild(div);
|
|
});
|
|
|
|
// 更新时间
|
|
audio.addEventListener('timeupdate', () => {
|
|
const time = audio.currentTime;
|
|
const newIndex = testSubtitles.findIndex(sub => time >= sub.start && time < sub.end);
|
|
|
|
if (newIndex !== currentIndex) {
|
|
currentIndex = newIndex;
|
|
|
|
// 清除之前的高亮
|
|
document.querySelectorAll('.subtitle').forEach(s => s.classList.remove('active'));
|
|
document.querySelectorAll('.avatar').forEach(a => a.classList.remove('active'));
|
|
|
|
if (newIndex >= 0) {
|
|
// 高亮新的字幕和头像
|
|
const subtitleEl = document.querySelector(`[data-index="${newIndex}"]`);
|
|
if (subtitleEl) subtitleEl.classList.add('active');
|
|
|
|
const speaker = testSubtitles[newIndex].speaker;
|
|
const avatarEl = document.getElementById(`avatar-${speaker}`);
|
|
if (avatarEl) avatarEl.classList.add('active');
|
|
|
|
debug.innerHTML = `Time: ${time.toFixed(2)}s, Index: ${newIndex}, Speaker: ${speaker}`;
|
|
} else {
|
|
debug.innerHTML = `Time: ${time.toFixed(2)}s, No subtitle`;
|
|
}
|
|
}
|
|
});
|
|
|
|
debug.innerHTML = 'Ready. Press play to test.';
|
|
</script>
|
|
</body>
|
|
</html>
|