Blazor中与js互动其实已经做的很方便很简单了，所以audio播放器也是相当的简单做起来，代码如下：
先写一个audio播放器组件，内容如下：

        @inject IJSRuntime JsRuntime
        <audio id="zmjhdaudio" style="display:none;" @onended="PlayNext" autoplay src="/Music/@WebUtility.UrlEncode(CurrentAudio!.Name).Replace("+", "%20")"></audio>
        <MudPaper Class="rounded" Style="background-color:transparent;position: fixed;width:240px;right: 8px;bottom: 8px;-webkit-transform: translate(-8px, -8px);transform: translate(-8px, -8px);">
            <MudToolBar Dense="true" Class="my-2">
            <MudAvatar Size="Size.Large">
            <MudImage Src="/Images/icon.jpg"></<MudImage>
                </<MudAvatar>
            <div style="display:inline-block">
            <MudTooltip Arrow="true" Color="Color.Default" Placement="Placement.Top" Text="@CurrentAudio!.Name">
            <MudText Typo="Typo.h6" Style="max-width:120px;white-space:nowrap;overflow-x:auto;overflow-y:hidden">@CurrentAudio!.Name</<MudText>
                    </<MudTooltip>
            <MudText Typo="Typo.body2">@CurrentAudio!.Extension</<MudText>
                </<div>
            </<MudToolBar>
            <MudToolBar Dense="true" Class="d-flex justify-space-around flex-grow-1 gap-4">
            <MudTooltip Arrow="true" Color="Color.Tertiary" Placement="Placement.Top" Text="逆序播放上一曲">
            <MudFab Size="Size.Small" Color="Color.Tertiary" OnClick="PlayPrev" StartIcon="@Icons.Material.Filled.SkipPrevious" />
                </<MudTooltip>
            <MudTooltip Arrow="true" Color="Color.Secondary" Placement="Placement.Top" Text="暂停/播放">
            <MudFab Size="Size.Small" Color="Color.Secondary" OnClick="PlayPause" StartIcon="@Icons.Material.Filled.PlayCircleOutline" />
                </<MudTooltip>
            <MudTooltip Arrow="true" Color="Color.Success" Placement="Placement.Top" Text="随机播放下一曲">
            <MudFab Size="Size.Small" Color="Color.Success" OnClick="PlayNext" StartIcon="@Icons.Material.Filled.SkipNext" />
                </<MudTooltip>
            </<MudToolBar>
        </<MudPaper>
        @code {
            /// <summary>
            /// 当前的所有曲目
            /// </<summary>
            private System.IO.FileInfo[]? mcs;
            private System.IO.FileInfo? CurrentAudio => currentAudioId >= 0 && currentAudioId < mcs?.Length ? mcs?[currentAudioId] : null;
            private int currentAudioId = 0;
            private Random audioRd = new Random();
            /// <summary>
            /// 标记当前是否正在播放中
            /// </<summary>
            private bool onPlay = true;
            /// <summary>
            /// 顺序播放上一曲
            /// </<summary>
            private void PlayPrev()
            {
                    currentAudioId--;
                    if (currentAudioId < 0) currentAudioId = mcs!.Length;
                    onPlay = true;
                    this.StateHasChanged();
            }
            /// <summary>
            /// 随机播放下一曲
            /// </<summary>
            private void PlayNext()
            {
                    currentAudioId = mcs!.Length < 1 ? 0 : audioRd.Next(mcs!.Length);
                    onPlay = true;
                    this.StateHasChanged();
            }
            /// <summary>
            /// 播放和暂停
            /// </<summary>
            private async void PlayPause()
            {
                    onPlay = !onPlay;
                    await JsRuntime.InvokeVoidAsync("ZmjAudioSetPlay", "zmjhdaudio", onPlay);
            }
            protected override void OnInitialized()
            {
                    var dic = new System.IO.DirectoryInfo($"{Environment.CurrentDirectory}\\wwwroot\\Music");
                    mcs = dic.GetFiles("*", SearchOption.TopDirectoryOnly);
                    currentAudioId = mcs!.Length < 1 ? 0 : audioRd.Next(mcs.Length);
                    base.OnInitialized();
            }
            protected override async Task OnAfterRenderAsync(bool firstRender)
            {
                    await base.OnAfterRenderAsync(firstRender);
                    if (!firstRender) return;
                    await JsRuntime.InvokeVoidAsync("import", "/SmallAudio/zmjaudio.js");
            }
        }
    

然后再写一个zmjaudio.js代码放在wwwroot文件夹下的某个位置，代码如下：

        window.ZmjAudioSetPlay = function (audioid, pstatue) {
            var audioElement = document.getElementById(audioid);
            if (pstatue == true) {
                audioElement.play()
            }
            else {
                audioElement.pause()
            }
        };
    

然后在需要的地方直接调用这个组件即可，比如：

        <ZmjAudio></ZmjAudio>