3

Antes de Compose, tenía una clase TTSManager para Android que rastreaba el progreso de lectura de texto a voz (Text to Speech - TTS) de grandes cantidades de texto. Y usaba una SeekBar para marcar el progreso de la lectura.

La captura muestra en la parte superior la barra de progreso y a la derecha un botón play :

introducir la descripción de la imagen aquí

Cuando se empezaba la reproducción pulsando en el botón play, se mostraban dos botones de pause y stop y además la barra de progreso iba marcando el estado de la lectura de voz:

introducir la descripción de la imagen aquí

Este es un ejemplo de la implementación previa a Jetpack Compose, que produce las imágenes de más arriba.

Ahora yo quiero migrar esto a Jetpack Compose. Lo he intentado de dos formas, pero ninguna me funciona en cuanto a controlar el progreso de la reproducción y avanzar / retroceder si pulso en la barra de progreso.

Primera forma: Con un Slider

Al intentar con un Slider para marcar el progreso de la lectura no sé cómo conectar los elementos para que el slider vaya progresando al ritmo de la lectura. Con el código actual se queda siempre fijo, a pesar de que la lectura de texto a voz funciona.

Este es el código que tengo hasta ahora:

TextToSpeechScreen

Esta pantalla presenta los botones de Play y de Stop. Cuando se pulsa sobre alguno de ellos, se inicia o se detiene el lector de voz.

private var mTtsManager: TtsManagerCompose? = null

@ExperimentalMaterial3Api
@Composable
fun TextToSpeechScreen(text: StringBuilder) {
    var isSpeaking by remember { mutableStateOf(false) }
    var sliderValue by remember { mutableStateOf(0f) }
    var sliderMaxValue by remember { mutableStateOf(100f) }

    Column(modifier = Modifier.padding(24.dp)) {
        //isSpeaking = false
        SliderMinimalExample(sliderValue, sliderMaxValue)
        if (isSpeaking) {
            readText(text = text)
        }

        Button(onClick = {
            isSpeaking = true

        }) {
            Image(
                painterResource(id = R.drawable.ic_play),
                contentDescription = "Play",
                modifier = Modifier.size(20.dp)
            )

        }

        Button(onClick = {
            mTtsManager?.stop()
            isSpeaking = false
        }) {
            Image(
                painterResource(id = R.drawable.ic_baseline_stop_circle_24),
                contentDescription = "Stop",
                modifier = Modifier.size(20.dp)
            )
        }
        //TODO: Buttons for Pause / Resume ...
    }
}

SliderMinimalExample

Este sería el slider que debería presentar el progreso de la lectura.

@Composable
fun SliderMinimalExample(
    sliderValue: Float,
    sliderMaxValue: Float
) {
    var sliderPosition by remember { mutableFloatStateOf(0f) }
    Column {
        Slider(
            //value = sliderPosition,
            value = sliderValue,
            valueRange = 0f..sliderMaxValue,
            onValueChange = { sliderPosition = it }
        )
        Text(text = sliderPosition.toString())
    }
}

El método readText

Este método se lanza cuando se presiona en el botón Play

@Composable
private fun readText(text: StringBuilder) {
    var sliderValue by remember { mutableFloatStateOf(0f) }
    var sliderMaxValue by remember { mutableFloatStateOf(100f) }
    mTtsManager = TtsManagerCompose(
        LocalContext.current, text,
        Constants.SEPARADOR,
    ) {  current: Int,max: Int ->
        sliderValue = current.toFloat() // Update current value
        sliderMaxValue = max.toFloat() // Update Max alue
    }
    mTtsManager!!.start()
}

Clase TtsManagerCompose

Esta es mi clase adaptada para Jetpack Compose.

class TtsManagerCompose(
    context: Context,
    text: StringBuilder,
    splitRegex: String,
    private var mProgressListener: (Int, Int) -> Unit

) : OnInitListener {
    private val mTexts: Array<String>
    private val mTts: TextToSpeech
    private var mTextProgress = 0
    private var mIsPlaying = false
    var sliderValue by mutableStateOf(0f)
    var sliderMaxValue by mutableStateOf(100f)

    init {
        mTexts = text.split(splitRegex.toRegex()).dropLastWhile { it.isEmpty() }.toTypedArray()
        mTts = TextToSpeech(context, this)
        mTts.setOnUtteranceProgressListener(object : UtteranceProgressListener() {
            override fun onDone(utteranceId: String) {
                if (!mIsPlaying || mTextProgress == mTexts.size) return
                ++mTextProgress
                updateProgress(sliderValue.toInt(), mTexts.size)
                speakText()
            }

            override fun onStart(utteranceId: String) {}

            @Deprecated("Deprecated in Java")
            override fun onError(utteranceId: String) {
                //onError(utteranceId);
            }
        })
    }

    private fun speakText() {
        if (mTextProgress >= mTexts.size) return
        //API 21+
        val bundle = Bundle()
        bundle.putInt(TextToSpeech.Engine.KEY_PARAM_STREAM, AudioManager.STREAM_MUSIC)
        mTts.speak(mTexts[mTextProgress], TextToSpeech.QUEUE_FLUSH, bundle, "TTS_ID")
    } 

    fun start() {
        mIsPlaying = true
        speakText()
    }

    fun pause() {
        mIsPlaying = false
        mTts.stop()
        updateProgress(mTextProgress, mTexts.size)
    }

    fun resume() {
        mIsPlaying = false
        mTts.stop()
        start()
        updateProgress(mTextProgress, mTexts.size)
    }

    fun stop() {
        mIsPlaying = false
        mTts.stop()
        mTextProgress = 0
        updateProgress(mTextProgress, mTexts.size)
    }

    private fun updateProgress(current: Int, max: Int) {
        mProgressListener.invoke(current, max)
    }

    fun changeProgress(progress: Int) {
        mTextProgress = progress
        if (!mIsPlaying) return
        pause()
        start()
    }

    override fun onInit(status: Int) {
        if (status == TextToSpeech.SUCCESS) {
            val locSpanish = Locale("spa", "ESP")
            val result = mTts.setLanguage(locSpanish)
            if (result == TextToSpeech.LANG_MISSING_DATA || result == TextToSpeech.LANG_NOT_SUPPORTED) {
                return
            }
            changeProgress(1)
        }
    }

    fun close() {
        mTts.stop()
        mTts.shutdown()
    }
}

Segunda forma: usando Media3.

Jetpack Media3 parece ser más adaptado para este tipo de necesidades. Si bien he logrado hacerlo funcionar con vídeos o canciones, logrando pausar o avanzar en el reproductor, cuando cambio a TTS no me funciona lo de avanzar o marcar el progreso según el contenido se va leyendo. La lectura sí funciona. Aclaro que para este caso no me interesa crear un archivo de audio con el texto, sino reproducir directamente.

Esta es una captura del reproductor usando Media3:

introducir la descripción de la imagen aquí

Si le doy a play empieza la lectura de voz, pero no se marca ningún progreso en la barra. No presten atención al valor 0:15, lo puse manual en el código haciendo pruebas. La idea sería calcular, según la extensión del texto, cuántos minutos duraría, para setear el total en la duración e ir descontando. ¡Esto sería lo ideal, pero no sé cómo!

El código que tengo para Media3 es el siguiente:

TTS

