Update index.html

index.html

@@ -41,6 +41,7 @@
             color: #fff;
             font-size: 14px;
             cursor: pointer;
+            max-width: 200px;
         }
         button {
             padding: 12px 20px;
@@ -64,6 +65,7 @@
             padding: 10px 16px;
             border-radius: 8px;
             border: 1px solid #334155;
+            flex-wrap: wrap;
         }
         .btn-audio {
             background: #8b5cf6;
@@ -75,17 +77,20 @@
             font-weight: bold;
         }
         .btn-audio:hover { background: #7c3aed; }
-        .speed-control {
+        
+        .voice-control {
             display: flex;
             align-items: center;
             gap: 8px;
             font-size: 13px;
             color: #cbd5e1;
             margin-left: auto;
+            flex: 1;
+            justify-content: flex-end;
         }
-        .speed-control input[type="range"] {
-            width: 100px;
-            cursor: pointer;
+        .voice-control select {
+            max-width: 280px;
+            width: 100%;
         }
 
         .btn-group {
@@ -131,7 +136,7 @@
     
     <div class="input-group">
         <input type="text" id="youtubeUrl" placeholder="วางลิงก์ YouTube ที่นี่ (เช่น https://www.youtube.com/watch?v=...)">
-        <select id="langSelect">
+        <select id="langSelect" onchange="populateVoiceList()">
             <option value="th">ภาษาไทย</option>
             <option value="en">English</option>
         </select>
@@ -145,10 +150,9 @@
     <!-- แถบควบคุม Read Aloud ด้านล่างกล่องข้อความ -->
     <div id="audioControls" class="audio-controls">
         <button id="btnPlayStop" class="btn-audio" onclick="togglePlayStop()">Play</button>
-        <div class="speed-control">
-            <label for="speedRange">ความเร็ว:</label>
-            <input type="range" id="speedRange" min="0.5" max="2" step="0.1" value="1" oninput="updateSpeedLabel(this.value)">
-            <span id="speedVal">1.0x</span>
+        <div class="voice-control">
+            <label for="voiceSelect">เสียง/สำเนียง:</label>
+            <select id="voiceSelect"></select>
         </div>
     </div>
 
@@ -171,6 +175,45 @@
         let textChunks = [];
         let currentChunkIndex = 0;
         let isPlaying = false;
+        let availableVoices = [];
+
+        // ดึงรายชื่อเสียงพูดทั้งหมดจากเบราว์เซอร์
+        function populateVoiceList() {
+            if (!synth) return;
+            availableVoices = synth.getVoices();
+            const voiceSelect = document.getElementById('voiceSelect');
+            const selectedLang = document.getElementById('langSelect').value;
+            
+            voiceSelect.innerHTML = '';
+
+            // กรองเสียงที่รองรับภาษาไทยหรืออังกฤษตาม Dropdown
+            const filteredVoices = availableVoices.filter(v => v.lang.startsWith(selectedLang === 'en' ? 'en' : 'th'));
+
+            if (filteredVoices.length === 0) {
+                // ถ้าไม่พบเสียงที่ตรงภาษา ให้ใช้เสียงทั้งหมดสำรองไว้
+                availableVoices.forEach((voice) => {
+                    const option = document.createElement('option');
+                    option.textContent = `${voice.name} (${voice.lang})`;
+                    option.setAttribute('data-name', voice.name);
+                    voiceSelect.appendChild(option);
+                });
+            } else {
+                filteredVoices.forEach((voice) => {
+                    const option = document.createElement('option');
+                    option.textContent = `${voice.name} (${voice.lang})`;
+                    option.setAttribute('data-name', voice.name);
+                    voiceSelect.appendChild(option);
+                });
+            }
+        }
+
+        // โหลด Voice list ล่วงหน้า
+        if (typeof speechSynthesis !== 'undefined') {
+            populateVoiceList();
+            if (speechSynthesis.onvoiceschanged !== undefined) {
+                speechSynthesis.onvoiceschanged = populateVoiceList;
+            }
+        }
 
         // ฟังก์ชันดึง Video ID จากลิงก์ YouTube
         function extractVideoId(url) {
@@ -294,7 +337,8 @@ ${cleanedText}`;
                 statusDiv.innerText = '✅ ดึงและเรียบเรียงข้อมูลสำเร็จ! เลือกดาวน์โหลดไฟล์หรือฟังเสียงอ่านได้ด้านล่าง';
                 statusDiv.style.color = '#10b981';
                 
-                // แสดงปุ่มดาวน์โหลดและส่วนควบคุมเสียง
+                // อัปเดตรายการเสี���งให้ตรงกับภาษาแล้วแสดงปุ่มดาวน์โหลด/เสียงอ่าน
+                populateVoiceList();
                 dlTxtBtn.style.display = 'block';
                 dlDocxBtn.style.display = 'block';
                 audioControls.style.display = 'flex';
@@ -305,10 +349,6 @@ ${cleanedText}`;
         }
 
         // --- ระบบควบคุม Read Aloud (Play / Stop / Replay) ---
-        function updateSpeedLabel(val) {
-            document.getElementById('speedVal').innerText = parseFloat(val).toFixed(1) + 'x';
-        }
-
         function resetAudioState(btnText = 'Replay') {
             if (synth) synth.cancel();
             isPlaying = false;
@@ -352,16 +392,17 @@ ${cleanedText}`;
 
             const selectedLang = document.getElementById('langSelect').value;
             const targetLang = selectedLang === 'en' ? 'en-US' : 'th-TH';
-            const speed = parseFloat(document.getElementById('speedRange').value);
+            const voiceSelect = document.getElementById('voiceSelect');
 
             const utterance = new SpeechSynthesisUtterance(textChunks[currentChunkIndex]);
             utterance.lang = targetLang;
-            utterance.rate = speed;
 
-            // เลือก Voice
-            const voices = synth.getVoices();
-            const preferredVoice = voices.find(v => v.lang.startsWith(targetLang.slice(0, 2)));
-            if (preferredVoice) utterance.voice = preferredVoice;
+            // เลือกเสียงตามที่ผู้ใช้เลือกใน Dropdown
+            const selectedOption = voiceSelect.selectedOptions[0]?.getAttribute('data-name');
+            if (selectedOption) {
+                const selectedVoice = availableVoices.find(v => v.name === selectedOption);
+                if (selectedVoice) utterance.voice = selectedVoice;
+            }
 
             utterance.onend = () => {
                 if (isPlaying) {
@@ -381,11 +422,6 @@ ${cleanedText}`;
             synth.speak(utterance);
         }
 
-        // โหลดรายการ Voice ของเบราว์เซอร์เตรียมพร้อมไว้
-        if (typeof speechSynthesis !== 'undefined' && speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = () => synth.getVoices();
-        }
-
         // ฟังก์ชันสำหรับดาวน์โหลดไฟล์ .TXT
         function downloadTXT() {
             if (!currentTranscriptText) return;