How to Stop Previous Audio When Playing a New One in .NET MAUI

In my .NET MAUI application, I am using MediaElement from the .NET MAUI Community Toolkit and WebView to play audio files. However, I am facing an issue where if I play audio on one page, it continues playing even when I navigate to another page and play a different audio file. The previous audio does not stop or pause automatically, causing multiple audios to play simultaneously.

Expected Behavior:

If an audio file is currently playing and the user starts playing another audio on a different page, the previous audio should stop automatically before the new one starts.

XAML Code for MediaElement:

<toolkit:MediaElement
           HorizontalOptions="FillAndExpand" 
           IsVisible="True"
           x:Name="audioplayer">
           <toolkit:MediaElement.HeightRequest>
              <OnIdiom x:TypeArguments="x:Double">
                  <OnIdiom.Phone>180</OnIdiom.Phone>
                   <OnIdiom.Tablet>270</OnIdiom.Tablet>
                   <OnIdiom.Desktop>180</OnIdiom.Desktop>
              </OnIdiom>
           </toolkit:MediaElement.HeightRequest>
 </toolkit:MediaElement>

XAML Code for WebView:

<WebView
        x:Name="audio_webview" 
        BackgroundColor="Transparent" 
        Navigated="OnWebViewNavigated"
        HorizontalOptions="FillAndExpand"
        VerticalOptions="CenterAndExpand" >
        <WebView.HeightRequest>
            <OnIdiom x:TypeArguments="x:Double">
                <OnIdiom.Phone>80</OnIdiom.Phone>
                <OnIdiom.Tablet>120</OnIdiom.Tablet>
                <OnIdiom.Desktop>80</OnIdiom.Desktop>
            </OnIdiom>
        </WebView.HeightRequest>
        <WebView.WidthRequest>
            <OnIdiom x:TypeArguments="x:Double">
                <OnIdiom.Phone>420</OnIdiom.Phone>
                <OnIdiom.Tablet>630</OnIdiom.Tablet>
                <OnIdiom.Desktop>420</OnIdiom.Desktop>
            </OnIdiom>
        </WebView.WidthRequest>
 </WebView>

Environment:

.NET MAUI Version: .NET 8

.NET MAUI Community Toolkit Version: "6.1.0"

Platform: Android and iOS

How can I ensure that when a new audio file starts playing on a different page, any previously playing audio stops automatically?

I used MediaElement to replace the webview to play audio.

As you mentioned, if you use MediaElement and audio will play twice in other pages. In your first page of application, you can create a static MediaElement with C# code. For example, if your first page is DailySaintPage.

I add a static MediaElement in the OnAppearing method And this MediaElement to the Gird(That I created in the following steps).

public static MediaElement MymediaElement;
protected override void OnAppearing()
{
     base.OnAppearing();
 
     MymediaElement = new MediaElement();
     MymediaElement.WidthRequest = 1;
     MymediaElement.HeightRequest = 1;
     MymediaElement.ShouldAutoPlay = false;
     myGrid.Add(MymediaElement);
 
}

And I create a Grid to wrap the Play button in the DailySaintPage.xaml layout.

<Grid Grid.Column="1" x:Name="myGrid">
 
                       
<Image
    HorizontalOptions="CenterAndExpand"
    VerticalOptions="CenterAndExpand"
    Source="ic_audio_play_icon_xx.png">
    <Image.GestureRecognizers>
        <TapGestureRecognizer
            Tapped="PlayAudio"
            NumberOfTapsRequired="1">
        </TapGestureRecognizer>
    </Image.GestureRecognizers>
</Image>
</Grid>

In the PlayAudio event. Do not need to open a popup then play it. You can play it by following code directly.

public async void PlayAudio(object sender, EventArgs args)
{
     try
     {
         if (!string.IsNullOrWhiteSpace(mAudioURL))
         {
             // await Application.Current.MainPage.ShowPopupAsync(new CatholicBrain.Daily_Activities.DailyAudioPopUpPage(mAudioURL));
             //  Debug.WriteLine("Finalaudioplay:>>" + mAudioURL);
 
             MymediaElement.Source = mAudioURL;
             MymediaElement.Play();
         }
         else
         {
         }
     }
     catch (Exception ex)
     {
         System.Diagnostics.Debug.WriteLine("Exception:>" + ex);
     }
}

Then, if you want to stop the play the audio in the DailyReadingPage. You can control it by DailySaintPage.MymediaElement.Stop();, play it by DailySaintPage.MymediaElement.Play();

private void Button_Clicked(object sender, EventArgs e)
{
    DailySaintPage.MymediaElement.Stop();

//set the media resouces.
   var mAudioURL = "Newaudio.mp3";
 
    DailySaintPage.MymediaElement.Source = mAudioURL;
    DailySaintPage.MymediaElement.Play();
}