Initial commit for TTS project

2026-01-19 10:27:41 +08:00
commit a9abd3913d
160 changed files with 11031 additions and 0 deletions
--- a/podcast_audios/project_chapter8_demo/config/test_player.html
+++ b/podcast_audios/project_chapter8_demo/config/test_player.html
@@ -0,0 +1,85 @@
+<!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>