@UnstableApi
class TtsPlayerCompose(
    looper: Looper?, context: Context?,
    text: StringBuilder,
    splitRegex: String,
    private var mProgressListener: (Int, Int) -> Unit

)  : SimpleBasePlayer(looper!!), OnInitListener {
    private val mTexts: Array<String>
    private val mTts: TextToSpeech
    private var mTextProgress = 0
    private var mIsPlaying = false
    private var state = State.Builder()
        .setAvailableCommands(

            Player.Commands.Builder().addAll(
                COMMAND_PLAY_PAUSE,
                COMMAND_STOP,
                COMMAND_SEEK_BACK,
                COMMAND_SEEK_FORWARD,
                COMMAND_SET_SHUFFLE_MODE,
                COMMAND_GET_CURRENT_MEDIA_ITEM,
                COMMAND_GET_METADATA
            ).build()
        )
        .setPlayWhenReady(false, PLAY_WHEN_READY_CHANGE_REASON_USER_REQUEST)
        //.setAudioAttributes(PlaybackService.Companion.getDEFAULT_AUDIO_ATTRIBUTES())
        .setPlaylist(listOf<MediaItemData>(MediaItemData.Builder("test").build()))
        .setPlaylistMetadata(
            MediaMetadata.Builder().setMediaType(MediaMetadata.MEDIA_TYPE_PLAYLIST)
                .setTitle("TTS test").build()
        )
        .setCurrentMediaItemIndex(0)
        .build()

    init {
        mTexts = text.split(splitRegex.toRegex()).dropLastWhile { it.isEmpty() }.toTypedArray()
        mTts = TextToSpeech(context, this)
        mTts.setOnUtteranceProgressListener(object : UtteranceProgressListener() {
            override fun onDone(utteranceId: String) {
                if (!mIsPlaying || mTextProgress == mTexts.size) return
                ++mTextProgress
                speakText()
            }

            override fun onStart(utteranceId: String) {
                updatePlaybackState(STATE_READY, true)
            }
            @Deprecated("Deprecated in Java")
            override fun onError(utteranceId: String) {
                //onError(utteranceId);
            }
        })
    }

    private fun speakText() {
        if (mTextProgress >= mTexts.size) return
        //API 21+
        val bundle = Bundle()
        bundle.putInt(TextToSpeech.Engine.KEY_PARAM_STREAM, AudioManager.STREAM_MUSIC)
        for (name in mTexts) {
            //mTts.speak(mTexts[mTextProgress], TextToSpeech.QUEUE_FLUSH, bundle, "TTS_ID")
            mTts.speak(name, TextToSpeech.QUEUE_ADD, bundle, "TTS_ID")

        }
    }

    fun start() {
        mIsPlaying = true
        speakText()
    }
    
    fun resume() {
        mIsPlaying = false
        mTts.stop()
        start()
        updateProgress(mTextProgress, mTexts.size)
    }
    
    override fun getState(): State {
        return state
    }

    private fun updatePlaybackState(playbackState: Int, playWhenReady: Boolean) {
        val mainHandler = Handler(Looper.getMainLooper())
        mainHandler.post {
            state = state.buildUpon()
                .setPlaybackState(playbackState)
                .setPlayWhenReady(playWhenReady, PLAY_WHEN_READY_CHANGE_REASON_USER_REQUEST)
                .build()
            invalidateState()
        }
    }

    override fun handleSetPlayWhenReady(playWhenReady: Boolean): ListenableFuture<*> {
        if (playWhenReady) {
            val locSpanish = Locale("spa", "ESP")
            mTts.setLanguage(locSpanish)
            speakText()
        } else {
            mTts.stop()
        }
        return Futures.immediateVoidFuture()
    }

    override fun handleRelease(): ListenableFuture<*> {
        mTts.stop()
        mTts.shutdown()
        return Futures.immediateVoidFuture()
    }

    override fun handleStop(): ListenableFuture<*> {
        mTts.stop()
        return Futures.immediateVoidFuture()
    }

    override fun handleSetShuffleModeEnabled(shuffleModeEnabled: Boolean): ListenableFuture<*> {
        return Futures.immediateVoidFuture()
    }

    private fun updateProgress(current: Int, max: Int) {
        mProgressListener.invoke(current, max)
    }

    fun changeProgress(progress: Int) {
        mTextProgress = progress
        if (!mIsPlaying) return
        pause()
        start()
    }

    override fun onInit(status: Int) {
        if (status == TextToSpeech.SUCCESS) {
            val locSpanish = Locale("spa", "ESP")
            val result = mTts.setLanguage(locSpanish)
            if (result == TextToSpeech.LANG_MISSING_DATA || result == TextToSpeech.LANG_NOT_SUPPORTED) {
                return
            }
            changeProgress(1)
        }
    }

    fun close() {
        mTts.stop()
        mTts.shutdown()
    }
}

