เท่าที่ลองใช้ น่าจะ support บางบราวเซอร์ ในที่นี้ทดสอบกับ chrome
ก่อนอื่นเมื่อมีการเรียกใช้งาน จะมีการขอนุญาตการใช้งาน microphone
ให้ allow หรือ กดตกลง ไม่เช่นนั้น การทดสอบก็จะไม่เห็นผล
ดูคู่มือการกำหนดค่าต่างๆ ใน web speech api ด้วยต้นเอง ได้ที่
หน้าตัวอย่างที่เอามาอ้างอิงดัดแปลง และอธิบาย
ภาษาที่รองรับ วิธีใช้ ให้ใช้ค่าในวงเว็ลปีกกาสี่เหลี่ยมแรก ในรูปแบบ xx-xx
เลือกตามใจชอบ
จะลองภาษาจีน ก็ใช้ cmn-Hans-CN
จะลองภาษาเกาหลี ก็ใช้ ko-KR
จะลองภาษาญี่ปุ่น ก็ใช้ ja-JP
แต่ในตัวอย่างจะใช้ภาษาไทย ใช้ th-TH
หรืออื่นๆ
ไฟล์ script.js แยกมาต่างหาก จะได้ดูโค้ดง่ายขึ้น
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 | ['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 คำอธิบายแสดงในโค้ด
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <!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> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 | 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(''); // แสดงข้อความเป็นค่าว่าง } }); }}); |
เราสามารถนำไปประยุกต์ใช้งาน เช่นการรับคำสั่งด้วยเสียง ได้
หรืออื่นๆ แล้วแต่ใครจะคิดออก
