Как анализировать и воспроизводить двоичные / двоичные данные из базы данных в Angular 5 - PullRequest
Новая
       14

Как анализировать и воспроизводить двоичные / двоичные данные из базы данных в Angular 5

1 голос
/ 25 марта 2019

В моем приложении Angular 5 я получаю данные, которые хранятся как VARBINARY(MAX) в базе данных SQL Server.В поле базы данных это выглядит так: 0xFEA47E451A40AE4571E51F...

Когда я извлекаю его из базы данных с помощью вызова GET через .NET WebAPI, это выглядит так в консоли из моего приложения 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 Ответ

1 голос
/ 27 марта 2019

пожалуйста, проверьте этот ответ: https://stackoverflow.com/a/40329529/1160236

если у вас есть данные BLOB-объектов с правильными двоичными файлами, все, что вам нужно сделать, это создать URL-адрес с помощью URL.createObjectURL(blob), а затем передать его в аудиотэг в качестве источника. (проверьте шаг 3)

если у вас нет данных BLOB-объектов с правильными двоичными файлами, вы можете создать данные BLOB-объектов, как показано на шаге 2.

Я создал Angular пример , который использует 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-объектов.

...