ExoPlayerView

@UnstableApi
@Composable
fun ExoPlayerView(text: StringBuilder) {
    val context = LocalContext.current
    var sliderMaxValue by remember { mutableFloatStateOf(100f) }
    val ttsPlayer = TtsPlayerCompose(Looper.getMainLooper(), context, text, Constants.SEPARADOR){ current: Int, max: Int ->
    sliderMaxValue = max.toFloat()}

    DisposableEffect(Unit) {
        onDispose {
            ttsPlayer.release()
        }
    }

    // Use AndroidView to embed an Android View (PlayerView) into Compose
    AndroidView(
        factory = { ctx ->
            PlayerView(ctx).apply {
                player = ttsPlayer
            }
        },
        modifier = Modifier
            .fillMaxWidth()
            .height(200.dp)
    )
}

Service

open class DemoPlaybackService : MediaLibraryService() {

    private lateinit var mediaLibrarySession: MediaLibrarySession

    companion object {
        private const val NOTIFICATION_ID = 123
        private const val CHANNEL_ID = "demo_session_notification_channel_id"
    }

    open fun getSingleTopActivity(): PendingIntent? = null

    open fun getBackStackedActivity(): PendingIntent? = null

    protected open fun createLibrarySessionCallback(): MediaLibrarySession.Callback {
        return DemoMediaLibrarySessionCallback(this)
    }

    @OptIn(UnstableApi::class) 
    override fun onCreate() {
        super.onCreate()
        initializeSessionAndPlayer()
        setListener(MediaSessionServiceListener())
    }

    override fun onGetSession(controllerInfo: ControllerInfo): MediaLibrarySession {
        return mediaLibrarySession
    }
    @OptIn(UnstableApi::class)
    override fun onDestroy() {
        getBackStackedActivity()?.let { mediaLibrarySession.setSessionActivity(it) }
        mediaLibrarySession.release()
        mediaLibrarySession.player.release()
        clearListener()
        super.onDestroy()
    }

    @OptIn(UnstableApi::class)
    private fun initializeSessionAndPlayer() {
        val player = TtsPlayer(Looper.getMainLooper(), this, "")
        mediaLibrarySession =
            MediaLibrarySession.Builder(this, player, createLibrarySessionCallback())
                .also { builder -> getSingleTopActivity()?.let { builder.setSessionActivity(it) } }
                .build()
    }

    @OptIn(UnstableApi::class)
    private inner class MediaSessionServiceListener : Listener {

        override fun onForegroundServiceStartNotAllowedException() {
            if (
                Build.VERSION.SDK_INT >= 33 &&
                checkSelfPermission(Manifest.permission.POST_NOTIFICATIONS) !=
                PackageManager.PERMISSION_GRANTED
            ) {
                // Notification permission is required but not granted
                return
            }
            val notificationManagerCompat = NotificationManagerCompat.from(this@DemoPlaybackService)
            ensureNotificationChannel(notificationManagerCompat)
            val builder =
                NotificationCompat.Builder(this@DemoPlaybackService, CHANNEL_ID)
                    .setSmallIcon(R.drawable.ic_help)
                    .setContentTitle(getString(R.string.lbl_nona))
                    .setStyle(
                        NotificationCompat.BigTextStyle().bigText(getString(R.string.lbl_nona))
                    )
                    .setPriority(NotificationCompat.PRIORITY_DEFAULT)
                    .setAutoCancel(true)
                    .also { builder -> getBackStackedActivity()?.let { builder.setContentIntent(it) } }
            notificationManagerCompat.notify(NOTIFICATION_ID, builder.build())
        }
    }

    private fun ensureNotificationChannel(notificationManagerCompat: NotificationManagerCompat) {
        if (
            notificationManagerCompat.getNotificationChannel(CHANNEL_ID) != null
        ) {
            return
        }

        val channel =
            NotificationChannel(
                CHANNEL_ID,
                getString(R.string.lbl_mixto),
                NotificationManager.IMPORTANCE_DEFAULT,
            )
        notificationManagerCompat.createNotificationChannel(channel)
    }
}

