如何在 Blazor Web Assembly 客户端上使用 NAudio 组件播放 mp3 文件？

Question

一直在浏览 NAudio 文档，但我无法确定应该使用哪个播放组件在 Blazor WASM 客户端上播放 mp3 文件。 MediaFoundaitionReader 似乎需要 Windows 操作系统（Windows 音频会话 API WASAPI），如果我使用流媒体组件，那么我不会从 WASM 客户端播放音频。

目标是创建一个 Blazor WASM 客户端应用程序，可以在任何设备上使用它来播放 mp3 文件。

如何在 Blazor Web Assembly 客户端上使用 NAudio 组件播放 mp3 文件？

Answer 1

我找不到 NAudio 的解决方案，但我确实意识到我把它弄得太复杂了。 Web 浏览器内置了媒体播放功能。

我使用 HTML5 <audio> 元素创建了这个 Blazor 组件，它完全符合我的需要。

<audio id="audioCtrl" src="@AudioFilePath" controls="@ShowControls" loop="@Loop" controlsList="@controlList" >@NotSupported</audio>
<br />
<btn id="playBtn" class="btn btn-primary" @onclick="TogglePlay">@playBtnText</btn>

@code {
    [Parameter]
    public string? AudioFilePath { get; set; }
    [Parameter]
    public bool Loop { get; set; } = false;
    [Parameter]
    public bool AllowDownload { get; set; } = false;
    [Parameter]
    public bool AllowPlaybackRate { get; set; } = true;
    [Parameter]
    public bool ShowControls { get; set; } = true;
    [Parameter]
    public string NotSupported { get; set; } = "Your browser does not support HTML 5 media or it does not support this audio file type.";

    private string controlList = string.Empty;

    private bool play = true;
    private string playBtnText = "Play";

    protected override void OnInitialized()
    {
        base.OnInitialized();
        if (!AllowDownload)
        {
            controlList = controlList + "nodownload ";
        }
        if (!AllowPlaybackRate)
        {
            controlList = controlList + "noplaybackrate ";
        }
    }

    // Toggle to pause if play is true, else toggle to play
    private void TogglePlay()
    {        
        if (play)
        {
            //toggle to pause
            play = false;
            playBtnText = "Pause";            
        }
        else 
        {
            //toggle to play
            play = true;
            playBtnText = "Play";
        }
    }
}