.Net Maui Working With Audio And Video Using Mediaelement Complete Guide

Step 1: Create a New .NET MAUI Project

1. Open Visual Studio.
2. Create a new project: Choose "Multi-platform App (.NET MAUI)" as the template.

Step 2: Add Necessary UI Elements

In this example, we will create a simple UI that includes buttons to play and stop media, and a label to show the current playback status. Open your MainPage.xaml file and add the following code:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiAudioVideo.MainPage">

    <StackLayout Padding="10" Spacing="10" VerticalOptions="Center">
        <MediaElement x:Name="mediaElement"
                      AreTransportControlsEnabled="True"
                      ShowsPlaybackControls="True"
                      VerticalOptions="FillAndExpand"/>

        <Button Text="Play Audio"
                Clicked="OnPlayAudioClicked"
                HorizontalOptions="StartAndExpand"/>

        <Button Text="Stop Media"
                Clicked="OnStopMediaClicked"
                HorizontalOptions="EndAndExpand"/>

        <Label x:Name="statusLabel"
               Text="Ready to Play"
               FontSize="Medium"/>
    </StackLayout>
</ContentPage>

Step 3: Add Code-Behind Logic

Next, we'll add the code-behind logic to handle playing audio and stopping media. Open your MainPage.xaml.cs file and update it like this:

using Microsoft.Maui.Controls;
using Microsoft.Maui.Media;
using System;

namespace MauiAudioVideo
{
    public partial class MainPage : ContentPage
    {
        string audioFilePath = "https://www.soundjay.com/button/beep-07.wav";
        // You can also use a local file by placing it in the Resources/Raw folder and using:
        // string audioFilePath = "Resources/Raw/beep-07.mp3";

        string videoFilePath = "https://archive.org/download/Pompeii_in_colore/Pompeii_in_colore.mp4";
        // For a local file, place it in the Resources/Raw folder and use:
        // string videoFilePath = "Resources/Raw/pompeii-in-colore.mp4";

        public MainPage()
        {
            InitializeComponent();
        }

        private void OnPlayAudioClicked(object sender, EventArgs e)
        {
            PlayAudio();
        }

        private async void PlayAudio()
        {
            if (string.IsNullOrWhiteSpace(audioFilePath))
            {
                statusLabel.Text = "Invalid Audio URL";
                return;
            }

            try
            {
                mediaElement.Source = MediaSource.FromUri(audioFilePath);
                await mediaElement.PlayAsync();
                statusLabel.Text = "Playing Audio";
            }
            catch (Exception ex)
            {
                statusLabel.Text = $"Error playing audio: {ex.Message}";
            }
        }

        private async void PlayVideo()
        {
            if (string.IsNullOrWhiteSpace(videoFilePath))
            {
                statusLabel.Text = "Invalid Video URL";
                return;
            }

            try
            {
                mediaElement.Source = MediaSource.FromUri(videoFilePath);
                await mediaElement.PlayAsync();
                statusLabel.Text = "Playing Video";
            }
            catch (Exception ex)
            {
                statusLabel.Text = $"Error playing video: {ex.Message}";
            }
        }

        private void OnStopMediaClicked(object sender, EventArgs e)
        {
            StopMedia();
        }

        private async void StopMedia()
        {
            await mediaElement.StopAsync();
            statusLabel.Text = "Stopped";
        }
    }
}

Step 4: Test Your Application

Run your application on an emulator or device, and then tap the "Play Audio" button to start the audio. The MediaElement will handle displaying and playing the audio. After playing the audio, you can tap the "Stop Media" button to stop it.

You can add another button to play the video by adding the following code to MainPage.xaml:

<Button Text="Play Video"
        Clicked="OnPlayVideoClicked"
        HorizontalOptions="Center"/>

And handling the click event in MainPage.xaml.cs:

private async void OnPlayVideoClicked(object sender, EventArgs e)
{
    PlayVideo();
}

Step 5: Using Local Files (Optional)

If you want to play a local audio or video file, follow these steps:

1. Add the File: Place your audio or video file in the Resources/Raw folder of your .NET MAUI project. Ensure the build action is set to MauiAsset.

2. Update the File Path: Modify the file path in your code to point to the local resource. For example:

   string audioFilePath = "Resources/Raw/audiofile.mp3";
   string videoFilePath = "Resources/Raw/videofile.mp4";
   

Step 6: Run the Application Again

Test your application to ensure that it can play both local and online media files.

Conclusion

Additional Tips

• Handling Different Formats: MediaElement supports a variety of formats, but compatibility can vary across different platforms. Always test media playback on your target devices/emulators.
• Error Handling: Implement error handling to manage issues like invalid media URIs or unsupported formats gracefully.
• Cross-Platform Considerations: Be aware of platform-specific limitations and features. For example, certain UI controls may behave differently on iOS versus Android. Always refer to the official .NET MAUI documentation for guidance.