Como decía más arriba, actualmente el lector de voz funciona en ambos casos, pero en el slider no se muestra el progreso, se queda siempre en 0. En el código anterior a compose, la lectura de voz mostraba el progreso, y cuando movía la Seekbar, el texto empezaba a leer en un punto anterior o posterior, según la posición de la Seekbar. Eso es lo que quiero lograr, pero con código basado en Jetpack Compose.

¿Alguna idea de cómo conectar adecuadamente todos estos componentes? Intuyo que debería ser más simple que antes, pero no logro hacerlo funcionar y estoy bloqueado en este punto del desarrollo.

Enlaces

  1. Una pregunta parecida (usando Media3) en el sitio en inglés, sin respuesta
  2. Pregunta en el apartado issues del repositorio oficial de Media3, con algunos comentarios que han ayudado, pero sin resolver el problema.
  3. Una pregunta en el sitio en inglés intentando con Slider
2
  • 1
    Veo que usas Exoplayer, hace tiempo realicé algo similar, en este caso se tendría que estar actualizando correctamente sliderValue y sliderMaxValue
    – Jorgesys
    Commented el 11 sept. a las 20:01
  • @Jorgesys ¿sabes dónde se debe contratar eso exactamente? El caso es que si uso un video por ejemplo todo funciona del modo esperado pero cuando cambio el player por la clase del TTS no funciona el desplazamiento.
    – A. Cedano
    Commented el 11 sept. a las 20:11

1 respuesta 1

2
+250
  1. Transfirió las variables sliderValue y sliderMaxValue a TtsManagerCompose
  2. Aún, cuando el usuario interactúa con el control deslizante, los valores se actualizan en TextToSpeechScreen y estos cambios se pasan a TtsManagerCompose para controlar la reproducción del texto.
  3. y algunos pequeños cambios...

TextToSpeechScreen:

private var mTtsManager: TtsManagerCompose? = null

@ExperimentalMaterial3Api
@Composable
fun TextToSpeechScreen(text: StringBuilder) {
    var isSpeaking by remember { mutableStateOf(false) }
    var sliderValue by remember { mutableStateOf(0f) }
    var sliderMaxValue by remember { mutableStateOf(100f) }
    var currentTextIndex by remember { mutableStateOf(0) }

    // Divida el texto en una matriz de cadenas
    val textLines = text.split(Constants.SEPARADOR.toRegex()).dropLastWhile { it.isEmpty() }
    // Establecer el valor máximo del control deslizante de acuerdo con el número de líneas de texto
    // sliderMaxValue = textLines.size.toFloat()

    Column(modifier = Modifier.padding(24.dp)) {
        // Mostrar un control deslizante para seguir el progreso de la reproducción
        SliderMinimalExample(sliderValue, sliderMaxValue) { newValue ->
            // Manejo de cambios en el valor del control deslizante
            mTtsManager?.changeProgress(newValue.toInt())
        }

        // Comprobar si TTS dice
        if (isSpeaking) {
            readText(text = text, onTextChanged = { index ->
                currentTextIndex = index
            }, onSliderValuesChanged = { current, max ->
                sliderValue = current.toFloat()
                sliderMaxValue = max.toFloat()
            })
        }

        // Desplazamiento vertical del texto
        // LazyColumn(modifier = Modifier.weight(1f)) {
        //     items(textLines.size) { index ->
        //         Text(
        //             text = textLines[index],
        //             modifier = Modifier.padding(14.dp).background(if (index == currentTextIndex) Color.LightGray else Color.Transparent)
        //         )
        //     }
        // }

        // Botón para iniciar la reproducción
        Button(onClick = {
            isSpeaking = true
        }) {
            Image(
                painterResource(id = R.drawable.ic_play),
                contentDescription = "Play",
                modifier = Modifier.size(20.dp)
            )
        }

        // Botón para detener la reproducción
        Button(onClick = {
            mTtsManager?.stop()
            isSpeaking = false
        }) {
            Image(
                painterResource(id = R.drawable.ic_baseline_stop_circle_24),
                contentDescription = "Stop",
                modifier = Modifier.size(20.dp)
            )
        }

        //TODO: Buttons for Pause / Resume ...
    }
}

