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
:
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:
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:
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
- Una pregunta parecida (usando Media3) en el sitio en inglés, sin respuesta
- Pregunta en el apartado issues del repositorio oficial de Media3, con algunos comentarios que han ayudado, pero sin resolver el problema.
- Una pregunta en el sitio en inglés intentando con Slider