Swift5.1.3 Xcode11.3 SwiftUI
- メモの文字を自動で読み上げてしゃべる機能を実装します
- 喋るスピードはゆっくりでも早くでも
- SwiftUIで入力した文章のTextを引数にしてTextAreaから読み込みます
「以下は動画のハイライトです。」
メモを読み上げる機能は移動中、忙しい時などに使用すると結構便利です。私もメモスピーカーというアプリ名でApple Watch版をApp Storeで公開させていただいておりますが、今回
iPhone版として初心者の方でも自作できるレベルのソースコードの書き方を紹介させていただきます。
まず必要なライブラリとして以下をimportします。
import AVFoundation
次にTextAreaという名前で以下のstructを作成します。
struct TextArea: UIViewRepresentable {
@Binding var text: String
func makeUIView(context: Context) -> UITextView {
let myTextArea = UITextView()
myTextArea.delegate = context.coordinator
myTextArea.font = UIFont(name: "HelveticaNeue", size: 55)
myTextArea.backgroundColor = UIColor(displayP3Red: 0.8, green: 0.8, blue:
1.0, alpha: 0.2)
return myTextArea
}
func updateUIView(_ uiView: UITextView, context: Context) {
uiView.text = text
}
func makeCoordinator() -> Coordinator {
Coordinator(self)
}
class Coordinator : NSObject, UITextViewDelegate {
var parent: TextArea
init(_ uiTextView: TextArea) {
self.parent = uiTextView
}
func textViewDidChange(_ textView: UITextView) {
self.parent.text = textView.text
}
}
}
このテキストエリアに入力した文字を本アプリで読み上げることとなります。テキストエリアのデザインは引数を変えることでbackgroundの色や文字の大きさなど変えることができますので適宜自分の好みに設定してみてください。
最後にContentView内に設置します。
@State var text = "リンゴ"
var body: some View {
VStack(spacing:50) {
Button(action: {
let utterance = AVSpeechUtterance(string: self.text)
// utterance.voice = AVSpeechSynthesisVoice(language: "en-US")
utterance.voice = AVSpeechSynthesisVoice(language: "ja-JP")
utterance.rate = 0.5
let synthesizer = AVSpeechSynthesizer()
synthesizer.speak(utterance)
}) {
Text("読み上げ開始")
}
TextArea(
text: $text
).frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity)
}
.font(.system(size:18))
}
デフォルトではテキストエリアに「リンゴ」と入力してありますが適当に文字を編集することが可能です。
また上記でコメントアウトしている箇所が言語設定となります。en-USとすると英語を話すようになります。英語の発音確認などリスニング目的でしたらお使いください。
この中でスピードを調整する箇所は以下です。
utterance.rate = 0.5
この数値を低くするとゆっくり喋るようになります。また逆に上げると早く喋ります。聞き取りやすいスピードに適宜調節して使ってみてください。
適当に文章をテキストエリアに入力して上部にある「読み上げ開始」のbuttonを押してみてください。iPhoneが自動でしゃべり始めるかと思います。
ソースコードはYouTubeのコメント欄に記載します。
目次へ戻る