SliderMinimalExample:

@Composable
fun SliderMinimalExample(
    sliderValue: Float,
    sliderMaxValue: Float,
    onSliderValueChange: (Float) -> Unit
) {
    Column {
        Slider(
            value = sliderValue,
            valueRange = 0f..sliderMaxValue,
            onValueChange = { newValue ->
                // Llamar al controlador cuando se cambia el valor
                onSliderValueChange(newValue)
            }
        )
        // Muestra el porcentaje de progreso
        Text(text = "Progress: ${sliderValue.toInt()}%")
    }
}

readText:

@Composable
private fun readText(
    text: StringBuilder,
    onTextChanged: (Int) -> Unit,
    onSliderValuesChanged: (Int, Int) -> Unit
) {
    if (mTtsManager == null) {
        mTtsManager = TtsManagerCompose(
            LocalContext.current, text,
            Constants.SEPARADOR,
        ) { current: Int, max: Int ->
            onSliderValuesChanged(current, max) // Update current value
            onTextChanged(current) // Update Max value
        }
        mTtsManager!!.start()
    }
}

TtsManagerCompose:

class TtsManagerCompose(
    context: Context,
    text: StringBuilder,
    splitRegex: String,
    private var mProgressListener: (Int, Int) -> Unit
) : OnInitListener {
    private val mTexts: Array<String>
    private val mTts: TextToSpeech
    private var mTextProgress = 0
    private var mIsPlaying = false
    var sliderValue by mutableStateOf(0f)
    var sliderMaxValue by mutableStateOf(100f)

    init {
        // Dividir el texto en una matriz de cadenas
        mTexts = text.split(splitRegex.toRegex()).dropLastWhile { it.isEmpty() }.toTypedArray()
        mTts = TextToSpeech(context, this)
        mTts.setOnUtteranceProgressListener(object : UtteranceProgressListener() {
            override fun onDone(utteranceId: String) {
                if (!mIsPlaying || mTextProgress == mTexts.size) return
                ++mTextProgress
                updateProgress(mTextProgress, mTexts.size)
                speakText()
            }
            override fun onStart(utteranceId: String) {}
            @Deprecated("Deprecated in Java")
            override fun onError(utteranceId: String) {
                //onError(utteranceId);
            }
        })
    }

    private fun speakText() {
        if (mTextProgress >= mTexts.size) return
        val bundle = Bundle()
        bundle.putInt(TextToSpeech.Engine.KEY_PARAM_STREAM, AudioManager.STREAM_MUSIC)
        mTts.speak(mTexts[mTextProgress], TextToSpeech.QUEUE_FLUSH, bundle, "TTS_ID")
    }

    fun start() {
        mIsPlaying = true
        speakText()
    }

    fun pause() {
        mIsPlaying = false
        mTts.stop()
        updateProgress(mTextProgress, mTexts.size)
    }

    fun resume() {
        mIsPlaying = true
        speakText()
    }

    fun stop() {
        mIsPlaying = false
        mTts.stop()
        mTextProgress = 0
        updateProgress(mTextProgress, mTexts.size)
    }

    private fun updateProgress(current: Int, max: Int) {
        // Llamar al oyente del progreso
        mProgressListener.invoke(current, max)
    }

    fun changeProgress(progress: Int) {
        mTextProgress = progress
        if (!mIsPlaying) return
        pause()
        start()
    }

    override fun onInit(status: Int) {
        if (status == TextToSpeech.SUCCESS) {
            val locSpanish = Locale("spa", "ESP")
            val result = mTts.setLanguage(locSpanish)
            if (result == TextToSpeech.LANG_MISSING_DATA || result == TextToSpeech.LANG_NOT_SUPPORTED) {
                return
            }
            changeProgress(0)
        }
    }

    fun close() {
        mTts.stop()
        mTts.shutdown()
    }
}

