Media3 + Jetpack Compose: The Ultimate Guide to Building a Audio Player App

In this video, you will learn how to create a music player app with Media3 and Jetpack Compose. Media3 is the next generation of media playback on Android, and Jetpack Compose is the easiest way to create beautiful UIs. You will learn how to use these technologies to create an app that can play audio files from your device, display the song title and album art, and control the playback with buttons and sliders.
This is the second part of a two-part series. In the first part, you learned how to set up your project, create a list of audio files, and use Media3 to play them. If you haven’t watched the first part yet, you can find it here: • Media3 and Jetpack Com...
In this part, you will learn how to create the music player interface with Jetpack Compose. You will learn how to use BottomAppBar, IconButton, Slider, Text, Image, and other components from the Material Design library. You will also learn how to connect your UI with your Media3 player and update it according to the playback state.
By the end of this video, you will have a fully functional music player app that looks awesome and works great. You will also have a better understanding of how Media3 and Jetpack Compose work together to create amazing apps.
If you enjoyed this video and want to learn more about Jetpack Compose, you can check out this course: bit.ly/44wxWJ0. This course will teach you everything you need to know about Jetpack Compose, from the basics to the advanced topics. You will learn how to create different types of UIs, such as lists, grids, dialogues, animations, navigation, themes, and more. You will also learn to use Jetpack Compose with other Android components, such as ViewModel, LiveData, Room, Hilt, Navigation Component, and more.
If you want to support me and my channel, you can buy me a coffee here: www.buymeacoff.... Your support means a lot to me and helps me create more content like this.
Thank you for watching and don’t forget to like, comment, share, and subscribe. See you in the next video! 😊

[@HoodLabs]

There was a bug in the tutorial. The Audio data class was missing the implementation for Parcelable, which caused the app to crash in the foreground. To fix this, make sure to implement Parcelable by using the @Parcelize annotation and add the necessary dependency. Here’s what you need to do: Add the Kotlin Android Extensions plugin in your build.gradle (module:App) plugins { ... id("kotlin-parcelize") } then Impleement Parcelable for Audio Data Class and the error will be fixed when navigation to foreground @Parcelize data class Audio( val uri: Uri, val displayName: String, val id: Long, val artist: String, val data: String, val duration: Int, val title: String, ):Parcelable

[@Dibyendu.M]

I desperately need this project. I want to learn Media 3. This is the only project available on KZbin with a good explanation. Thanks a ton. Love from India. ❤

[@techach3490]

the one and only lol.

[@stevekelly4347]

Great series I just watched the vids I'll code along with them at a later date. Keep up the good work you obviously very skilled you'll build a dedicated group of followers with quality like this.

[@techach3490]

Thanks a lot... I am trying to make a Radio player, so understanding this will help me tremendously ❤❤❤

[@VullpesApp]

Congratulations for such amazing tutorial, it helped me so much! I really appreciate it. Just in case someone get troubled to play in foreground. Inside Audio Class, change uri variable to String. If dont do so the app will crash when go to foreground.

[@manishprajapati8544]

Thanks I hope your channel grows and more android developers grow

[@thomasbartke]

These two videos are great! I lve the clear way you structure this app and the different components. I have a question: In the official documentation about MediaSession it says that "MediaSessionService automatically creates a MediaNotification". I'm therefore surprised that you still have to build that out sepaately as shown in these videos.

[@amansingh.h716]

I m also trying 2 build notification using media 3 but don't know y it's not working

[@mustafabayram1875]

it has lack of explanation , where did you release the player inside of handler class? it probably causes memory leak.

[@arashrahnavard5065]

wonderful job , Thank you for making this ❤❤❤

[@TusharVasudev]

Thankyou for making this

[@sabarideepa183]

The app will crash what I do

[@cptsakamoto]

long waiited video

[@frostyfreezemovies]

Start jetpack compose series plz

[@HoodLabs]

Check my channel is full of compose series. what specific series do you want to see

[@techach3490]

Hello, I have a question please... let's say the audiolist has a favorite field and I want to filter it based on audio that has favorite= true. how would this trigger UI recomposition? because I am having a an audio list of type mutablestatelistof and it doesn't trigger recomposition.. So I filter it inside the lazycolumn composition for it to work but that leaves me with the problem of having a full list in viewmodel while having a filtered one in UI. 😢

[@HoodLabs]

It’s difficult to pinpoint the problem without seeing your code, but it might have something to do with how you’re using MutableStateListOf and updating the list. A possible solution is to change your code to: val audioList by mutableStateOf(listOf()) private set and then update it like this with an event from UI: fun toggleShowFavorites(showFavorites: Boolean) { _audioList.value = if (showFavorites) { audioList.filter { it.favorite } } else { // Restore the original full list } } this will trigger recomposition

[@techach3490]

@@HoodLabs thanks, I will try to change it to mutableStateOf() and work a solution from there.. I really appreciate your input. :)

[@techach3490]

@@HoodLabs well I managed to do it like this: val audioList :SnapshotStateList get() { return if(!favoriteState.value) {_audioList} else {_audioList.filter{it.isFavorite.value}.toMutableStateList} } now all I have to do is when I click on UI favorite button is to change the value of favoriteState which is of type MutableState. :) that will change the audiolist which is exposed to UI and will trigger recomposition.

[@gala3941]

Don't forget for rememberLazyListState and state add for LazyColumn. Same goes for GridState/ColumnState/PagerState and so on in compose.

[@techach3490]

@@gala3941 I think not necessarily since I state is hoisted to viewmodel

[@muhammadammar1809]

[@bhawna6591]

Thanks for the amazing tutorial! I followed it all, however when I run the app I get this error: FATAL EXCEPTION: main Process: hoods.com.jetaudio, PID: 10088 java.lang.IllegalArgumentException: Parcel: unknown type for value Audio(uri=, displayName=, id=0, artist=, data=, duration=0, title=)

[@BrightSu-th4bu]

wonderful job , Thank you for making this ❤❤❤