เขียนเว็บ ให้มี กดฟัง สำหรับคนไม่อยากอ่านตัวหนังสือ

junjao · Last Edit: กุมภาพันธ์ 22, 2025, 07:30:20 PM by junjao

ด้านล่างนี้คือตัวอย่างโค้ด HTML, CSS และ JavaScript ที่สร้างหน้าเว็บง่าย ๆ มีปุ่ม "กดฟัง" เพื่อให้ระบบอ่านข้อความในหน้าเว็บออกเสียงสำหรับคนที่ไม่อยากอ่านตัวหนังสือ โดยใช้ Web Speech API ซึ่งเป็นเทคโนโลยีในเบราว์เซอร์สมัยใหม่ (เช่น Chrome, Edge) รองรับการอ่านข้อความเป็นภาษาไทยได้ด้วย

---

### โค้ดตัวอย่าง

```html
<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>หน้าเว็บที่มีปุ่มกดฟัง</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 800px;
margin: 20px auto;
padding: 20px;
line-height: 1.6;
}
h1 {
color: #333;
}
button {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}
button:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<h1>ข้อมูลการศึกษาในประเทศไทย</h1>
<button onclick="readText()">กดฟัง</button>
<p id="content">
จำนวนคนที่รับการศึกษาในประเทศไทยสามารถแบ่งตามระดับการศึกษาได้ดังนี้ การศึกษาขั้นพื้นฐาน
ได้แก่ ก่อนประถมศึกษา ประถมศึกษา และมัธยมศึกษา รวมถึงการศึกษาระดับอุดมศึกษา และอาชีวศึกษา
ข้อมูลคร่าว ๆ คาดว่ามีเด็กในระดับก่อนประถมศึกษาประมาณ 2 ถึง 3 ล้านคน
ประถมศึกษาประมาณ 5 ถึง 6 ล้านคน มัธยมศึกษาตอนต้นประมาณ 2 ถึง 3 ล้านคน
มัธยมศึกษาตอนปลายประมาณ 1.5 ถึง 2 ล้านคน อาชีวศึกษาประมาณ 6 ถึง 7 แสนคน
และอุดมศึกษาประมาณ 1.5 ถึง 2 ล้านคน รวมทั้งหมดประมาณ 13 ถึง 15 ล้านคนในระบบการศึกษาไทย
</p>

<script>
function readText() {
// หยุดการอ่านก่อนหน้า (ถ้ามี)
window.speechSynthesis.cancel();

// ดึงข้อความจาก <p id="content">
const text = document.getElementById("content").innerText;

// สร้าง SpeechSynthesisUtterance
const speech = new SpeechSynthesisUtterance(text);

// ตั้งค่าภาษาเป็นภาษาไทย
speech.lang = 'th-TH';

// ตั้งค่าความเร็ว (1 = ปกติ, 0.5 = ช้า, 2 = เร็ว)
speech.rate = 1;

// ตั้งระดับเสียง (0 ถึง 1)
speech.volume = 1;

// ตั้งความสูงของเสียง (0 ถึง 2)
speech.pitch = 1;

// อ่านข้อความ
window.speechSynthesis.speak(speech);
}
</script>
</body>
</html>
```

---

### คำอธิบายโค้ด
1. **HTML**:
- มีหัวข้อ `<h1>` และย่อหน้า `<p>` ที่มีข้อความเกี่ยวกับการศึกษาในไทย (ย่อจากคำตอบก่อนหน้า)
- ปุ่ม `<button>` ที่เมื่อกดจะเรียกฟังก์ชัน `readText()`

2. **CSS**:
- จัดแต่งหน้าเว็บให้ดูเรียบง่าย อ่านง่าย
- ปุ่มสีเขียวมีเอฟเฟกต์ hover เพื่อให้ดูสวยงาม

3. **JavaScript**:
- ใช้ `SpeechSynthesisUtterance` จาก Web Speech API เพื่ออ่านข้อความ
- ตั้งค่า `lang` เป็น `th-TH` เพื่อให้อ่านเป็นภาษาไทย
- ปรับความเร็ว (`rate`), ระดับเสียง (`volume`), และความสูงของเสียง (`pitch`) ได้ตามต้องการ
- `speechSynthesis.cancel()` ช่วยหยุดการอ่านก่อนหน้า เพื่อไม่ให้เสียงทับกัน

---

### วิธีใช้งาน
1. คัดลอกโค้ดนี้ไปบันทึกเป็นไฟล์ `.html` (เช่น `education.html`)
2. เปิดไฟล์ในเบราว์เซอร์ที่รองรับ Web Speech API (เช่น Google Chrome)
3. กดปุ่ม "กดฟัง" เพื่อให้ระบบอ่านข้อความออกเสียง

---

