เท่าที่ลองใช้ น่าจะ 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(''); // แสดงข้อความเป็นค่าว่าง
}
});
}
});
เราสามารถนำไปประยุกต์ใช้งาน เช่นการรับคำสั่งด้วยเสียง ได้
หรืออื่นๆ แล้วแต่ใครจะคิดออก
