Play Audio in Android using Jetpack Compose
Last Updated :
19 Mar, 2025
In Android, a MediaPlayer is used to play media files like audio and video files in the application. The MediaPlayer Class uses the MediaPlayer API for performing various functions like creating a Media Player, playing, pausing, starting, and stopping the media. In this article, we will show you how you could play an Audio File on Android using Jetpack Compose. Follow the below steps once the IDE is ready.
Step by Step Implementation
Step 1: Create a New Project in Android Studio
To create a new project in the Android Studio, please refer to How to Create a new Project in Android Studio with Jetpack Compose.
Step 2: Create a raw folder and add a music file (.mp3) to it
Navigate to app > res, now right click on the res folder and select New > Android resource directory, specify name and type as raw and select Ok. Now, right click on the raw folder and paste your music file. In this project, the audio file name is "sample.mp3" and so the resource names to call it inside the application becomes R.raw.sample.
To create a raw folder, follow this article Resource Raw Folder in Android Studio.
Step 3: Import drawable (Images) for Start and Pause Icon Buttons
Import two vector assets of your choice for displaying the start and pause button. In this project, we will be using the play and pause button icon available by default in the android library. To access those, we will use the attribute, android.R.drawable.ic_media_play and android.R.drawable.ic_media_pause.
To import vector assets in your Android project, follow this article How to Add Vector Assets in Android Studio?
Step 4: Working with the MainActivity.kt file
Go to the MainActivity.kt file and refer to the following code. Below is the code for the MainActivity.kt file. Comments are added inside the code to understand the code in more detail.
MainActivity.kt:
Kotlin
package com.geeksforgeeks.demo
import android.media.MediaPlayer
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.material3.*
import androidx.compose.runtime.Composable
import androidx.compose.ui.*
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.unit.dp
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
MyContent()
}
}
}
@Composable
fun MyContent() {
val mContext = LocalContext.current
val mMediaPlayer = MediaPlayer.create(mContext, R.raw.sample)
Column(
modifier = Modifier.fillMaxSize(),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally
) {
Row {
// IconButton for Start Action
IconButton(onClick = { mMediaPlayer.start() }) {
Icon(
painter = painterResource(id = android.R.drawable.ic_media_play),
contentDescription = "",
Modifier.size(100.dp)
)
}
// IconButton for Pause Action
IconButton(onClick = { mMediaPlayer.pause() }) {
Icon(
painter = painterResource(id = android.R.drawable.ic_media_pause),
contentDescription = "",
Modifier.size(100.dp)
)
}
}
}
}
Output: