การใช้งาน web speech api แปลงเสียง เป็นข้อความ ใน html5

30 September 2014 เขียนเมื่อ 8 ปีก่อน โดย Ninenik Narkdee

speech แปลงเสียง html5

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ speech แปลงเสียง html5

เท่าที่ลองใช้ น่าจะ support บางบราวเซอร์ ในที่นี้ทดสอบกับ chrome

ก่อนอื่นเมื่อมีการเรียกใช้งาน จะมีการขอนุญาตการใช้งาน microphone

ให้ allow หรือ กดตกลง ไม่เช่นนั้น การทดสอบก็จะไม่เห็นผล

ดูคู่มือการกำหนดค่าต่างๆ ใน web speech api ด้วยต้นเอง ได้ที่

https://dvcs.w3.org/hg/speech-api/raw-file/tip/speechapi.html

หน้าตัวอย่างที่เอามาอ้างอิงดัดแปลง และอธิบาย

https://html5-examples.herokuapp.com/web_speech_recognition.html

ภาษาที่รองรับ วิธีใช้ ให้ใช้ค่าในวงเว็ลปีกกาสี่เหลี่ยมแรก ในรูปแบบ xx-xx

เลือกตามใจชอบ

จะลองภาษาจีน ก็ใช้ cmn-Hans-CN

จะลองภาษาเกาหลี ก็ใช้ ko-KR

จะลองภาษาญี่ปุ่น ก็ใช้ ja-JP

แต่ในตัวอย่างจะใช้ภาษาไทย ใช้ th-TH

หรืออื่นๆ

['Afrikaans',       ['af-ZA']],
 ['Bahasa Indonesia',['id-ID']],
 ['Bahasa Melayu',   ['ms-MY']],
 ['Català',          ['ca-ES']],
 ['Čeština',         ['cs-CZ']],
 ['Deutsch',         ['de-DE']],
 ['English',         ['en-AU', 'Australia'],
                     ['en-CA', 'Canada'],
                     ['en-IN', 'India'],
                     ['en-NZ', 'New Zealand'],
                     ['en-ZA', 'South Africa'],
                     ['en-GB', 'United Kingdom'],
                     ['en-US', 'United States']],
 ['Español',     ['es-AR', 'Argentina'],
                     ['es-BO', 'Bolivia'],
                     ['es-CL', 'Chile'],
                     ['es-CO', 'Colombia'],
                     ['es-CR', 'Costa Rica'],
                     ['es-EC', 'Ecuador'],
                     ['es-SV', 'El Salvador'],
                     ['es-ES', 'España'],
                     ['es-US', 'Estados Unidos'],
                     ['es-GT', 'Guatemala'],
                     ['es-HN', 'Honduras'],
                     ['es-MX', 'México'],
                     ['es-NI', 'Nicaragua'],
                     ['es-PA', 'Panamá'],
                     ['es-PY', 'Paraguay'],
                     ['es-PE', 'Perú'],
                     ['es-PR', 'Puerto Rico'],
                     ['es-DO', 'República Dominicana'],
                     ['es-UY', 'Uruguay'],
                     ['es-VE', 'Venezuela']],
 ['Euskara',         ['eu-ES']],
 ['Français',        ['fr-FR']],
 ['Galego',          ['gl-ES']],
 ['Hrvatski',        ['hr_HR']],
 ['IsiZulu',         ['zu-ZA']],
 ['Íslenska',        ['is-IS']],
 ['Italiano',        ['it-IT', 'Italia'],
                     ['it-CH', 'Svizzera']],
 ['Magyar',          ['hu-HU']],
 ['Nederlands',      ['nl-NL']],
 ['Norsk bokmål',    ['nb-NO']],
 ['Polski',          ['pl-PL']],
 ['Português',       ['pt-BR', 'Brasil'],
                     ['pt-PT', 'Portugal']],
 ['Română',          ['ro-RO']],
 ['Slovenčina',      ['sk-SK']],
 ['Suomi',           ['fi-FI']],
 ['Svenska',         ['sv-SE']],
 ['Türkçe',          ['tr-TR']],
 ['български',       ['bg-BG']],
 ['Pусский',         ['ru-RU']],
 ['Српски',          ['sr-RS']],
 ['เกาหลี',            ['ko-KR']],
 ['จีน',             ['cmn-Hans-CN', 'จีนกลาง (จีนแผ่นดินใหญ่)'],
                     ['cmn-Hans-HK', 'จีนกลาง (ฮ่องกง)'],
                     ['cmn-Hant-TW', 'จีน (ไต้หวัน)'],
                     ['yue-Hant-HK', 'กวางตุ้ง (ฮ่องกง)']],
 ['ญี่ปุ่น',           ['ja-JP']],
 ['Lingua latīna',   ['la']],
  ['ภาษาไทย',             ['th-TH']]];

