Now that we’re well advanced on the visual side, we can develop the core of the application and make it a little more functional. And if there’s one feature to think about first, it’s playing music!
In the mobile world, media handling is completely different from a system to another. Fortunately, Microsoft has made life easier for us with its Community Toolkit, which precisely offers the right thing for playing audio files from any platform: the MediaElement!
According to the documentation, this component is supplied in a dedicated NuGet package. To install this dependency, open the NuGet package manager and search for the library named CommunityToolkit.Maui.MediaElement.
Once you found it, add it to the project and accept all associated licenses:
Now that the library has been added to the project, one last step remains. The MediaElement component must be initialized at application startup in the
Open this file and modify the CreateMauiApp() method as follows:
Good reflex! When manipulating new snippets of code, it’s always best to understand what happens behind. And in this case, the code is open-source and can be viewed here.
Unsurprisingly, the sole purpose of the UseMauiCommunityToolkitMediaElement() method is to make the MediaElement available to our application. In a nutshell, this consists of specifying which classes implement its behavior, for each of the targeted platforms.
And now we can listen to music!
Make some noise!
Let’s now look at how to define an instance of the MediaElement in the MusicPlayerView.
Excellent point! Indeed, in the chapter on MVVM, we presented the View as the layer corresponding to the user interface. So, logically, you might think that media playback only takes place in the ViewModel!
But once you’ve read the documentation, you’ll see that the MediaElement provides the basic visual controls for manipulating media according to the target platform. And even though we won’t use them (since we’re creating our own controls), the MediaElement is indeed an element of the user interface! And to respect the MVVM breakdown, I prefer to define an instance of the MediaElement in the MusicPlayerView.
MusicPlayerView.cs file, then define a new MediaElement property in the controls area, and a method InitMusicPlayer() to initialize it:
ShouldAutoPlay parameter, we configure our new control to automatically play the next track, as soon as it’s defined. After all, our buttons remain dummy controls, and we need to hear some music to verify MediaElement is working!
That’s right! I grabbed a few songs from Jamendo for our application, a free website for music produced by independent artists.
As you may have noticed, we’ve defined a song to be played by default through the
trackURL variable. Indeed, this URL is then declared as a
Source of media for the MediaElement, with the help of the MediaSource.FromUri() method.
Now back to our page constructor. First, we need to initialize the
MediaPlayer with the method called InitMusicPlayer() that we’ve just introduced. Finally, we also need to add this component as an element of the view to make it available. Otherwise, it won’t be detected by the page and it won’t work!
This is how the MusicPlayerView constructor now looks:
Why not give it a try? First, take the time to adjust the volume on your device so that it’s neither too loud nor too soft. Then relaunch the project to start the app.
So, are you happy to finally hear some music? After so much effort, it’s well deserved! 🙂
But let’s take the opportunity to bring that play button to life.
Control media playback
Now that we’ve checked that media playback works, it would be nice to control it directly with the “Play” button! Following the same principle as before, let’s initialize the
PlayButton control via a new method called InitMediaControlPanel(), triggered from the page constructor. Here are the changes to the MusicPlayerView:
First, we want the icon associated with our central button to change its appearance depending on whether the song is playing (image: pause.png) or not (image: play.png). To achieve this, we apply the Binding technique (cf: MVVM) to the Source property of the
PlayButton, which is nothing else than the property used to define the button icon.
Here is the logic used to modify the value automatically:
We monitor the value changes of the CurrentState property that is attached to the
And we modify the
PlayButtonimage according to whether the CurrentState value is equivalent to the play or pause state.
PlayButton. Indeed, we only want to create one instance of the
ImageButtonand modify it in the InitMediaControlPanel() method.
Then, let’s define a specific behavior when the user clicks on the
PlayButton with the PlayButton_Clicked() method. Here’s what it does:
As you can see, this event is pretty straightforward. It detects at each click the current state of the music player, and depending on this, either requests playback or it will put the track on pause.
That’s all for this chapter. Rebuild the project and turn off the music with the pause button!
Isn’t it great to be able to interact with our app? Personally, that’s my favorite part of mobile app development!
It becomes real and this is just the beginning. Next time, we’ll see how to implement volume and the management of playback head.
More articles in the series: