How to play music using jetpack compose and also show music progress in Linear progress indicator

README.md

don't forget to add your mp3 file on raw directory

MainActivity.kt

package com.vixiloc.soundeffectplayer

import android.content.ContentValues.TAG
import android.media.MediaPlayer
import android.os.Bundle
import android.util.Log
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Button
import androidx.compose.material3.LinearProgressIndicator
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.DisposableEffect
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalContext
import com.vixiloc.soundeffectplayer.ui.theme.SoundEffectPlayerTheme
import kotlinx.coroutines.delay

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            SoundEffectPlayerTheme {
                Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
                    MainScreen(
                        modifier = Modifier.padding(innerPadding)
                    )
                }
            }
        }
    }
}

@Composable
fun MainScreen(modifier: Modifier = Modifier) {
    val context = LocalContext.current
    val mediaPlayer = remember {
        MediaPlayer.create(context, R.raw.drum_rol) // Enter your raw .mp3 file name here
    }

    var progress by remember { mutableStateOf(0f) }
    var isPlaying by remember { mutableStateOf(false) }

    // Launch a coroutine to update progress
    LaunchedEffect(mediaPlayer, isPlaying) {
        while (isPlaying) {
            val duration = mediaPlayer.duration
            val currentPosition = mediaPlayer.currentPosition
            if (duration > 0) {
                progress = currentPosition.toFloat() / duration
            }
            delay(100) // Update progress every 100 ms
        }
    }

    LaunchedEffect(progress) {
        if (progress == 1f) {
            mediaPlayer.pause()
            mediaPlayer.seekTo(0)
            isPlaying = false
        }
    }

    Box(modifier = modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
        Column(
            modifier = Modifier.fillMaxWidth(),
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            LinearProgressIndicator(progress = progress)
            Button(onClick = {
                if (!isPlaying) {
                    mediaPlayer.start() // To start playing audio
                    isPlaying = true
                } else {
                    progress = 0f
                    mediaPlayer.pause() // To pause the audio
                    mediaPlayer.seekTo(0) // To reset the audio progress into 0
                    isPlaying = false
                }
            }) {
                Text(text = if (isPlaying) "Stop" else "Start")
            }
        }
    }

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