ตัวอย่าง ทดสอบโดยกดที่ปุ่ม แล้ว allow การใช้งาน microphone

แล้วพูด ภาษาไทย อะไรก็ได้ ลองดู

โค้ดทั้งหมดสำหรับทดสอบ speech.html คำอธิบายแสดงในโค้ด

<!doctype html>
<html lang=''>
<head>
   <meta charset='utf-8'>
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>HTML</title>
</head>
<body>

<div style="margin:auto;width:80%;">

<br>
<!-- textarea สำหรับใช้แสดง ข้อความที่แปลงจากเสียงพูด-->
<textarea id="transcript" name="transcript" cols="50" rows="3"></textarea>
<br><br>
<!--div นี้ เราจะใช้แสดง คำแนะนำ การใช้งาน หรือสถานะ-->
<div id="instructions"></div>
<br>
<!--   ปุ่มนี้ เราใช้สำหรับควบคุมการทำงาน การจดจำเสียงพูดและแปลงเป็นข้อความ-->
<button id="start_button">Click to Start</button>
    
    
</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>  
<script type="text/javascript" src="script.js"></script>  
</body>
</html>

ไฟล์ script.js แยกมาต่างหาก จะได้ดูโค้ดง่ายขึ้น

var final_transcript = '';  // ตัวแปร สำหรับเก็บข้อความที่แปลงจากเสียง
var recognizing = false;  // กำหนดค่าเริ่มต้นการจดจำเสียง เริ่มต้น ให้เป็น false ไม่ทำงาน
var language = 'th-TH';  // กำหนดภาษา th-TH,
$(function(){

        // ตรวจสอบ browser ว่าสนับสนุนการใช้งาน Speech API หรือไม่
        if (!('webkitSpeechRecognition' in window)) {
            alert("Your Browser does not support the Speech API");
        }else{

            // สร้าง recognition object และกำหนด event handlers
            // (onstart , onerror, onend, onresult)

            var recognition = new webkitSpeechRecognition(); // สร้าง recognition object 
            recognition.continuous = true;         // กำหนด true ให้รับค่า จากเสียงไปเรื่อยๆ จนกว่าจะกดปุ่มหยุด
            recognition.interimResults = true;     // แสดงข้อความช่วงจังหวะหรือไม่ กรณีพูดยาวๆ
            recognition.lang = language;           // กำหนดภาษา จากตัวแปรด้านบน

            recognition.onstart = function() {
                // เมื่อเกิดการเริ่มทำงานของการจดจำเสียง มาจากคำสั่ง recognition.start();
                recognizing = true;  // เปลี่ยนค่าให้เริ่มทำการจดสับเสียงเป็น true เริ่มทำงาน
                $('#instructions').html('Speak slowly and clearly'); // แสดงคำแนะนำ 
                $('#start_button').html('Click to Stop'); // เมื่อกดแล้วเปลี่ยนข้อความปุ่มเป็น คลิกอีกทีเพื่อหยุด หรือ Stop
            };

            recognition.onerror = function(event) {
                // ถ้าเกิดข้อผิดพลาด ทำงานส่วนนี้
                $('#instructions').html("There was a recognition error..."); // แจ้งสถานะถ้าเกิดข้อผิดพลาด
            };

            recognition.onend = function() {
                // ถ้าจบการทำงาน เช่นหยุดด้วยคำสั่ง recognition.stop();
                // หรือไม่ได้พูดเพื่อใช้งาน การจดจำเสียงนาน ก็จะหยุดการทำงานเอง
                recognizing = false;  // กำหนดให้การจดจำเสียงอยูในสถานะหยุดการทำงาน
                $('#instructions').html('Done'); // แสดงสถานะว่าเสร็จสิ้นแล้ว Done
                $('#start_button').html('Click to Start'); // เปลี่ยนข้อความปุ่มกดให้เป็นค่าเริ่มต้น
            };

            recognition.onresult = function(event) {
                // เมื่อแปลงเสียงเป็นข้อความสำเร็จ ส่งผลลัธ์กลับมา
                // ตัวแปรไว้เก็บข้อความในช่วงจังหวะหนึ่งจังหวะใดบางช่วง กรณีพูดยาวๆ
                var interim_transcript = ''; // ปกติค่านี้ไม่ค่อยได้ใช้ จะใช้ค่า final มากกว่า
                
                // ถอดจากข้อความจาก array ผลลัพธ์
                for (var i = event.resultIndex; i < event.results.length; ++i) {
                    // ถ้าเป็นค่าสุดท้ายแล้ว หยุดพูด หรือไม่ได้พูดต่อ
                    if (event.results[i].isFinal) {
                        // เอาข้อความผลัพธ์ที่ได้ มาต่อๆ กันและกับในตัวแปร final_transcript
                        final_transcript += event.results[i][0].transcript+' ';
                    } else { 
                        // ถ้าเป็นค่าข้อความระหว่างช่วงเวลา ในกรณีพูดยาวๆ เก็บในตัวแปร 
                        // เก็บในตัวแปร  interim_transcript
                        interim_transcript += event.results[i][0].transcript+' '; 
                    }
                }

                // บรรทัดที่ เอาไว้ทดสอบดูค่า ใน console  ไม่ได้ใช้ปิดไป
//                console.log("interim:  " + interim_transcript); 
//                console.log("final:    " + final_transcript);

                if(final_transcript.length > 0) { // นับความยาวข้อความ ถ้ามากกว่า 0 แสดงว่ามีค่า
                    // ตัวแปร final_transcript คือค่าข้อความที่ได้ เอาไปใช้งานต่อได้
                    $('#transcript').val(final_transcript); // แสดงค่าใน textarea 
                }
            };


            // ภ้ากดปุ่ม id start_button
            $("#start_button").click(function(e) {
                e.preventDefault();
                
                // การจดจำเสียงกำลังทำงานอยู่หรือไม่ กดครั้งแรก จะยังไม่ทำงาน
                if (recognizing) { // ภ้าทำงานอยู่ เมื่อกดก็จะเป็นหยุด
                    recognition.stop();  // ให้หยุดการจัดจำเสียง
                    $('#start_button').html('Click to Start Again'); // เปลี่ยนข้อความปุ่ม แนะนำกดใหม่ ถ้าต้องการจดจำเสียงอีกครั้ง
                    recognizing = false;  // เปลี่ยนสถานะว่าหยุดทำงาน
                } else { // ถ้ากดแล้วสถานะการจดจำเสียงหยุดอยู่ ให้ทำงาน
                    final_transcript = ''; // กำหนดตัวแปรเก็บข้อความเป็นค่าว่างก่อน

                    // ขออนุญาตใช้งานการจดจำเสียงและเริ่มใช้งาน
                    recognition.start();
                    
                    // แจ้งคำแนะนำว่าให้ กด allow หรือตกลง เพื่ออนุญาตให้ใช้งาน Microphone
                    $('#instructions').html('Allow the browser to use your Microphone');
                    $('#start_button').html('waiting'); // เปลี่ยนข้อความปุ่ม ว่ารอ waiting
                    $('#transcript').val(''); // แสดงข้อความเป็นค่าว่าง 
                }
            });
        }
});

เราสามารถนำไปประยุกต์ใช้งาน เช่นการรับคำสั่งด้วยเสียง ได้

หรืออื่นๆ แล้วแต่ใครจะคิดออก

กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ

เนื้อหาพิเศษ เฉพาะสำหรับสมาชิก

กรุณาล็อกอิน เพื่ออ่านเนื้อหาบทความ

ยังไม่เป็นสมาชิก

สมาชิกล็อกอิน

( หรือ เข้าใช้งานผ่าน Social Login )

URL สำหรับอ้างอิง

ขอบคุณทุกการสนับสนุน

สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet

20 บาท 50 บาท 100 บาท 300 บาท หรือ ระบุจำนวน