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

Question

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

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

我知道这个数据的MIME类型（它是MP3或WAV）。如何在Angular 5客户端中解析/读取此数据并使用HTML aFwwbUYFjhvbv=bhBGVJHvchjhcbsHKfvHbbh...组件播放它？

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

我的假设是Blob数据具有我可以播放的音频内容。我必须先将它转换为文件。这就是我想要的：

<audio>

在HTML中，我将

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

指定为HTML5组件的源。

audioSource

这导致<audio [src]="audioSource" type="audio/mp3"></audio> 错误。

我也尝试了net::ERR_UNKNOWN_URL_SCHEME，但这也不起作用。我做错了什么，我怎样才能达到预期效果？

Answer 1

请检查这个答案：sanitizer.bypassSecurityTrustUrl(this.audioSource)

如果你有正确二进制文件的blob数据，你所要做的就是使用https://stackoverflow.com/a/40329529/1160236创建URL，然后将其作为源传递给音频标签。 （检查步骤3）

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

我创建了一个URL.createObjectURL(blob)，通过自定义管道使用Angular example。

DomSanitizer

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

使用引用的角度实现：https://stackoverflow.com/a/40329529/1160236

DomSanitizer示例：https://stackblitz.com/edit/angular-dzkjlv

我希望这将有所帮助。只记得你需要的是有效的blob数据。