在 Blazor 中播放 MP3 文件

Question

我的 mp3 文件存储在 SQL 数据库中，并作为 byte[] 数据加载到客户端应用程序中。对于 Razor Pages，解决方案是使用 HTML

<audio>

元素将源属性设置为内存中的字节数组。这是使用 [email protected]() 完成的。该 url 返回 FileContentResult 并且音频元素播放该文件。我找不到在 Blazor 中播放 mp3 的解决方案，其中源是字节数组。 这是 Razor Pages 标记：

<audio controls autobuffer="autobuffer" autoplay="autoplay">
    <source src="@Url.Page("", "Mp3Data", new { rowid = Model.Rowid })" type="audio/mpeg" />
</audio>

Answer 1

看起来您要问的是如何在使用 html

audio

标签时传递授权标头。 Here您可以看到此问题也适用于具有指向安全端点的 src 属性的

img

元素。我链接的问题中建议的解决方案也可以应用于您的场景。例如，您可以使用 url 中的查询字符串参数传递访问令牌。然后，您的服务器可以识别这些请求并从查询字符串中读取令牌。 SignalR 使用此方法并在使用 WebSockets 或 ServerSentEvents 时在查询字符串中发送访问令牌。您可以在文档中看到它是如何在服务器端处理的：

builder.Services.AddAuthentication(options =>
{
    // ...
}).AddJwtBearer(options =>
  {
      options.Authority = "Authority URL"; // TODO: Update URL

      options.Events = new JwtBearerEvents
      {
          OnMessageReceived = context =>
          {
              var accessToken = context.Request.Query["access_token"];

              // If the request is for your audio endpoint...
              var path = context.HttpContext.Request.Path;
              if (!string.IsNullOrEmpty(accessToken) &&
                  (path.StartsWithSegments("/api/myMp3Endpoint")))
              {
                  // Read the token out of the query string
                  context.Token = accessToken;
              }
              return Task.CompletedTask;
          }
      };
  });

如果对于您的环境来说这被认为是安全风险，那么您的另一个选择是使用

HttpClient

将音频作为字节数组获取，将其转换为 base64 并将其嵌入到您的音频元素中。

@inject HttpClient Http

<audio>
    <source src="@($"data:audio/mp3;base64,{_base64EncodedAudio}")" />
</audio>

@code {
    private string _base64EncodedAudio;

    private async Task GetAudio()
    {
        var audioBytes = await Http.GetByteArrayAsync(audioUrl);                
        _base64EncodedAudio = Convert.ToBase64String(audioBytes);
    }
}

使用

HttpClient

您可以传递所需的任何授权标头。