maui 开发音乐播放APP （1）

最新推荐文章于 2024-10-21 11:57:02 发布

原创最新推荐文章于 2024-10-21 11:57:02 发布 · 803 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#android #c#

app 开发专栏收录该内容

48 篇文章

订阅专栏

.NETMAUI的MediaElement是一个用于处理音频和视频内容的关键控件，开发者可以使用C#和XAML快速集成媒体播放功能。通过简单的API，开发者可以实现一次编写，跨平台运行的多媒体应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

.NET MAUI（.NET Multi-platform App UI）是由微软推出的一种多平台应用程序开发框架，用于创建可以在不同操作系统上运行的跨平台移动应用、桌面应用和Web应用。它基于.NET平台，允许开发者使用C#和XAML等熟悉的技术来构建应用程序，同时实现了一次编码、多处运行的目标。

MediaElement 是.NET MAUI框架中的一个重要控件，用于处理多媒体内容。它主要用于播放音频和视频文件，提供了一种简单的方式来集成媒体播放功能到.NET MAUI应用程序中。通过 MediaElement，开发者可以轻松地嵌入音频和视频文件，实现音视频的播放功能，而无需处理复杂的底层实现细节。

总体来说，MediaElement 是.NET MAUI中用于处理音视频内容的控件，为开发者提供了方便的接口来实现媒体播放功能。

引入MediaElement ：

在这里插入图片描述

代码说明：

MauiProgram.cs 改为以下 namespace 是你自己项目的，不用改

using CommunityToolkit.Maui;
using Microsoft.Extensions.Logging;

namespace samplevideo;
public static class MauiProgram
{
    public static MauiApp CreateMauiApp()
    {
        var builder = MauiApp.CreateBuilder();
        builder
            .UseMauiApp<App>()
            .ConfigureFonts(fonts =>
            {
                fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
                fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
            })
            .UseMauiCommunityToolkitMediaElement(); // 将.UseMauiCommunityToolkit() 移至 .UseMauiApp<App>() 之后

#if DEBUG
        builder.Logging.AddDebug();
#endif

        return builder.Build();
    }
}

MainPage.xaml代码如下：

<?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"
             xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
             x:Class="samplevideo.MainPage">

    <ScrollView>
        <VerticalStackLayout
            Spacing="25"
            Padding="30,0"
            VerticalOptions="Center">

            <!--<toolkit:MediaElement x:Name="mediaElement" WidthRequest="400" HeightRequest="300"
                                  Source="embed://AndroidVideo.mp4"/>-->

       
            <toolkit:MediaElement x:Name="mediaElement"   
                     
                           ShouldAutoPlay="True"
                           Aspect="AspectFill"
                         Source="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"/>


            <Button
                x:Name="CounterBtn"
                Text="播放"
                SemanticProperties.Hint="Counts the number of times you click"
                Clicked="OnCounterClicked"
                HorizontalOptions="Center" />

        </VerticalStackLayout>
    </ScrollView>
</ContentPage>

要加上这一行代码： xmlns:toolkit=“http://schemas.microsoft.com/dotnet/2022/maui/toolkit”， Aspect="AspectFill"自动缩放视频，Source=“embed://samp.mp4” 是播放本地视频。放在如下目录中：在这里插入图片描述

namespace samplevideo
{
    public partial class MainPage : ContentPage
    {
      
        public MainPage()
        {
            InitializeComponent();
        }

        private void OnCounterClicked(object sender, EventArgs e)
        {
            if (mediaElement.CurrentState == CommunityToolkit.Maui.Core.Primitives.MediaElementState.Playing)
            {
                mediaElement.Pause();
                CounterBtn.Text = "暂停";
            }
               
            else if (mediaElement.CurrentState == CommunityToolkit.Maui.Core.Primitives.MediaElementState.Paused)
            {
                mediaElement.Play();
                CounterBtn.Text = "播放";
            }
              
        }
    }

}