Ahora parece que debería funcionar, Pero tienes que comprobarlo.
Avíseme si esto resuelve el problema...


UPD:
Ha cambiado un poco la inicialización de TtsManagerCompose, y algunos puntos más...

private var mTtsManager: TtsManagerCompose? = null

@ExperimentalMaterial3Api
@Composable
fun TextToSpeechScreen(text: StringBuilder) {
    var isSpeaking by remember { mutableStateOf(false) }
    var sliderValue by remember { mutableStateOf(0f) }
    var sliderMaxValue by remember { mutableStateOf(100f) }
    var currentTextIndex by remember { mutableStateOf(0) }
    val textLines = text.split(Constants.SEPARADOR.toRegex()).dropLastWhile { it.isEmpty() }

    // Establecer el valor máximo del control deslizante de acuerdo con el número de líneas de texto
    sliderMaxValue = textLines.size.toFloat()

    Column(modifier = Modifier.padding(24.dp)) {
        SliderMinimalExample(sliderValue, sliderMaxValue) { newValue ->
            mTtsManager?.changeProgress(newValue.toInt())
        }

        if (isSpeaking) {
            readText(text = text, onTextChanged = { index ->
                currentTextIndex = index
            }, onSliderValuesChanged = { current, max ->
                sliderValue = current.toFloat()
                sliderMaxValue = max.toFloat()
            })
        }

        // Desplazamiento vertical del texto
        // LazyColumn(modifier = Modifier.weight(1f)) {
        //     items(textLines.size) { index ->
        //         Text(
        //             text = textLines[index],
        //             modifier = Modifier.padding(14.dp).background(if (index == currentTextIndex) Color.LightGray else Color.Transparent)
        //         )
        //     }
        // }

        Button(onClick = {
            isSpeaking = true
        }) {
            Image(
                painterResource(id = R.drawable.ic_play),
                contentDescription = "Play",
                modifier = Modifier.size(20.dp)
            )
        }

        Button(onClick = {
            mTtsManager?.stop()
            isSpeaking = false
        }) {
            Image(
                painterResource(id = R.drawable.ic_baseline_stop_circle_24),
                contentDescription = "Stop",
                modifier = Modifier.size(20.dp)
            )
        }
        //TODO: Buttons for Pause / Resume ...
    }
}

@Composable
fun SliderMinimalExample(
    sliderValue: Float,
    sliderMaxValue: Float,
    onSliderValueChange: (Float) -> Unit
) {
    Column {
        Slider(
            value = sliderValue,
            valueRange = 0f..sliderMaxValue,
            onValueChange = { newValue ->
                onSliderValueChange(newValue)
            }
        )
        Text(text = "Progress: ${sliderValue.toInt()}%")
    }
}

@Composable
private fun readText(text: StringBuilder) {
    // Inicializar TtsManagerCompose si Aún no se ha inicializado
    if (mTtsManager == null) {
        mTtsManager = TtsManagerCompose(
            LocalContext.current, text,
            Constants.SEPARADOR,
            { current: Int, max: Int ->
                // Actualizar los valores del control deslizante
                sliderValue = current.toFloat() // Update current value
                sliderMaxValue = max.toFloat() // Update Max value
            },
            0f, // Valor inicial del control deslizante
            // Valor máximo del control deslizante
            text.split(Constants.SEPARADOR.toRegex()).dropLastWhile { it.isEmpty() }.size.toFloat()
        )
        mTtsManager!!.start()
    }
}

