KotlinAndroidテキスト読み上げと音声読み上げの例

このチュートリアルでは、簡単な例を使ってText To SpeechとSpeech To Textを学びます。書かれたテキストを話し言葉に、または話し言葉を書かれたテキストにプログラム的に変換する方法です。

これまでのところ、2つの例があります。

例1 Kotlin Speech to Text と Text to Speech。
例 2- Kotlin Speech to Text および Text to Speech

さっそく始めてみましょう。

例 1: Kotlin Android の音声合成とテキストスピーチ

この例を見てみましょう。この例では、Text To SpeechとSpeech To Textの両方を扱っています。変換するテキストを入力するeditxtがあります。

以下は、これから作成するデモです。

Kotlin Android Text to Speech と Text Speech](https://user-images.githubusercontent.com/32610660/114280312-dbcc3d80-9a62-11eb-8549-e33621d1ce0d.gif)

ステップ1：プロジェクトの作成

まず、空の Android Studio プロジェクトを作成します。

ステップ2: 依存関係

サードパーティのライブラリは必要ありません。

ステップ3: レイアウトの設計

MainActivityのレイアウトを1つ作成します。

activity_main.xml

UIコンポーネントとして、TextInputEditText、FloatingActionButton、ExtendedFloatingActionを追加します。

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/textInputLayout"
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="16dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <com.google.android.material.textfield.TextInputEditText
            android:id="@+id/edtText"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Text" />
    </com.google.android.material.textfield.TextInputLayout>

    <com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
        android:id="@+id/fabPlay"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:text="Play"
        android:textAlignment="center"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textInputLayout" />

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fabVoice"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="16dp"
        android:clickable="true"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:srcCompat="@drawable/ic_keyboard_voice" />

</androidx.constraintlayout.widget.ConstraintLayout>

ステップ4: ViewModelの作成

Androidx.lifecycle.ViewModel を継承した BaseViewModel` というクラスを作成し、ViewModel クラスとします。ここでは、最低でも2つの関数を用意します。

Intentで音声認識器を起動する関数です。

    fun displaySpeechRecognizer() {
        startForResult.launch(Intent(RecognizerIntent.ACTION_RECOGNIZE_SPEECH).apply {
            putExtra(
                RecognizerIntent.EXTRA_LANGUAGE_MODEL,
                RecognizerIntent.LANGUAGE_MODEL_FREE_FORM
            )
            putExtra(RecognizerIntent.EXTRA_LANGUAGE, Locale("in_ID"))
            putExtra(RecognizerIntent.EXTRA_PROMPT, Locale("Bicara sekarang"))
        })
    }

そして、TextToSpeechEngine`によって、TextをSpeechに変換する関数です。

    fun speak(text: String) = viewModelScope.launch{
        textToSpeechEngine.speak(text, TextToSpeech.QUEUE_FLUSH, null, "")
    }

以下がコード全体です。

BaseViewModel.kt

import android.content.Intent
import android.speech.RecognizerIntent
import android.speech.tts.TextToSpeech
import androidx.activity.result.ActivityResultLauncher
import androidx.lifecycle.ViewModel
import androidx.lifecycle.viewModelScope
import kotlinx.coroutines.launch
import java.util.*

class BaseViewModel : ViewModel() {

    private lateinit var textToSpeechEngine: TextToSpeech
    private lateinit var startForResult: ActivityResultLauncher<Intent>

    fun initial(
        engine: TextToSpeech, launcher: ActivityResultLauncher<Intent>
    ) = viewModelScope.launch {
        textToSpeechEngine = engine
        startForResult = launcher
    }

    fun displaySpeechRecognizer() {
        startForResult.launch(Intent(RecognizerIntent.ACTION_RECOGNIZE_SPEECH).apply {
            putExtra(
                RecognizerIntent.EXTRA_LANGUAGE_MODEL,
                RecognizerIntent.LANGUAGE_MODEL_FREE_FORM
            )
            putExtra(RecognizerIntent.EXTRA_LANGUAGE, Locale("in_ID"))
            putExtra(RecognizerIntent.EXTRA_PROMPT, Locale("Bicara sekarang"))
        })
    }

    fun speak(text: String) = viewModelScope.launch{
        textToSpeechEngine.speak(text, TextToSpeech.QUEUE_FLUSH, null, "")
    }

}

ステップ5：MainActivityの作成

最後に、MainActivityを作成します。

MainActivity.ktを作成します。

import android.os.Bundle
import android.speech.RecognizerIntent
import android.speech.tts.TextToSpeech
import androidx.activity.result.contract.ActivityResultContracts
import androidx.activity.viewModels
import androidx.appcompat.app.AppCompatActivity
import id.derysudrajat.stttts.databinding.ActivityMainBinding
import java.util.*

class MainActivity : AppCompatActivity() {

    private lateinit var binding: ActivityMainBinding
    private val model: BaseViewModel by viewModels()

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)
        model.initial(textToSpeechEngine, startForResult)
        with(binding) {
            fabVoice.setOnClickListener { model.displaySpeechRecognizer() }
            fabPlay.setOnClickListener {
                val text = edtText.text?.trim().toString()
                model.speak(if (text.isNotEmpty()) text else "Text tidak boleh kosong")
            }
        }
    }

    private val startForResult = registerForActivityResult(
        ActivityResultContracts.StartActivityForResult()
    ) { result ->
        if (result.resultCode == RESULT_OK) {
            val spokenText: String? =
                result.data?.getStringArrayListExtra(RecognizerIntent.EXTRA_RESULTS)
                    .let { text -> text?.get(0) }
            binding.edtText.setText(spokenText)
        }
    }

    private val textToSpeechEngine: TextToSpeech by lazy {
        TextToSpeech(this) {
            if (it == TextToSpeech.SUCCESS) textToSpeechEngine.language = Locale("in_ID")
        }
    }
}