### ข้อจำกัด
- การอ่านภาษาไทยอาจไม่สมบูรณ์ 100% ขึ้นอยู่กับเบราว์เซอร์และระบบปฏิบัติการ (บางคำอาจออกเสียงแปลก ๆ เพราะยังไม่รองรับสำเนียงไทยเต็มที่)
- ต้องเชื่อมต่ออินเทอร์เน็ตในบางกรณีเพื่อดึงข้อมูลเสียงจากเซิร์ฟเวอร์ของเบราว์เซอร์
- หากต้องการเพิ่มเนื้อหา แค่แก้ไขข้อความใน `<p id="content">`
---------------------------------------

หาก `speech.lang = 'th-TH'` ไม่ทำให้อ่านเป็นภาษาไทย อาจเกิดจากปัญหาต่อไปนี้ และนี่คือวิธีแก้ไข:

### สาเหตุที่อาจเกิดขึ้น
1. **เบราว์เซอร์ไม่รองรับภาษาไทยเต็มที่**:
- Web Speech API ขึ้นอยู่กับการสนับสนุนของเบราว์เซอร์และระบบปฏิบัติการ บางเบราว์เซอร์ (เช่น Chrome, Firefox) หรือระบบ (เช่น Windows, macOS) อาจไม่มี "voice" ภาษาไทยติดตั้งมาให้
2. **ไม่มี голос (voice) ภาษาไทยในระบบ**:
- ถ้าไม่มีเสียงภาษาไทยในระบบปฏิบัติการ เบราว์เซอร์จะ fallback ไปใช้ภาษาอื่น (เช่น อังกฤษ)
3. **ข้อจำกัดของ API**:
- Web Speech API อาจอ่านภาษาไทยได้ไม่สมบูรณ์ เพราะการออกเสียงยังไม่แม่นยำเท่า native TTS (Text-to-Speech) อื่น ๆ

---

### วิธีแก้ไข
#### 1. **ตรวจสอบและติดตั้ง Voice ภาษาไทยในระบบปฏิบัติการ**
- **Windows**:
1. ไปที่ `Settings > Time & Language > Language`
2. เพิ่มภาษาไทย (`Thai`) ถ้ายังไม่มี
3. คลิกที่ "Thai" > `Options` > ดาวน์โหลด "Speech" (หากมีให้เลือก)
- **macOS**:
1. ไปที่ `System Settings > Accessibility > Spoken Content`
2. เลือก "System Voice" และดูว่ามีภาษาไทยหรือไม่ (อาจต้องดาวน์โหลดเพิ่ม)
- **Linux**:
- อาจต้องติดตั้งแพ็กเกจ TTS เช่น `festival` หรือ `espeak` และตั้งค่าเพิ่มเติม

หลังจากติดตั้งแล้ว ลองรีสตาร์ทเบราว์เซอร์และทดสอบโค้ดใหม่

#### 2. **ตรวจสอบ Voice ที่มีอยู่ในเบราว์เซอร์**
- เพิ่มโค้ดเพื่อดูว่าเบราว์เซอร์รองรับภาษาอะไรบ้าง:

```javascript
// เพิ่มใน <script> เพื่อดูรายการ voice
function listVoices() {
const voices = window.speechSynthesis.getVoices();
voices.forEach(voice => {
console.log(voice.name, voice.lang);
});
}

// เรียกฟังก์ชันนี้เมื่อโหลดหน้าเว็บ
window.speechSynthesis.onvoiceschanged = listVoices;
listVoices();
```

- เปิด Console ในเบราว์เซอร์ (กด F12 > Console) แล้วดูว่ามี `th-TH` หรือไม่
- ถ้ามี ให้แก้โค้ดใน `readText()` เพื่อเลือก voice ภาษาไทยโดยตรง:

```javascript
function readText() {
window.speechSynthesis.cancel();
const text = document.getElementById("content").innerText;
const speech = new SpeechSynthesisUtterance(text);

// เลือก voice ภาษาไทย (ถ้ามี)
const voices = window.speechSynthesis.getVoices();
const thaiVoice = voices.find(voice => voice.lang === 'th-TH');
if (thaiVoice) {
speech.voice = thaiVoice;
} else {
console.log("ไม่พบ voice ภาษาไทยในระบบ");
}

speech.rate = 1;
speech.volume = 1;
speech.pitch = 1;

window.speechSynthesis.speak(speech);
}
```

#### 3. **ใช้ fallback ถ้าไม่มีภาษาไทย**
- หากระบบไม่มี voice ภาษาไทย สามารถแจ้งเตือนผู้ใช้ได้:

```javascript
function readText() {
window.speechSynthesis.cancel();
const text = document.getElementById("content").innerText;
const speech = new SpeechSynthesisUtterance(text);

const voices = window.speechSynthesis.getVoices();
const thaiVoice = voices.find(voice => voice.lang === 'th-TH');
if (thaiVoice) {
speech.voice = thaiVoice;
} else {
alert("ขออภัย ระบบของคุณไม่รองรับการอ่านภาษาไทย โปรดติดตั้ง voice ภาษาไทยในระบบปฏิบัติการ");
return;
}

speech.rate = 1;
speech.volume = 1;
speech.pitch = 1;

window.speechSynthesis.speak(speech);
}
```

#### 4. **ทดสอบในเบราว์เซอร์อื่น**
- ลองใช้ Google Chrome หรือ Microsoft Edge ซึ่งมักจะมี TTS ภาษาไทยในตัว (ถ้าระบบปฏิบัติการติดตั้งไว้)
- Firefox อาจรองรับน้อยกว่าในบางกรณี

#### 5. **ทางเลือก: ใช้ Third-Party TTS API**
ถ้า Web Speech API ไม่ทำงานตามต้องการ สามารถเปลี่ยนไปใช้บริการ TTS อื่น เช่น:
- **Google Cloud Text-to-Speech**: รองรับภาษาไทยดีมาก แต่ต้องเสียเงินและเชื่อมต่อ API
- **ResponsiveVoice**: ไลบรารี TTS ที่ใช้งานง่าย รองรับภาษาไทย (มีทั้งฟรีและเสียเงิน)

ตัวอย่างการใช้ ResponsiveVoice (ต้องเชื่อมต่ออินเทอร์เน็ต):

```html
<script src="https://code.responsivevoice.org/responsivevoice.js?key=YOUR_API_KEY"></script>
<script>
function readText() {
const text = document.getElementById("content").innerText;
responsiveVoice.speak(text, "Thai Female", {rate: 1});
}
</script>
```
- ต้องสมัคร API Key ที่ [ResponsiveVoice](https://responsivevoice.org/) ถ้าต้องการใช้เต็มรูปแบบ

---

### โค้ดแก้ไขเต็ม (กรณีใช้ Web Speech API)
```html
<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>หน้าเว็บที่มีปุ่มกดฟัง</title>
<style>
body { font-family: Arial, sans-serif; max-width: 800px; margin: 20px auto; padding: 20px; line-height: 1.6; }
h1 { color: #333; }
button { background-color: #4CAF50; color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; font-size: 16px; }
button:hover { background-color: #45a049; }
</style>
</head>
<body>
<h1>ข้อมูลการศึกษาในประเทศไทย</h1>
<button onclick="readText()">กดฟัง</button>
<p id="content">
จำนวนคนที่รับการศึกษาในประเทศไทยสามารถแบ่งตามระดับการศึกษาได้ดังนี้ การศึกษาขั้นพื้นฐาน
ได้แก่ ก่อนประถมศึกษา ประถมศึกษา และมัธยมศึกษา รวมถึงการศึกษาระดับอุดมศึกษา และอาชีวศึกษา
รวมทั้งหมดประมาณ 13 ถึง 15 ล้านคนในระบบการศึกษาไทย
</p>

<script>
// โหลด voice ล่วงหน้า
window.speechSynthesis.onvoiceschanged = function() {
const voices = window.speechSynthesis.getVoices();
console.log("Voices ที่รองรับ:", voices);
};

function readText() {
window.speechSynthesis.cancel();
const text = document.getElementById("content").innerText;
const speech = new SpeechSynthesisUtterance(text);

const voices = window.speechSynthesis.getVoices();
const thaiVoice = voices.find(voice => voice.lang === 'th-TH');
if (thaiVoice) {
speech.voice = thaiVoice;
} else {
alert("ขออภัย ไม่พบ voice ภาษาไทยในระบบ กรุณาติดตั้งในระบบปฏิบัติการ");
return;
}

speech.rate = 1;
speech.volume = 1;
speech.pitch = 1;

window.speechSynthesis.speak(speech);
}
</script>
</body>
</html>
```

---

### ขั้นตอนทดสอบ
1. บันทึกโค้ดนี้เป็นไฟล์ `.html`
2. เปิดใน Chrome หรือ Edge
3. ตรวจสอบ Console เพื่อดู voice ที่ระบบมี
4. ถ้ายังไม่อ่านเป็นไทย ให้ติดตั้ง voice ตามขั้นตอนด้านบน

junjao · Last Edit: กุมภาพันธ์ 22, 2025, 07:30:20 PM by junjao

JunJao.Com ตอบคำถาม คอมพิวเตอร์ อินเตอร์เน็ต การเขียนโปรแกรม Forex MT4 MT5

ข่าว:

เขียนเว็บ ให้มี กดฟัง สำหรับคนไม่อยากอ่านตัวหนังสือ

junjao

junjao