Аудио тег из источника данных (base64) загружается не полностью, пока не будет воспроизведено аудио - PullRequest
Новая
       9

Аудио тег из источника данных (base64) загружается не полностью, пока не будет воспроизведено аудио

1 голос
/ 07 апреля 2020

У меня есть приложение, которое динамически загружает аудиоклип в аудиотег во время выполнения. Это делается путем преобразования аудио в URL-адрес base64 и присвоения его атрибуту sr c тега.

Проблема заключается в том, что аудио-тег не обрабатывает данные до тех пор, пока после аудиоклип был полностью воспроизведен один раз. Эта проблема отображается в теге как (1) отсутствие длины звука, (2) отключенный таймер и (3) значок с 3 точками не отображается. Эти функции do появляются, как только аудиоклип воспроизводится впервые.

Мне нужен способ получить аудиотег для обработки аудиоклипа, как только он был назначены. Пользователь должен иметь возможность загружать аудио и перемотать вперед с помощью скруббера времени без необходимости проигрывать весь аудиоклип.

Я много раз искал решение этой проблемы. Я пробовал audioTag.preload = "auto"; и звонил audioTag.load(); после назначения sr c. Я также оставил это на 15 минут, на случай, если загрузка была слишком медленной.

Я открыт к альтернативе использованию форматирования данных base64 url, если это позволит мне обойти эту проблему .

Спасибо за любую помощь, которую вы можете предоставить.

РЕДАКТИРОВАТЬ: я вижу эту проблему в Chrome 80 и Firefox 75.

РЕДАКТИРОВАТЬ: Я генерирую аудиоклип и присвоение его аудиотэгу двумя способами: (1) из тега ввода «файл» (2) из ​​MediaRecorder (подключенного к веб-интерфейсу аудио API).

Вот загрузка тега ввода 'file': 

const reader = new FileReader();
reader.onload = () =>
{
    const audioTag = document.getElementById("audioTag");
    audioTag.preload = "auto";
    audioTag.src = reader.result;
    audioTag.load();
};
reader.readAsDataURL(fileInputTag.files[0]);

Вот загрузка MediaRecorder: 

mediaRecorder.onstop = () =>
{
    const blob = new Blob(audioChunks, {type : "audio/wav"});
    let reader = new FileReader();
    reader.onload = () =>
    {
        let audioTag = document.getElementById("rec");
        audioTag.preload = "auto";
        audioTag.src = reader.result;
        audioTag.load();
    };
    reader.readAsDataURL(blob);
};

Я только что определил, что открываем файл wav создано с дерзостью работает отлично. Эта проблема отображается только при открытии аудиофайла, сохраненного из MediaRecorder.

Я определил, что MediaRecorder на самом деле создает файлы «webM / opus», а не «wav». Исследования убедительно показывают, что «webM» является единственной опцией записи, доступной для MediaRecorder на chrome (firefox также позволяет «ogg»). Нет поддержки файлов 'WAV'. Я собираюсь опубликовать "решение" сейчас.

1 Ответ

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

Я решил, что эта проблема связана с моим использованием MediaRecorder для создания аудиоклипов, а затем для сохранения аудиоклипов в файлы. Аудио на самом деле в формате «webm / opus». MediaRecorder не поддерживает 'wav' или 'ogg' (по крайней мере, в chrome). Более того, клипы, созданные MediaRecorder, не являются доступными для поиска и могут быть очищены или загружены только после того, как они будут воспроизведены полностью хотя бы один раз, как описано в этой хромовой ошибке .

. Я буду искать для альтернативного способа записи аудио в качестве MediaRecorder в настоящее время недостаточно для моих нужд из-за (1) несовместимости форматов клипа (2).

...