如何在Angular 5中解析和播放来自数据库的Blob/Binary数据
How to parse and play Blob/Binary data from database in Angular 5
在我的 Angular 5 应用程序中，我正在检索在 SQL 服务器数据库中存储为 VARBINARY(MAX) 的数据。在数据库字段中看起来像这样：0xFEA47E451A40AE4571E51F...
当我通过 .NET WebAPI 使用 GET 调用从数据库中检索它时，它在我的 Angular 应用程序的控制台中显示如下：aFwwbUYFjhvbv=bhBGVJHvchjhcbsHKfvHbbh...
我知道此数据的 MIME 类型（它是 MP3 或 WAV）。我如何在 Angular 5 客户端中 parse/read 此数据并使用 HTML <audio> 组件播放它？
我看了几个相关的解决方案，但由于一个或另一个错误，none似乎适用，或者可能是我缺乏理解。
我的假设是 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) 但这也不起作用。我做错了什么，我怎样才能达到预期的效果？
请检查这个答案：
如果您有包含正确二进制文件的 blob 数据，您所要做的就是使用 URL.createObjectURL(blob) 创建 URL，然后将其作为源传递给音频标签。 （检查第 3 步）
如果您没有包含正确二进制文件的 blob 数据，您可以按照步骤 2 中所示创建 blob 数据。
我创建了一个 Angular example，它通过自定义管道使用 DomSanitizer。
<audio [src]="audioSource | safe:'url'" id="audio" controls #audioTag></audio>
参考：
Angular 使用参考实现：https://stackblitz.com/edit/angular-audio-blob
DomSanitizer 示例：https://medium.com/@swarnakishore/angular-safe-pipe-implementation-to-bypass-domsanitizer-stripping-out-content-c1bf0f1cc36b
希望对您有所帮助。请记住，您所需要的只是有效的 blob 数据。
在我的 Angular 5 应用程序中，我正在检索在 SQL 服务器数据库中存储为 VARBINARY(MAX) 的数据。在数据库字段中看起来像这样：0xFEA47E451A40AE4571E51F...
当我通过 .NET WebAPI 使用 GET 调用从数据库中检索它时，它在我的 Angular 应用程序的控制台中显示如下：aFwwbUYFjhvbv=bhBGVJHvchjhcbsHKfvHbbh...
我知道此数据的 MIME 类型（它是 MP3 或 WAV）。我如何在 Angular 5 客户端中 parse/read 此数据并使用 HTML <audio> 组件播放它？
我看了几个相关的解决方案，但由于一个或另一个错误，none似乎适用，或者可能是我缺乏理解。
我的假设是 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) 但这也不起作用。我做错了什么，我怎样才能达到预期的效果？
请检查这个答案：
如果您有包含正确二进制文件的 blob 数据，您所要做的就是使用 URL.createObjectURL(blob) 创建 URL，然后将其作为源传递给音频标签。 （检查第 3 步）
如果您没有包含正确二进制文件的 blob 数据，您可以按照步骤 2 中所示创建 blob 数据。
我创建了一个 Angular example，它通过自定义管道使用 DomSanitizer。
<audio [src]="audioSource | safe:'url'" id="audio" controls #audioTag></audio>
参考：
Angular 使用参考实现：https://stackblitz.com/edit/angular-audio-blob
DomSanitizer 示例：https://medium.com/@swarnakishore/angular-safe-pipe-implementation-to-bypass-domsanitizer-stripping-out-content-c1bf0f1cc36b
希望对您有所帮助。请记住，您所需要的只是有效的 blob 数据。