สร้าง Conversation App ง่ายๆด้วย Web Speech API

หลายๆคนอาจเคยเห็น application ต่างๆที่สามารถคุยโต้ตอบกับเราได้ วันนี้เราจะมาลองสร้างแอพสำหรับการทำ Conversation ง่ายๆ ผ่าน Web Speech API กันครับ

Web Speech API คืออะไร?

เป็น API ที่ติดมากับ browser ที่เราใช้งานกันอยู่แล้วครับ โดยคุณสมบัติเด่นๆของมันคือ

1. Speech Recognition คือ เราสามารถแปลงคำพูดไปเป็นข้อความตัวอักษรได้
2. Speech Synthesis คือ เราสามารถแปลงข้อความตัวอักษรไปเป็นเสียงคนพูดได้

ซึ่งคุณสมบัติข้างต้น เราก็สามารถปรับแต่งการทำงานของมัน ให้มีลักษณะตามที่เราต้องการได้เช่นกัน

เรามาดูกันดีกว่า ว่าเราจะเริ่มใช้งานมันได้อย่างไร

เริ่มต้น… ใครใช้ได้บ้าง?

เราจะสามารถใช้งาน Web Speech API ได้ก็ต่อเมื่อ browser ที่เราใช้งานสามารถรองรับการทำงานของ api นี้ได้ เพราะแต่ละ browser อาจไม่ support ครบ 100% ครับ แต่จากเว็บ developer.mozillar.org เค้าเขียนไว้ว่ายังอยู่ในช่วงทดลองกันอยู่เลย (แต่มันออกมาตั้งแต่ปี 2012 แล้วนะ)

ถ้าดูจาก browser ที่ support ก็เหมือนว่า Speech Synthesis จะ support แทบทุก browser อยู่แล้ว… ยกเว้น browser ที่คุณก็รู้ว่าใคร…ตามภาพด้านล่างเลย

ส่วน Speech Recognition ยังค่อนข้าง support บ้าง แต่ไม่ 100% ครับ จึงแนะนำว่าถ้าจะใช้ feature นี้ ควรใช้บน chrome browser นะ

หรือ หากใครอยากลองทดสอบว่า browser ที่เราใช้งานอยู่ตอนนี้มัน support หรือป่าวนะ ก็ลองรัน code ด้านล่างได้เลยครับ

Test Web Speech API Compatibility via codepen

แต่ถ้าเราต้องการตรวจสอบผ่าน code … เราสามารถตรวจสอบได้ง่ายๆ ด้วยคำสั่งดังนี้

if ("SpeechRecognition" in window || "webkitSpeechRecognition" in window) {
  // รองรับการใช้งาน Speech Recognition
}
if ("SpeechSynthesisUtterance" in window) {
  // รองรับการใช้งาน Speech Synthesis
}

1. Speech Recognition

เริ่มกันที่การทำ Speech Recognition… เราสามารถเรียกใช้ได้ผ่านทาง SpeechRecognition Interface โดยจะทำการแปลเสียงที่เราพูดผ่าน microphone และแปลงออกมาเป็น string ให้เราครับ… สามารถเรียกใช้ด้วยคำสั่งง่ายๆดังนี้

var SpeechRecognition = SpeechRecognition || webkitSpeechRecognition
var recognition = new SpeechRecognition()
recognition.lang = 'en-US'
recognition.interimResults = false
recognition.maxAlternatives = 1
recognition.onspeechend = function() {
  recognition.stop(); // เมื่อพูดจบ ให้ปิดการบันทึกเสียง
}
recognition.start() // เริ่มบันทึกเสียง

เมื่อเราสั่ง start() ในครั้งแรกนั้น browser จะขอ permission สำหรับ domain นั้นจาก user ก่อนนะครับ ถึงจะสามารถใช้งาน microphone ได้ แต่หากเข้ามาอีกครั้งก็จะไม่มีการถาม permission อีกแล้วครับ

การขอ permission บน web browser

โดย option แต่ละอย่างของ object recognition ได้แก่

• lang คือ ภาษาที่เราจะพูดครับ หากใส่เป็น ‘th-TH’ คือเราจะพูดเป็นภาษาไทยนะ
• interimResults คือ เมื่อ set เป็น false จะกำหนดให้แสดงผลลัพธ์เมื่อเราพูดจบแล้วเท่านั้น, หากเรา set เป็น true… เมื่อเรากำลังพูดอยู่ API ก็จะส่งข้อความที่มันวิเคราะห์ได้ ณ ขณะนั้นเป็น result แม้เรายังพูดไม่จบประโยค ดูเหมาะกับแอพที่ต้องการแสดงข้อความที่กำลังวิเคราะห์ให้ผู้ใช้เห็นนะ
• maxAlternatives คือ จำนวนประโยคที่เราต้องการให้ SpeechRecognition แสดงผลลัพธ์ออกมาครับ เพราะบางที API พยายามแปลงคำพูดของเราออกมาเป็นข้อความ แต่ไม่มั่นใจว่าประโยคที่เราพูดคือคำอะไร มันเลยพยายามเอาคำอื่นๆที่น่าจะเป็นคำที่เราพูดมาให้เราดูแทนครับ

โดย “ผลลัพธ์” ที่ได้จะส่งมาเป็น List object ของ interface SpeechRecognitionResult ซึ่งจะประกอบด้วย Array ของ interface SpeechRecognitionAlternative โดยเขียนเป็นโครงสร้างง่ายๆได้ดังนี้

(SpeechRecognitionResultList) [
  (SpeechRecognitionResult) [
    (SpeechRecognitionAlternative),
    (SpeechRecognitionAlternative),
    ...
  ],
  (SpeechRecognitionResult) [
    (SpeechRecognitionAlternative),
    (SpeechRecognitionAlternative),
    ...
  ],
  ...
]

โดย SpeechRecognitionAlternative จะประกอบด้วย

• transcript คือ ประโยคที่ API พยายามแปลมาให้เรา
• confidence คือ ค่าความน่าจะเป็นว่าประโยคที่ถูกแปลมาจะมีความถูกต้องตามที่เราพูดขนาดไหน มีค่าระหว่าง 0 ถึง 1 … ถ้าเป็น 0 คือไม่น่าใช่ประโยคนี้เลย แต่หากเป็น 1 ค่อนข้างที่จะเป็นประโยคนี้สูง

โดยเราสามารถเขียน code ง่ายๆเพื่อดูผลลัพธ์ของมัน โดยเพิ่ม option onresult เข้าไปให้ object recognition ดังนี้

recognition.onresult = function(event) {
 for (var i = 0; i < event.results.length; i++){
  var speechRecognitionResult = event.results[i]
  for (var j = 0; j < speechRecognitionResult.length; j++){
   var speechRecognitionAlternative = speechRecognitionResult[i]
   console.log('Get word:', speechRecognitionAlternative.transcript)
   console.log('Prob:', speechRecognitionAlternative.confidence)
  }
 }
}

ผมได้ลองทดสอบคำว่า “Hello, My name is Jeng” และได้ผลลัพธ์ซึ่งมีรูปร่างหน้าตาแบบนี้

ผลลัพธ์การ Recognition ด้วยคำว่า “Hello, My name is Jeng”

ซึ่งเราสามารถเพิ่ม option อื่นๆได้อีก เช่น

SpeechGrammarList คือ List ของคำที่เราต้องการให้ API พยายามวิเคราะห์ออกมา เช่น List ของ colors = [‘black’ , ‘white’ , ‘blue’, ‘red’, …] ซึ่งหากเราพูดชื่อสีไป ความน่าจะเป็นที่ API จะแปลออกมาตาม List ที่เรากำหนดไว้ก็จะมีความเป็นไปได้สูงครับ

สามารถศึกษาการใช้งาน Speech Recognition เพิ่มเติมได้ ที่นี่ เลย

2. Speech Synthesis

การทำ Speech Synthesis สามารถเรียกใช้ได้ผ่านทาง SpeechSynthesis Interface โดยจะทำการเปลี่ยนข้อความที่เราพิมพ์ออกมาเป็นเสียงคนพูดได้เลย… สามารถเรียกใช้ด้วยคำสั่งง่ายๆดังนี้

var utterance = new SpeechSynthesisUtterance("My message")
utterance.lang = 'en-US'
utterance.pitch = 1
utterance.rate = 1
speechSynthesis.speak(utterance)

โดย option แต่ละอย่างของ object utterance ได้แก่

• lang คือ ภาษาที่เราจะให้ API พูดครับ หากใส่เป็น ‘th-TH’ คือจะให้พูดด้วยสำเนียงภาษาไทยนะ
• pitch คือ ค่าของเสียงสูง-เสียงต่ำครับ มีค่าระหว่าง 0 ถึง 2 มีค่าปกติเป็น 1… หาก set เป็น 0 คือเสียงคนพูดจะใช้เสียงต่ำ แต่หาก set เป็น 2 คือเสียงคนพูดจะใช้เสียงสูงครับ
• rate คือ ค่าของความเร็วในการพูดครับ มีค่าระหว่าง 0.1 ถึง 10 มีค่าปกติเป็น 1… หาก set เป็น 0.1 คือคนพูดจะพูดช้ามาก แต่หาก set เป็น 10 คือคนพูดจะพูดเร็วมากครับ

โดยเราสามารถจับ event ของ Speech Synthesis ได้เช่นกันครับ เช่น หาก API พูดเสร็จเมื่อไหร่ให้รันคำสั่งตามที่กำหนด โดยเขียน code ได้ง่ายๆดังนี้

utterance.onend = function(event) {
  console.log('Utterance has finished being spoken after ' + event.elapsedTime + ' milliseconds.')
  // your code here
}

ซึ่งเราสามารถเพิ่ม option อื่นๆได้อีก เช่น

voice คือ การกำหนดให้เสียงคนพูดจะพูดมาตามสำเนียงของใครครับ สามารถดู List ของ voice ที่รองรับได้จากคำสั่ง

var voices = speechSynthesis.getVoices()

และ ตั้งค่าให้ utterance ใช้เสียงตามที่เรากำหนดได้จากคำสั่ง

utterance.voice = voices[0] // หรือ index ของ voice ที่เราต้องการ

สามารถศึกษาการใช้งาน Speech Synthesis เพิ่มเติมได้ ที่นี่ เลย

โดยทั้งนี้ ผมได้สร้าง Demo App สำหรับการใช้งานทั้ง Speech Recognition และ Speech Synthesis เอาไว้ครับ… หากใครนึกภาพไม่ออกว่าตอนใช้งานจริงจะเป็นอย่างไร สามารถลองเข้าไปเล่นได้ตามสบายเลยนะ (ใครเล่นใน mobile อาจจะไม่ได้ยินเสียงนะครับ แนะนำให้ลองเล่นใน Chrome PC ครับ)

Demo App

หวังว่า Web Speech API จะสามารถช่วยเพื่อนๆสร้าง Conversation App ได้แบบง่ายๆนะครับ หากใครสนใจศึกษาเพิ่มเติมเกี่ยวกับ Web Speech API สามารถศึกษาได้จากเว็บไซต์ของ developer.mozilla ได้เลย