MAUI: Keep audio playing when navigating to a new page

Question

I am using Webview for playing audio and when I navigate to a new page the audio stops playing. I want to play the audio in background when navigating to new pages, or switching app or locking device.

My Code:

<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>

audio_webview.Source = audioUrl;

When I navigate to a new page I am getting below messages in the output box:

11:04:37:012    [AAudio] AAudioStream_requestStop(s#1) called
11:04:37:012    [AAudio] AAudioStream_close(s#1) called ---------------
11:04:37:012    [AAudioStream] setState(s#1) from 10 to 11
11:04:37:012    [AudioTrack] stop(portId:2774, sessionId:48889): 0xb400006eb01c3f40, prior state:STATE_STOPPED
11:04:37:012    [AudioTrackShared] this(0xb400006e500b8550), mCblk(0x6d7fcdc000), front(311736), mIsOut 1, interrupt() FUTEX_WAKE
11:04:37:012    [AudioTrack] requestExitAndWait start
11:04:37:012    [AudioTrack] requestExitAndWait end
11:04:37:012    [AudioTrack] stopAndJoinCallbacks(2774) done
11:04:37:012    [AudioTrack] ~AudioTrack(2774): 0xb400006eb01c3f40
11:04:37:072    [AudioTrack] getpackName client name com.companyname.appname(24146)
11:04:37:072    [AudioTrack] stop(portId:2774, sessionId:48889): 0xb400006eb01c3f40, prior state:STATE_STOPPED
11:04:37:072    [AudioTrack] stopAndJoinCallbacks(2774) done
11:04:37:072    [AAudioStream] setState(s#1) from 11 to 12
11:04:37:072    [AAudioStream] ~AudioStream(s#1) mPlayerBase strongCount = 2
11:04:37:072    [AAudio] AAudioStream_close(s#1) returned 0 ---------

I want to play the audio in background without pausing when opening new pages. This feature is working fine on iOS platform, but in android only the audio is pausing.

I have created a demo project. Could you please check with this. Play the audio and go back and tap home page.

Answer 1

Hello,

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();
}

Best Regards,

Leon Lu

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.