<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
        x:Class="AvaloniaUI.CodePlayback"
        Title="CodePlayback">
    <Grid Margin="10" RowDefinitions="auto,auto,auto,auto">
        <!-- 播放器 -->
        <MediaElement x:Name="media"
                         Source="avares://AvaloniaUI/Resources/Sounds/test.mp3"
                         AutoPlay="False"
                         Stretch="Uniform"/>

        <!-- 按钮 -->
        <StackPanel Grid.Row="1" Orientation="Horizontal" Spacing="6" Margin="0,8,0,0">
            <Button Click="CmdPlay_Click" Padding="8,4">Play</Button>
            <Button Click="CmdStop_Click" Padding="8,4">Stop</Button>
            <Button Click="CmdPause_Click" Padding="8,4">Pause</Button>
            <ToggleSwitch Content="Mute"
                          Margin="10,0,0,0"
                          IsChecked="{Binding ElementName=media, Path=IsMuted, Mode=TwoWay}"/>
        </StackPanel>

        <!-- 参数区 -->
        <Grid Grid.Row="2" Margin="0,10,0,0"
              RowDefinitions="auto,auto,auto"
              ColumnDefinitions="auto,*">

            <TextBlock Grid.Row="0" Grid.Column="0" Margin="0,4,8,4" Text="Volume:"/>
            <Slider Grid.Row="0" Grid.Column="1"
                    Minimum="0" Maximum="100"
                    Value="{Binding ElementName=media, Path=Volume, Mode=TwoWay}"/>

            <TextBlock Grid.Row="1" Grid.Column="0" Margin="0,4,8,4" Text="Speed:"/>
            <Slider Grid.Row="1" Grid.Column="1"
                    Minimum="0.5" Maximum="2"
                    Value="{Binding ElementName=media, Path=Rate, Mode=TwoWay}"/>

            <TextBlock Grid.Row="2" Grid.Column="0" Margin="0,14,8,4" Text="Seek To:"/>
            <Slider x:Name="sliderPosition"
                    Grid.Row="2" Grid.Column="1"
                    Margin="0,14,0,0"
                    Minimum="0"
                    Maximum="{Binding ElementName=media, Path=Length}"
                    Value="{Binding ElementName=media, Path=Time, Mode=TwoWay}"/>
        </Grid>

        <!-- 时间显示 -->
        <TextBlock Grid.Row="3" x:Name="lblTime" Margin="0,10,0,0"/>
    </Grid>
</Window>

using Avalonia;
using Avalonia.Controls;
using Avalonia.Interactivity;
using Avalonia.Markup.Xaml;
using System;

namespace AvaloniaUI;

public partial class CodePlayback : Window
{
    public CodePlayback()
    {
        InitializeComponent();
        // 实时刷新时间文本
        media.TimeChanged += (_, _) => UpdateTimeText();
        media.LengthChanged += (_, _) => UpdateTimeText();
        media.Playing += (_, _) => UpdateTimeText();
        media.Stopped += (_, _) => UpdateTimeText();

        Closed += (_, _) => media.Dispose();
    }
    private void CmdPlay_Click(object? sender, RoutedEventArgs e) => media.Play();
    private void CmdPause_Click(object? sender, RoutedEventArgs e) => media.Pause();
    private void CmdStop_Click(object? sender, RoutedEventArgs e) => media.Stop();

    private void UpdateTimeText()
    {
        var pos = TimeSpan.FromMilliseconds(Math.Max(0, media.Time));
        var len = TimeSpan.FromMilliseconds(Math.Max(0, media.Length));
        lblTime.Text = $"{pos:mm\\:ss} / {len:mm\\:ss}";
    }
}