Используйте Blazor для воспроизведения локального аудио файла в браузере - PullRequest
Новая
       94

Используйте Blazor для воспроизведения локального аудио файла в браузере

0 голосов
/ 14 апреля 2020

Отказ от ответственности: я знаком с веб-технологиями, но все еще новичок ie.

Сценарий : я хочу, чтобы пользователь выбрал аудиофайл из локальной файловой системы. Затем я sh, чтобы показать небольшой элемент управления звуком на веб-странице для воспроизведения выбора и отправить аудио обратно на сервер (после нажатия кнопки).

Проблема: Использование MatBlazor FileUpload , я могу получить поток в локальный аудиофайл, но затрудняюсь, как его использовать с элементом html audio. В частности, как я могу передать аудиопоток на src в элементе?

Один простой способ сделать это в javascript - это использовать элемент <input type="file"/>, а затем использовать Filereader() для воспроизведения аудио. Примерно так показано здесь: Использование Filereader.readAsDataURL () , Использование URL.createObjectURL ()

Как это сделать в Blazor, ie играть на локальном аудиофайл в браузере с использованием потока, правильный путь?

Текущее решение проблемы : сейчас я читаю поток и преобразовываю аудио в строку base64, а затем передаю его в audio элемент.

Недостатком этого подхода является то, что для большого аудиофайла размером около 18 МБ время преобразования составляет ~ 30 секунд, а пользовательский интерфейс до сих пор застрял. Если я использую способ javascript с Interops, тогда время загрузки почти мгновенно, но тогда я должен использовать элемент input, а не компонент MatFileUpload. Другая причина наличия локального файлового потока заключается в том, что я хочу отправить этот аудиофайл на сервер для дальнейшей обработки и обнаружил, что это можно легко сделать с помощью потоков.

Код, который я использую для преобразования аудиопотока в base64 строка: 

async Task FilesReadyForContent(IMatFileUploadEntry[] files)
    {
        string base64Audio; // variable defined outside the function to update DOM
        bool loadingAudio; // defined outside
        try
        {
            file = files.FirstOrDefault();
            if (file == null)
            {
                base64Audio = "Error! Could not load file";
            }
            else
            {
                using (MemoryStream ms = new MemoryStream())
                {
                    loadingAudio = true;
                    await InvokeAsync(() => this.StateHasChanged());

                    await file.WriteToStreamAsync(ms);
                    base64Audio = System.Convert.ToBase64String(ms.ToArray());

                    loadingAudio = false;
                    await InvokeAsync(() => this.StateHasChanged());
                }
            }
        }
        catch (Exception ex)
        {
            base64Audio = $"Error! Exception:\r\n{ex.Message}\r\n{ex.StackTrace}";
        }
        finally
        {
            await InvokeAsync(() => { this.StateHasChanged(); });
        }
    }
...