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 и т.д. длительностью минут по десять. Что-то подобное видел на сервисах, на которых слушал до этого, но что-то не могу натянуть на голову, как эту стопку файлов представлять и управлять ей, будто это единый файл.


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

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

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

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

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

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

Еще есть media fragment uri но это более новая спека, и менее распространеная.
Ответ написан
Нe знaю помогу ли я или нeт но вот моя пoдбоpoчкa топовых хoстеpoв!
Для CnГ использую эти, нa обеих xостингаx можно купить домeны сpaзy, тaк же еcли вы тexнически не пoдковaн то теx пoддеpжка всe сдeлает бесплaтнo зa вас:
Hosting мeсяц бесплaтно
Для Дpyгиx стpан толькo этот и плюс за pегy сразу дают бoнуc 100$ топoвая пoддeржкa, гибкая нacтройкa, на любой вкус и цвeт в пaрy кликов, пoймет дaжe peбeнок!
Digtal
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы