Xamarin Forms: Issue with MediaElement audio playing

Question

I am using MediaElement for playing audio. I have a list of items and I need to play audio one after another. When playing audio I will change the background color of that list item. Also If I tap an item, the audio of that selected item starts playing, also the color of that item is modifying. These features are working fine in android. I have added a video of the android here.

Because of Native Crash Reporting of MediaElement, I have added a custom renderer in the ios platform. After adding the custom renderer, there are some issues while playing audio in ios. After playing the first audio, the second and third items background color is modifying. After that, the next 2 items color is modifying. I need to play items one by one.

My code:

//Xaml
<MediaElement
x:Name="audio_mediaelement"
MediaEnded="AudioEnded"
ShowsPlaybackControls="True">
<MediaElement.HeightRequest>
<OnIdiom x:TypeArguments="x:Double">
<OnIdiom.Phone>80</OnIdiom.Phone>
<OnIdiom.Tablet>120</OnIdiom.Tablet>
<OnIdiom.Desktop>80</OnIdiom.Desktop>
</OnIdiom>
</MediaElement.HeightRequest>
</MediaElement>

//Initial audio source set up
audio_mediaelement.Source = aduiourl

//When audio end
public void AudioEnded(object sender, EventArgs args)
{
audioOrder = audioOrder + 1;
if(audioOrder < listVerses.Count)
{
audio_mediaelement.Source = aduioFormat + listVerses[audioOrder].audioUrl;
ChapterList.ItemsSource = listVerses;
listVerses[audioOrder].BGColor = Color.FromHex("#f2ee71");
ChapterList.ScrollTo(((IList)ChapterList.ItemsSource)[audioOrder-1], ScrollToPosition.Start, true);
}
}

I have uploaded a sample project here for reference since it is very difficult to understand the issue without a sample. If I didn't add the MediaElement custom renderer, the app will hang after playing audio.

Answer 1

Hello,​

Welcome to our Microsoft Q&A platform!

If you want to have an UI and play next audio automatically. You can use install Plugin.MediaManager.Forms as well.

First of all, here running UI.

Here is UI in the notification task.

Here is xaml code.

   <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"  
                xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"  
                  xmlns:mm="clr-namespace:MediaManager.Forms;assembly=MediaManager.Forms"  
                x:Class="App13.MainPage">  
     
       <StackLayout>  
           <mm:VideoView VerticalOptions="FillAndExpand" AutoPlay="True" ShowControls="True" x:Name="MyVidem" />  
     
       </StackLayout>  
     
   </ContentPage>  

Here is background code for list music

   public partial class MainPage : ContentPage  
       {  
           public MainPage()  
           {  
               InitializeComponent();  
               playmusic();  
                
           }  
           public IList<string> Mp3UrlList => new[]{  
       "https://ia800806.us.archive.org/15/items/Mp3Playlist_555/AaronNeville-CrazyLove.mp3",  
       "https://ia800605.us.archive.org/32/items/Mp3Playlist_555/CelineDion-IfICould.mp3",  
       "https://ia800605.us.archive.org/32/items/Mp3Playlist_555/Daughtry-Homeacoustic.mp3",  
       "https://storage.googleapis.com/uamp/The_Kyoto_Connection_-_Wake_Up/01_-_Intro_-_The_Way_Of_Waking_Up_feat_Alan_Watts.mp3",  
       "https://aphid.fireside.fm/d/1437767933/02d84890-e58d-43eb-ab4c-26bcc8524289/d9b38b7f-5ede-4ca7-a5d6-a18d5605aba1.mp3"  
       };  
           private async void playmusic()  
           {  
               // throw new NotImplementedException();  
               await CrossMediaManager.Current.Play(Mp3UrlList);  
           }  

Best Regards,

Leon Lu

---

If the response is helpful, please click "Accept Answer" and upvote it.

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.