実行

コードをコピーするか、以下のリンクからダウンロードし、ビルドして実行します。

参考文献

参考文献のリンクはこちらです。

ダウンロード例

例2：簡単な音声読み上げとテキスト読み上げの例

Kotlin Android での簡単な音声読み上げとテキスト読み上げの例です。

ステップ1：プロジェクトの作成

まず、空の Android Studio プロジェクトを作成します。

ステップ2: 必要なもの

サードパーティのライブラリは必要ありません。

ステップ3: レイアウトの設計

TTSとSTTの2つのボタンと、テキストを入力または表示するためのeditxtを追加します。

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical"
    android:padding="24dp"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/btn_stt"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Speak" />

    <EditText
        android:id="@+id/et_text_input"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_marginTop="24dp"
        android:layout_marginBottom="24dp"
        android:layout_weight="1"
        android:gravity="center"
        android:hint="Text from STT or for TTS goes here." />

    <Button
        android:id="@+id/btn_tts"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Listen" />

</LinearLayout>

ステップ4: コードを書く

以下がそのコードです。

MainActivity.kt

import android.app.Activity
import android.content.ActivityNotFoundException
import android.content.Intent
import android.os.Build
import android.os.Bundle
import android.speech.RecognizerIntent
import android.speech.tts.TextToSpeech
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity
import kotlinx.android.synthetic.main.activity_main.*
import java.util.*

class MainActivity : AppCompatActivity() {

    companion object {
        private const val REQUEST_CODE_STT = 1
    }

    private val textToSpeechEngine: TextToSpeech by lazy {
        TextToSpeech(this,
            TextToSpeech.OnInitListener { status ->
                if (status == TextToSpeech.SUCCESS) {
                    textToSpeechEngine.language = Locale.UK
                }
            })
    }

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        btn_stt.setOnClickListener {
            val sttIntent = Intent(RecognizerIntent.ACTION_RECOGNIZE_SPEECH)
            sttIntent.putExtra(
                RecognizerIntent.EXTRA_LANGUAGE_MODEL,
                RecognizerIntent.LANGUAGE_MODEL_FREE_FORM
            )
            sttIntent.putExtra(RecognizerIntent.EXTRA_LANGUAGE, Locale.getDefault())
            sttIntent.putExtra(RecognizerIntent.EXTRA_PROMPT, "Speak now!")

            try {
                startActivityForResult(sttIntent, REQUEST_CODE_STT)
            } catch (e: ActivityNotFoundException) {
                e.printStackTrace()
                Toast.makeText(this, "Your device does not support STT.", Toast.LENGTH_LONG).show()
            }
        }

        btn_tts.setOnClickListener {
            val text = et_text_input.text.toString().trim()
            if (text.isNotEmpty()) {
                if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
                    textToSpeechEngine.speak(text, TextToSpeech.QUEUE_FLUSH, null, "tts1")
                } else {
                    textToSpeechEngine.speak(text, TextToSpeech.QUEUE_FLUSH, null)
                }
            } else {
                Toast.makeText(this, "Text cannot be empty", Toast.LENGTH_LONG).show()
            }
        }

    }

    override fun onActivityResult(requestCode: Int, resultCode: Int, data: Intent?) {
        super.onActivityResult(requestCode, resultCode, data)
        when (requestCode) {
            REQUEST_CODE_STT -> {
                if (resultCode == Activity.RESULT_OK && data != null) {
                    val result = data.getStringArrayListExtra(RecognizerIntent.EXTRA_RESULTS)
                    result?.let {
                        val recognizedText = it[0]
                        et_text_input.setText(recognizedText)
                    }
                }
            }
        }
    }

    override fun onPause() {
        textToSpeechEngine.stop()
        super.onPause()
    }

    override fun onDestroy() {
        textToSpeechEngine.shutdown()
        super.onDestroy()
    }
}

実行

コードをコピーするか、以下のリンクからダウンロードし、ビルドして実行します。

参考文献

参考文献のリンクはこちらです。

ダウンロード例

Categorized in:

Japanese

KotlinAndroidテキスト読み上げと音声読み上げの例

例 1: Kotlin Android の音声合成とテキストスピーチ

ステップ1：プロジェクトの作成

ステップ2: 依存関係

ステップ3: レイアウトの設計

ステップ4: ViewModelの作成

ステップ5：MainActivityの作成

実行

参考文献

例2：簡単な音声読み上げとテキスト読み上げの例

ステップ1：プロジェクトの作成

ステップ2: 必要なもの

ステップ3: レイアウトの設計

ステップ4: コードを書く

実行

参考文献

Oclemy

Other Stories

Kotlin Android StateFlow の例

Android RecyclerView with Exoplayer 動画例

Press ESC to close

Or check our Popular Categories...

例 1: Kotlin Android の音声合成とテキストスピーチ

ステップ1：プロジェクトの作成

ステップ2: 依存関係

ステップ3: レイアウトの設計

ステップ4: ViewModelの作成

ステップ5：MainActivityの作成

実行

参考文献

例2：簡単な音声読み上げとテキスト読み上げの例

ステップ1：プロジェクトの作成

ステップ2: 必要なもの

ステップ3: レイアウトの設計

ステップ4: コードを書く

実行

参考文献

Oclemy

Related Articles

AndroidアカウントとAccountManagerの例

Kotlin Android ネストしたRecyclerViewの例

Kotlin Android StateFlow の例

Android RecyclerView with Exoplayer 動画例

Other Stories

Kotlin Android StateFlow の例

Android RecyclerView with Exoplayer 動画例