oink
@oink
Профессиональный веб-макакинг

Что сделать с большими аудиофайлами, чтобы их было удобно слушать на веб-странице?

Коротко суть:
есть один крохотный проектик, который я делаю для себя, чтобы закидывать на хостинг аудиокниги, потом слушать их с телефона, на котором всегда не хватает места, и он бы запоминал время, где я остановил прослушивание. Вот ссылки на сам сервис и гитхаб с исходниками:
Сервис
Github
Почти всё, что было задумано, там функционирует, кроме самого важного - работы с большими файлами. К примеру, сейчас в списке есть "Преступление и наказание". Запись длиной в 25 часов весит что-то около 700 Мб, и при попытке слушать ее (через тег ‹audio›), очевидно, возникают проблемы.

Какие проблемы:
  • Само собой, очень долгая загрузка. Даже во время подключения к интернету через провод должно пройти фиг знает сколько минут прежде, чем я смогу перемотать запись хотя бы на время 1:00:00, что ломает всю концепцию;
  • Если попробовать перемотаться куда-нибудь на середину этой здоровой дорожки, воспроизведение просто прервется, а ползалка на прогресс баре телепортируется в его конец;
  • В случае использования сервиса через Firefox вообще начинаются кары египетские: если запустить большую запись, подождать секунд пять, а потом поклацать по другим дорожкам, сначала все сломается с ошибкой "DOMException: The fetching process for the media resource was aborted by the user agent at the user's request" в консоли, а если попытаться перезагрузить страницу, то в течение нескольких минут она не будет грузиться с формулировкой о том, что соединение небезопасно.


Какие я вижу варианты:
Прежде, чем задать этот вопрос, я пару вечеров тщательно погуглил, но об этом ниже:
  • Есть такая крутая штука, как Web Audio API. Настолько крутая, что я мало что понял из документации и форумов. Как я понял, она может разбивать аудио на куски по ~45с и класть их в буфер, скармливая браузеру по мере необходимости. К сожалению для меня, похоже, что придумана она в первую очередь для того, чтобы навалить реверба прямо в браузере, поэтому полтора примера, как ей пользоваться, которые я нашел, раскрывают главным образом обработку звука в звукорежиссерском смысле. На мой взгляд, это главный кандидат, но для меня, еще толком не въехавшего даже в промисы и стрелочные функции, сложновато, чтобы просто взять и попробовать, не будучи уверенным, что оно мне поможет;
  • Howler.js, библиотека для работы с Web Audio API для таких "экспертов", как я. Звучит здорово, но почему-то мне не помогло (в самом начале документации написано, что достаточно добавить всего одну строчку в параметры при создании объекта). Может быть, я делал что-то не так, но видел на Гитхабе в issues точно такую жалобу пользователя без ответа (дал бы ссылку, но не могу найти что-то);
  • Стриминг, как у онлайн-радио. Мало что про него понял во время поисков; возможно, предыдущий пункт - частный случай этого;
  • Физическое разделение файла на куски, т.е. где-то между залитием на сервер (а то даже и до этого) и воспроизведением создание из крупного исходника файлов 01.mp3, 02.mp3 и т.д. длительностью минут по десять. Что-то подобное видел на сервисах, на которых слушал до этого, но что-то не могу натянуть на голову, как эту стопку файлов представлять и управлять ей, будто это единый файл.


В общем, ума не приложу, за что хвататься. Спасибо заранее за любую помощь!
  • Вопрос задан
  • 437 просмотров
Решения вопроса 1
bingo347
@bingo347 Куратор тега JavaScript
Crazy on performance...
Я бы пошел путем разбиения файла на куски, это кстати можно автоматизировать через ffmpeg.
Так же лучше сохранять информацию о всех кусках и их продолжительности (например в json).

Для непрерывного воспроизведения стоит создавать новый audio и вставлять его на страницу за некоторое время до окончания воспроизведения текущего куска. Отслеживать время можно через событие timeupdate.
По завершению текущего куска (событие ended) запускать следующий, а элемент audio текущего удалять из страницы.

Если нужен ползунок, эмулирующий полный файл, то можно сделать кастомный используя информацию из json. Хотя для личного пользования я лично не стал бы заморачиваться и просто вывел бы кнопки для переключения на нужный кусок, все так же на основе информации из json.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
Stalker_RED
@Stalker_RED
В можно смотреть метку времени и записывать в localStorage при паузе или при закрытии вкладки.
Или раз в 10 секунд, что проще.

При повторном включении эту метку можно установить, и браузер сделает запрос с offset.

И вот тут произойдет магия - браузер сам сделает запрос на нужный участок файла.
https://developer.mozilla.org/en-US/docs/Web/HTTP/...

Естественно сервер должен уметь отдавать файл не целиком, а нужными кусками, но в третьем тысячелетии это умеют почти все HTTP сервера.

Еще есть media fragment uri но это более новая спека, и менее распространеная.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы