การใช้ฟังก์ชันพิมพ์ข้อความด้วยเสียง (Speech-to-Text / Voice Typing)

bysemicon -
0

 


การใช้ฟังก์ชันพิมพ์ข้อความด้วยเสียง (Speech-to-Text / Voice Typing)

ในยุคดิจิทัลปัจจุบัน เทคโนโลยีการรู้จำเสียง (Speech Recognition) ได้ก้าวหน้าอย่างมาก และถูกนำมาใช้ในงานต่าง ๆ เช่น การพิมพ์ข้อความ การสั่งงานด้วยเสียง ตลอดจนการช่วยเหลือผู้ที่ไม่สะดวกพิมพ์บนคีย์บอร์ด ฟังก์ชัน พิมพ์ข้อความด้วยเสียง (Speech-to-Text) คือเทคโนโลยีที่ช่วย "แปลงเสียงพูดให้เป็นข้อความ" แบบอัตโนมัติและรวดเร็ว ทำให้ผู้ใช้สามารถพิมพ์งานได้โดยไม่ต้องแตะคีย์บอร์ดเลย

บทความนี้จะพาไปทำความเข้าใจความสามารถของฟังก์ชันนี้ พร้อมตัวอย่างวิธีใช้งานจริงบนเว็บไซต์และ Google Apps Script Web App

⭐ Speech-to-Text คืออะไร?

Speech-to-Text (STT) หรือ Voice Typing คือเทคโนโลยีที่แปลง "เสียงพูด" ของมนุษย์ให้เป็น "ข้อความ" ด้วยการประมวลผลเสียงและจับคำแบบเรียลไทม์ โดยอาศัย Machine Learning และ Artificial Intelligence (AI) ในการวิเคราะห์คำศัพท์ น้ำเสียง และความคมชัดของเสียง

ตัวอย่างการใช้งาน:

  • พิมพ์งานเอกสารด้วยการพูด
  • บันทึกข้อความบนมือถือ
  • พิมพ์แชทหรือข้อความในแอปพลิเคชัน
  • ใช้ในระบบ Chatbot
  • ใช้ใน Web App เช่น Google Apps Script

⭐ ข้อดีของการพิมพ์ด้วยเสียง

✔ 1. รวดเร็วกว่าใช้คีย์บอร์ด

ผู้ใช้สามารถพูดได้เร็วกว่าการพิมพ์ 3–5 เท่า ทำให้ทำงานเสร็จเร็วขึ้นมาก

✔ 2. ลดความผิดพลาดจากการพิมพ์

ลดการกดผิด กดตกหล่น หรือพิมพ์ตัวอักษรผิด

✔ 3. ใช้งานง่าย

เพียงคลิกปุ่มไมโครโฟนแล้วพูด ระบบก็พิมพ์ให้ทันที

✔ 4. ช่วยเหลือผู้ที่พิมพ์ไม่ถนัด

เหมาะสำหรับผู้สูงอายุ ผู้พิการ หรือผู้ที่ไม่สะดวกพิมพ์

✔ 5. รองรับหลายภาษา

รวมถึงภาษาไทย ซึ่งมีความแม่นยำสูงมาก

⭐ การพิมพ์ด้วยเสียงบนเว็บไซต์ (Web Speech API)

ในฝั่งเว็บไซต์ การรับเสียงสามารถใช้งานผ่าน Web Speech API ซึ่งรองรับโดย Chrome และ Edge โดยไม่ต้องติดตั้งปลั๊กอินใด ๆ

ตัวอย่างฟังก์ชันใช้งานจริง:

if (!("webkitSpeechRecognition" in window)) {
    alert("เบราว์เซอร์ของคุณไม่รองรับการพิมพ์ด้วยเสียง");
} else {
    const recognition = new webkitSpeechRecognition();
    recognition.lang = "th-TH"; // รองรับภาษาไทย
    recognition.continuous = true;
    recognition.interimResults = true;

    recognition.onresult = (event) => {
        let text = "";
        for (let i = 0; i < event.results.length; i++) {
            text += event.results[i][0].transcript + " ";
        }
        document.getElementById("myTextarea").value = text;
    };

    recognition.start();
}


สิ่งที่โค้ดทำ:

  • เปิดไมโครโฟนของผู้ใช้
  • ฟังเสียงแบบต่อเนื่อง
  • ถอดเสียงเป็นข้อความแบบเรียลไทม์

⭐ ตัวอย่าง UI ที่ใช้งานง่ายที่สุด

<button id="btnRecord">🎤 เริ่มพูด</button>
<textarea id="myTextarea" rows="5"></textarea>


เมื่อคลิกปุ่ม ระบบจะเริ่มฟังเสียงและพิมพ์ข้อความให้อัตโนมัติ

⭐ การใช้งานบน Google Apps Script Web App

Google Apps Script สามารถนำ Speech-to-Text มาประกอบในหน้าเว็บได้โดยแทรกโค้ด JavaScript (Web Speech API) ไว้ในไฟล์ index.html

ไฟล์ Code.gs:

function doGet() {
  return HtmlService.createHtmlOutputFromFile("index");
}


ไฟล์ index.html สามารถใส่ปุ่มและ textarea ข้างต้นได้เลย

ข้อดี:

  • ใช้ได้บนหน้าเว็บทุกอุปกรณ์
  • สร้างระบบพิมพ์ด้วยเสียงในแบบฟอร์มออนไลน์ได้
  • นำข้อมูลที่พิมพ์ด้วยเสียงไปบันทึกใน Google Sheets ได้

⭐ ข้อควรระวังในการใช้งาน

  1. ต้องใช้บน Chrome / Edge
    Safari บางเวอร์ชันไม่รองรับ Web Speech API
  2. ต้องให้สิทธิ์ไมโครโฟน
    หากปฏิเสธ จะไม่สามารถพิมพ์ด้วยเสียงได้
  3. ต้องมีอินเทอร์เน็ต
    การประมวลผลส่วนใหญ่ทำบน Cloud
  4. เสียงรบกวนมีผลต่อความแม่นยำ
    พูดในที่เงียบจะได้ข้อความที่ถูกต้องกว่า

⭐ บทสรุป

การพิมพ์ข้อความด้วยเสียง (Speech-to-Text) คือเทคโนโลยีที่ช่วยเพิ่มความสะดวก รวดเร็ว และประสิทธิภาพในการทำงาน โดยเฉพาะงานเอกสาร การตอบข้อความ หรือแบบฟอร์มต่าง ๆ การนำฟังก์ชันนี้ไปใช้ร่วมกับเว็บไซต์หรือ Google Apps Script ช่วยให้งานของผู้ใช้ทันสมัยและใช้งานได้ง่ายขึ้นอย่างมาก

ด้วย Web Speech API เราสามารถสร้างระบบพิมพ์ด้วยเสียงที่เรียบง่าย สะดวก และรองรับภาษาไทยได้อย่างถูกต้องและแม่นยำ เหมาะสำหรับทุกระบบที่ต้องการเพิ่มความสะดวกให้ผู้ใช้งาน


⭐ ไฟล์พร้อมใช้งาน

Code.gs (Backend — Google Apps Script)


     
function doGet() {
  return HtmlService.createHtmlOutputFromFile("index")
    .setTitle("Voice Typing System")
    .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}




index.html (Frontend — มีปุ่มพิมพ์ด้วยเสียง + textarea)

     
<!DOCTYPE html>
<html lang="th">
<head>
  <meta charset="UTF-8" />
  <title>Voice Typing</title>

  <!-- Bootstrap 5.3 CDN -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css" rel="stylesheet">

  <style>
    body { background:#f5f7fa; padding:20px; font-family: "Prompt", sans-serif; }
    textarea { font-size:1.1rem; }
    .recording { animation: pulse 1s infinite; }
    @keyframes pulse {
      0% { box-shadow:0 0 0 0 rgba(255,0,0,0.4); }
      70% { box-shadow:0 0 0 15px rgba(255,0,0,0); }
      100% { box-shadow:0 0 0 0 rgba(255,0,0,0); }
    }
  </style>
</head>

<body>

  <div class="container">
    <h3 class="mb-3">🎤 ระบบพิมพ์ข้อความด้วยเสียง (Speech to Text)</h3>

    <button id="btnRecord" class="btn btn-primary">
      <i class="bi bi-mic"></i> เริ่มพูด
    </button>

    <textarea id="txtDetail" rows="8" class="form-control mt-3"
      placeholder="พูดเพื่อพิมพ์ข้อความ หรือพิมพ์เองก็ได้…">
    </textarea>
  </div>

  <script>
    let recognition;
    let isRecording = false;

    if (!("webkitSpeechRecognition" in window)) {
      alert("เบราว์เซอร์ไม่รองรับ Speech-to-Text");
    } else {
      recognition = new webkitSpeechRecognition();
      recognition.lang = "th-TH";
      recognition.continuous = true;
      recognition.interimResults = true;
    }

    const btn = document.getElementById("btnRecord");
    const txt = document.getElementById("txtDetail");

    btn.addEventListener("click", () => {
      if (!isRecording) {
        recognition.start();
        isRecording = true;
        btn.innerHTML = '<i class="bi bi-stop-circle"></i> หยุดพูด';
        btn.classList.replace("btn-primary", "btn-danger");
        txt.classList.add("recording");
      } else {
        recognition.stop();
        isRecording = false;
        btn.innerHTML = '<i class="bi bi-mic"></i> เริ่มพูด';
        btn.classList.replace("btn-danger", "btn-primary");
        txt.classList.remove("recording");
      }
    });

    recognition.onresult = (event) => {
      let finalText = "";
      let interimText = "";

      for (let i = 0; i < event.results.length; i++) {
        const r = event.results[i];
        if (r.isFinal) finalText += r[0].transcript + " ";
        else interimText += r[0].transcript;
      }

      txt.value = finalText + interimText;
    };

    recognition.onerror = (e) => {
      console.error("Speech error:", e);
      alert("เกิดข้อผิดพลาดในการรับเสียง: " + e.error);
    };
  </script>

</body>
</html>
Tags:
แสดงความคิดเห็น (0)
ใหม่กว่า เก่ากว่า