求助：在Blazor中播放存储为byte[]格式的MP3文件的方案

针对你在Blazor中播放数据库存储的byte[]格式MP3的需求，提供两种可行方案：

方案一：客户端直接转换为Data URL（适合小音频文件） #

将byte[]转换为base64编码的Data URL，直接绑定到<audio>标签的src属性，无需额外后端端点。

组件代码示例 #

@if (!string.IsNullOrEmpty(_audioDataUrl))
{
    <audio controls autobuffer autoplay>
        <source src="@_audioDataUrl" type="audio/mpeg" />
    </audio>
}

@code {
    private string? _audioDataUrl;
    // 从数据库加载的MP3字节数组
    private byte[]? _mp3Bytes;

    protected override async Task OnInitializedAsync()
    {
        // 替换为实际从数据库读取MP3的逻辑
        _mp3Bytes = await GetMp3FromDatabaseAsync(123);
        
        if (_mp3Bytes != null)
        {
            // 将byte[]转为base64，构造Data URL
            string base64Str = Convert.ToBase64String(_mp3Bytes);
            _audioDataUrl = $"data:audio/mpeg;base64,{base64Str}";
        }
    }

    private Task<byte[]> GetMp3FromDatabaseAsync(int rowId)
    {
        // 模拟数据库查询，实际替换为你的数据访问逻辑
        return Task.FromResult(new byte[0]);
    }
}

优缺点 #

• 优势：无需额外后端接口，实现简单
• 劣势：大文件会生成过长的base64字符串，占用客户端内存，影响加载性能

方案二：通过后端API端点返回音频文件（适合大音频文件） #

和你在Razor Pages中的思路类似，创建后端API端点读取数据库中的byte[]并返回FileContentResult，然后Blazor组件的<audio>标签指向该端点。

步骤1：添加后端API端点 #

以Blazor Web App的Server项目为例，在Program.cs中添加最小API：

// 假设你有数据访问仓储接口IMp3Repository
app.MapGet("/api/audio/mp3/{rowId}", async (int rowId, IMp3Repository mp3Repo) =>
{
    var mp3Bytes = await mp3Repo.GetMp3ById(rowId);
    if (mp3Bytes == null)
    {
        return Results.NotFound();
    }
    // 返回MP3文件流
    return Results.File(mp3Bytes, "audio/mpeg");
});

步骤2：Blazor组件中使用 #

<audio controls autobuffer autoplay>
    <source src="@$"/api/audio/mp3/{CurrentRowId}"" type="audio/mpeg" />
</audio>

@code {
    // 接收要播放的音频ID
    [Parameter]
    public int CurrentRowId { get; set; }
}

优缺点 #

• 优势：流式传输，不会一次性加载大文件到客户端内存，性能更优
• 劣势：需要额外编写后端API端点逻辑

内容的提问来源于stack exchange，提问作者robert