如何在 Angular 5 中解析和播放数据库中的 Blob/二进制数据

Posted 2023-03-22

【中文标题】如何在 Angular 5 中解析和播放数据库中的 Blob/二进制数据

【英文标题】：How to parse and play Blob/Binary data from database in Angular 5

【发布时间】：2019-08-15 13:08:55

【问题描述】：

在我的 Angular 5 应用程序中，我正在检索在 SQL Server 数据库中存储为 VARBINARY(MAX) 的数据。在数据库字段中是这样的：0xFEA47E451A40AE4571E51F...

当我通过 .NET WebAPI 使用 GET 调用从数据库中检索它时，它在我的 Angular 应用程序的控制台中显示如下：aFwwbUYFjhvbv=bhBGVJHvchjhcbsHKfvHbbh...

我知道该数据的 MIME 类型（MP3 或 WAV）。如何在 Angular 5 客户端中解析/读取这些数据并使用 html <audio> 组件播放它？

我查看了几个相关的解决方案，但由于一个或另一个错误，似乎没有一个适用，或者我可能缺乏理解。

我的假设是 Blob 数据具有我可以播放的音频内容。我必须先将其转换为文件。这就是我正在尝试的：

const file = new File([blobData], "audio.mp3")
this.audiosource = URL.createObjectURL(file)

在 HTML 中，我将 audioSource 指定为 HTML5 组件的来源。

<audio [src]="audioSource" type="audio/mp3"></audio>

这会导致net::ERR_UNKNOWN_URL_SCHEME 错误。

我也试过sanitizer.bypassSecurityTrustUrl(this.audioSource)，但这也不起作用。我做错了什么，我怎样才能得到预期的效果？

【参考方案1】：

请检查这个答案：https://***.com/a/40329529/1160236

如果您有带有正确二进制文件的 blob 数据，您所要做的就是使用 URL.createObjectURL(blob) 创建 URL，然后将其作为源传递给音频标签。 （检查步骤 3）

如果您没有包含正确二进制文件的 blob 数据，您可以创建 blob 数据，如步骤 2 所示。

我创建了一个Angular example，它通过自定义管道使用DomSanitizer。

<audio [src]="audioSource | safe:'url'" id="audio" controls #audioTag></audio>

参考：https://***.com/a/40329529/1160236

使用参考的角度实现：https://stackblitz.com/edit/angular-audio-blob

DomSanitizer 示例：https://medium.com/@swarnakishore/angular-safe-pipe-implementation-to-bypass-domsanitizer-stripping-out-content-c1bf0f1cc36b

我希望这会有所帮助。请记住，您只需要有效的 blob 数据即可。

【讨论】：

我在赏金开始后不到 30 分钟就发现了这一点！ :D 尽管如此，感谢您提供 StackBlitz 示例，这正是我最终所做的。我只错过了atob(base64) 部分。我很快就会给你赏金。