How to parse and play Blob/Binary data from database in Angular 5

1
votes

In my Angular 5 application, I am retrieving data which is stored as VARBINARY(MAX) in SQL Server database. It looks like this in the database field: 0xFEA47E451A40AE4571E51F...

When I retrieve it from database using a GET call via .NET WebAPI, it is shown like this in console from my Angular app: aFwwbUYFjhvbv=bhBGVJHvchjhcbsHKfvHbbh...

I know the MIME type of this data (it is either MP3 or WAV). How can I parse/read this data in Angular 5 client and play it using an HTML <audio> component?

I have looked at several related solutions but none seem to be applicable due to one error or another, or perhaps there is a lack of understanding on my part.

My assumptions are that Blob data has the audio content which I can play. I have to convert it to a File first. This is what I am trying:

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

And in the HTML, I assign audioSource as the source of an HTML5 component.

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

This results in a net::ERR_UNKNOWN_URL_SCHEME error.

I tried sanitizer.bypassSecurityTrustUrl(this.audioSource) as well but this doesn't work either. What am I doing wrong, and how can I get the intended effect?

1
sql-serverangularangular5blobhtml5-audio

1 Answers

2
votes

please check this answer : https://stackoverflow.com/a/40329529/1160236

if you have blob data with correct binaries all you have to do is to create URL using URL.createObjectURL(blob) then pass it to the audio tag as a source. (check step-3)

if you don't have blob data with correct binaries you can create blob data as shown in step-2.

I have created an Angular example which uses DomSanitizer via a custom pipe.

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

Reference : https://stackoverflow.com/a/40329529/1160236

Angular implementation using reference : https://stackblitz.com/edit/angular-dzkjlv

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

I hope this will help. just remember all you need is valid blob data.