class TtsManagerCompose(
    context: Context,
    text: StringBuilder,
    splitRegex: String,
    private var mProgressListener: (Int, Int) -> Unit,
    initialSliderValue: Float,
    initialSliderMaxValue: Float
) : OnInitListener {
    private val mTexts: Array<String>
    private val mTts: TextToSpeech
    private var mTextProgress = 0
    private var mIsPlaying = false
    var sliderValue by mutableStateOf(initialSliderValue)
    var sliderMaxValue by mutableStateOf(initialSliderMaxValue)

    init {
        mTexts = text.split(splitRegex.toRegex()).dropLastWhile { it.isEmpty() }.toTypedArray()
        mTts = TextToSpeech(context, this)
        mTts.setOnUtteranceProgressListener(object : UtteranceProgressListener() {
            override fun onDone(utteranceId: String) {
                if (!mIsPlaying || mTextProgress == mTexts.size) return
                ++mTextProgress
                updateProgress(mTextProgress, mTexts.size)
                // currentTextIndex = mTextProgress
                speakText()
            }

            override fun onStart(utteranceId: String) {}
            @Deprecated("Deprecated in Java")
            override fun onError(utteranceId: String) {}
        })
    }

    private fun speakText() {
        if (mTextProgress >= mTexts.size) return
        val bundle = Bundle()
        bundle.putInt(TextToSpeech.Engine.KEY_PARAM_STREAM, AudioManager.STREAM_MUSIC)
        mTts.speak(mTexts[mTextProgress], TextToSpeech.QUEUE_FLUSH, bundle, "TTS_ID")
    }

    fun start() {
        mIsPlaying = true
        speakText()
    }

    fun pause() {
        mIsPlaying = false
        mTts.stop()
        updateProgress(mTextProgress, mTexts.size)
    }

    fun resume() {
        mIsPlaying = true
        speakText()
    }

    fun stop() {
        mIsPlaying = false
        mTts.stop()
        mTextProgress = 0
        updateProgress(mTextProgress, mTexts.size)
    }

    private fun updateProgress(current: Int, max: Int) {
        mProgressListener.invoke(current, max) // Aquí se llama listener
    }

    fun changeProgress(progress: Int) {
        mTextProgress = progress
        if (!mIsPlaying) return
        pause()
        start()
    }

    override fun onInit(status: Int) {
        if (status == TextToSpeech.SUCCESS) {
            val locSpanish = Locale("spa", "ESP")
            val result = mTts.setLanguage(locSpanish)
            if (result == TextToSpeech.LANG_MISSING_DATA || result == TextToSpeech.LANG_NOT_SUPPORTED) {
                return
            }
            changeProgress(0)
        }
    }

    fun close() {
        mTts.stop()
        mTts.shutdown()
    }
}
12
  • Gracias por tu respuesta. He tenido que declarar var sliderValue by remember { mutableFloatStateOf(0f) } y var sliderMaxValue by remember { mutableFloatStateOf(100f) } dentro del método readText. Haciendo eso, tu código funciona a medias. Me explico: Si hago click en un punto más adelante de la barra de progreso, la lectura se coloca en ese punto. Sin embargo, el tamaño de la barra no se corresponde con el contenido a leer. Por ejemplo, en contenido inferior a los 4000 caracteres la lectura termina cuando me coloca más o menos en el último tercio de la barra (...)
    – A. Cedano
    Commented el 13 sept. a las 20:02
  • (...) Pero en contenido con más de 4000 caracteres me coloco al final de la barra y la lectura no se agota ahí. O sea, el tamaño de la barra de progreso no es real con respecto al contenido total del texto que se va a leer. Otro problema es que el indicador de la barra de progreso no se mueve en la medida en que el texto se va leyendo.
    – A. Cedano
    Commented el 13 sept. a las 20:03
  • @A.Cedano ¿Entendí correctamente que ahora el control deslizante avanza en lugar de permanecer al principio? Si es así, entonces es muy bueno... ¡Hemos dado un paso adelante! Commented el 13 sept. a las 21:06
  • 1
    Porque sin declararlas en readText, estas dos llamadas sliderValue = current.toFloat() y sliderMaxValue = max.toFloat() arrojan el error Unresolved reference
    – A. Cedano
    Commented el 13 sept. a las 21:54
  • 1
    Wowww, ahora sí funciona!!!
    – A. Cedano
    Commented el 14 sept. a las 13:33

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.