在Angular 5应用程序中，我正在检索以VARBINARY(MAX)存储在SQL Server数据库中的数据。在数据库字段中看起来像这样：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)，但这也不起作用。我在做什么错了，如何获得预期的效果？
答案 0 :(得分：1)
请检查以下答案：https://stackoverflow.com/a/40329529/1160236
如果您的blob数据具有正确的二进制文件，那么您要做的就是使用URL.createObjectURL(blob)创建URL，然后将其作为源传递给音频标签。 （检查步骤3）
如果您没有带有正确二进制文件的Blob数据，则可以按照步骤2所示创建Blob数据。
我创建了一个Angular example，它通过自定义管道使用DomSanitizer。
<audio [src]="audioSource | safe:'url'" id="audio" controls #audioTag></audio>
参考：https://stackoverflow.com/a/40329529/1160236
使用参考文献https://stackblitz.com/edit/angular-dzkjlv
的角度实现DomSanitizer示例：https://medium.com/@swarnakishore/angular-safe-pipe-implementation-to-bypass-domsanitizer-stripping-out-content-c1bf0f1cc36b
我希望这会有所帮助。只要记住您需要的就是有效的Blob数据即可。