การใช้งาน web speech api แปลงเสียง เป็นข้อความ ใน html5
เขียนเมื่อ 8 ปีก่อน โดย Ninenik Narkdeespeech แปลงเสียง html5
คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ speech แปลงเสียง html5
ไปที่
Copy
เท่าที่ลองใช้ น่าจะ support บางบราวเซอร์ ในที่นี้ทดสอบกับ chrome
ก่อนอื่นเมื่อมีการเรียกใช้งาน จะมีการขอนุญาตการใช้งาน microphone
ให้ allow หรือ กดตกลง ไม่เช่นนั้น การทดสอบก็จะไม่เห็นผล
ดูคู่มือการกำหนดค่าต่างๆ ใน web speech api ด้วยต้นเอง ได้ที่
หน้าตัวอย่างที่เอามาอ้างอิงดัดแปลง และอธิบาย
ภาษาที่รองรับ วิธีใช้ ให้ใช้ค่าในวงเว็ลปีกกาสี่เหลี่ยมแรก ในรูปแบบ xx-xx
เลือกตามใจชอบ
จะลองภาษาจีน ก็ใช้ cmn-Hans-CN
จะลองภาษาเกาหลี ก็ใช้ ko-KR
จะลองภาษาญี่ปุ่น ก็ใช้ ja-JP
แต่ในตัวอย่างจะใช้ภาษาไทย ใช้ th-TH
หรืออื่นๆ
ไฟล์ script.js แยกมาต่างหาก จะได้ดูโค้ดง่ายขึ้น
['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>
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 สำหรับอ้างอิง
Top
Copy
ขอบคุณทุกการสนับสนุน
![]()