2

Есть html5 audio тэг в котором проигрывается mp3 с удаленного сервера (запись разговора телефонии). Подгружается и проигрывает нормально. Проблема, что в хроме невозможно перемотать запись. Поиском нашел тут предложение: Html5 <audio> не работает перемотка в google chrome

Рекомендуют добавить заголовки: header('Content-Length: ' . размер файла); header('accept-ranges: bytes');

Проблема в том, что файл-то не на моем сервере лежит :(. Можно ли с этим что-то придумать?

3 ответа 3

1

Проблема была исключительно в заголовках. Мой mp3 файл приходил с вот такими заголовками:


Content-Length: 16416
Content-Transfer-Encoding: binary
Content-Type: application/octet-stream

А вот так выглядят заголовки для корректного аудио файла:


accept-ranges: bytes
Content-Length: 163584
Content-Range: bytes 0-163583/163584
content-type: audio/mpeg

0

Можно ли с этим что-то придумать?

Если именно придумывать, то можно попытаться скачать файл в память (если cors разрешает), и создать blob-url на него, который и засунуть в тег audio. Я предположу, что хром сможет такое перематывать.

Ещё идея загнать в какой-нибудь link preload, чтобы файл был в кеше - если перемотка работает для скачанной части файла, то наличие всего файла сделает её возможной.

PS: Обе идеи - только на уровне идей, я их не проверял.

0

Можно ли с этим что-то придумать?

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

<?php

if($_GET['src']??null) {
    $src = $_GET['src'];
    $a = file_get_contents($src);
    $last_slash_pos = strrpos($src, "/");
    $file_name = substr($src, $last_slash_pos + 1); 
    $length = strlen($a);
    $range = --$length;
    header("Content-Type: audio/mpeg");
    header("Content-Disposition: attachment;filename='$file_name'");
    header("Content-Length: $length");
    header("Accept-Ranges: bytes");
    header("Content-Range: bytes 0-$range/$length");
    echo $a;    
}
4
  • Фигня. Точнее так: ты понимаешь, что Accept-Ranges: bytes браузер хочет не просто так? И когда вслед за запросом за файл прилетит запрос за куском файла с десятого до пятнадцатого мегабайта, этот код сделает что?
    – Qwertiy
    Commented 5 апр. в 16:54
  • оно просто работает, может потому что это телефония и там небольшие совсем файлы, тс кста про телефонию и писал
    – Elm Elm
    Commented 5 апр. в 18:12
  • Кто обрабатывает Accept-Ranges? Ты перемотку проверял? А на большом файле?
    – Qwertiy
    Commented 5 апр. в 18:25
  • браузер при перемотке делает еще запрос с указанием позиции, получает в ответ файл целиком из кэша и ставит чтение в желаемую позицию. все работает, с большими файлами может и не будет. не пробовал, да и нет необходимости
    – Elm Elm
    Commented 5 апр. в 19:49

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.