♯6.只會唸中文?沒關係我來幫你唸!- AVSpeechSynthesizer運用

Photo by Bogomil Mihaylov on Unsplash

終於進入到不只 UI 的世界了,不過該拉的畫面還是得先處理,但是對於畫面我實在沒有靈感,只好求助 google 大神了,看到一篇符合我心中對於這個 APP 的畫面,所以就參考大神的畫面來繪製更簡易的版本。

完成圖如下:

大概只有87分像而已

終於畫完畫面就要開始寫程式了!心中莫名雀躍(?

這次想要練習的是 AVSpeechSynthesizer ,所以一開始的前置作業如下:

  1. import AVFoundation
  2. 設定變數來儲存 AVSpeechUtterance(string: ),也就是需要唸出來的文字
  3. 變數.voice:AVSpeechSynthesisVoice? = AVSpeechSynthesisVoice(language:String):則是決定唸出來的語系
  4. 變數.rate:Float = 最小為0最大為1,預設是0.5:唸文字的語速設定
  5. 變數.volume:Float = 最小為0最大為1,預設是1:唸文字的音量設定

提供各語系的 String 連結

其他還有很多相關的設定可以參考下方連結:

寫程式之前先來構思一下我畫面的步驟:

  1. 剛進入畫面時想要有個歡迎的句子
  2. 輸入文字後可以朗讀我打出的文字
  3. 點擊語系按鈕可以轉成語系的發音方式
  4. 如果沒有打字也會說出提示內容,讓使用者知道需要打入文字才會有反應

需要完成上述的動作時,需要完成以下:

  1. 剛進入畫面時想要有個歡迎的句子:viewDidLoad() 專門在處理畫面剛 load完成的部分,可以將想在畫面剛 load 完成時的動作寫進這裡。
  2. 輸入文字後可以朗讀我打出的文字:設定變數儲存 textField 的文字內容,放置 AVSpeechUtterance(string: textField的文字內容) ,變數設定需拉出@IBOutlet
  3. 點擊語系按鈕可以轉成語系的發音方式:撰寫判斷是點擊哪一顆按鈕來決定是哪種語系的function,需拉出@IBAction
  4. 如果沒有打字也會說出提示內容,讓使用者知道需要打入文字才會有反應:判斷是否 textField 為空字串,如果「是」就播放相對應的提示內容。

附上相對應的程式碼:

剛進入畫面時想要有個歡迎的句子:viewDidLoad() 專門在處理畫面剛 load完成的部分,可以將想在畫面剛 load 完成時的動作寫進這裡。

override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.

//app 開啟時自動說話 안녕하세요
let speechUtterance = AVSpeechUtterance(string:"안녕하세요")// 變數:文字設定
speechUtterance.voice = AVSpeechSynthesisVoice(language:"ko-KR")// AVSpeechSynthesisVoice 為語系設定
let synthesizer = AVSpeechSynthesizer() // AVSpeechSynthesizer() 為生成合成語音並能夠監視或控制正在進行的語音的對象
synthesizer.speak(speechUtterance) // 放入文字設定變數內容

}

輸入文字後可以朗讀我打出的文字:設定變數儲存 textField 的文字內容,放置 AVSpeechUtterance(string: textField的文字內容) ,變數設定需拉出@IBOutlet

@IBOutlet weak var speakWords: UITextField!speakWords.text! //讀取內容

為什麼要寫上驚嘆號,請參考此篇文章

點擊語系按鈕可以轉成語系的發音方式:撰寫判斷是點擊哪一顆按鈕來決定是哪種語系的function,需拉出@IBAction

如果沒有打字也會說出提示內容,讓使用者知道需要打入文字才會有反應:判斷是否 textField 為空字串,如果「是」就播放相對應的提示內容。

@IBAction func choseLanguages(_ sender: UIButton) {
switch sender{
case btnEnglish:
language = "en-IE" //語系設定
// 如果使用者沒有輸入任何文字時
if(speakWords.text==""){
speak("please enter text")
}
case btnMandarin:
language = "zh-TW"
if(speakWords.text==""){
speak("請輸入文字")
}
case btnSpanish:
language = "es-ES"
if(speakWords.text==""){
speak("por favor ingrese texto")
}
case btnFrech:
language = "fr-FR"
if(speakWords.text==""){
speak("veuillez entrer du texte")
}
default: break
}
speak(speakWords.text!) //唸出來!
}

如果 case 下不做任何事,需加上 break 表示會離開 switch 的 {}

寫完就要來測試啦!不過因為此時的xCode beta14 沒有辦法用模擬器聽聲音,必須要安裝到自己的手機,安裝方式可以參考小潘同學的說明文章!

結果打完文字之後卻發現鍵盤怎麼沒有乖乖收起來,可惡我原本以為都會自動收起來的!

google 大神再次出動!

第一篇是參考小潘同時的點選 return 可以收鍵盤的方法1。

第二篇我則是參考點擊任何地方都可以將鍵盤收起來的方法,附上程式碼

//當點擊view任何一處鍵盤收起
override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
self.view.endEditing(true)
}

OK!可以展現我的成果啦~

ps: 如果你想按了按鈕收鍵盤的話~也可以拉一個 @IBAction

view.endEditing(true)

結尾:程式路上,google 大神真是好幫手啊~

附上 git

--

--