Как правильно отдать медиа файлы для веб проигрывателей и ссылок с других разделов компьютера/сервера?

Question

[Артём Дайнов]

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

Возможно, что кому-то это покажется глупым, но мне хотелось бы знать, как решить две проблемы, которые стали перед мной.

1. Какие нужно использовать заголовки для передачи media контента на веб страницу?
У меня компьютер с windows. Использую Open server. На диске D: имеется каталог Music. В нем есть несколько музыкальных файлов. Я хочу их воспроизвести на локальном сайте. В Html audio player я вставляю такую ссылку.

<audio src='http://my-site.local/music/123' controls></audio>

Адрес, /music/123, ведет на страницу audio.php и в ней есть такой код.

<?php
function download($file) {
if (file_exists($file)) {
// сбрасываем буфер вывода PHP, чтобы избежать переполнения памяти выделенной под скрипт
// если этого не сделать файл будет читаться в память полностью!
if (ob_get_level()) {
ob_end_clean();
}
// заставляем браузер показать окно сохранения файла
// header('Content-Description: File Transfer');
// header('Content-Type: application/octet-stream');
header("content-type: audio/mpeg");
header('Accept-Ranges: bytes');
header('Content-Length: ' . filesize($file));
// читаем файл и отправляем его пользователю
if ($fd = fopen($file, 'rb')) {
while (!feof($fd)) {
print fread($fd, 1024);
}
fclose($fd);
}
exit;
}
}
download("D:/music/".$_GET['filename'].".mp3"); // Из адреса, где есть /music/123
?>

В таком варианте музыка воспроизводится корректно, но очень редко бывает так, что проигрыватель затыкается, как будто что-то докачивает, и может через минуту играть дальше.
Это дико раздражает и я подумал, что у меня может с заголовками что-то не так. Кто знает, в чем может быть причина?
Ведь, файлы, которые будут лежать у меня на сайте и будут доступны по ссылке, my-site.local/file.mp3, будет работать без всяких проблем.

2. Файлы могут содержать знак & и из-за этого могут сломаться get параметры.
По этой причине я обращаюсь к audio.php через POST. Однако, я не могу понять, как правильно получить данные, чтобы вставить их в проигрыватель.
Вод код.

$(document).ready(function(){
$.post("/audio.php",{file: 'm&m.mp3'},audioPlay);
function audioPlay(data) {
// А вот как дальше вставить это в проигрыватель, я не знаю.
audio.src = data; // Так браузер зависает.
}
});

Спасибо, что вы дочитали это до конца и надеюсь на вашу помощь в решении двух моих проблем.
С уважением - Автор топика!

Comments

[Ипатьев]

С "затыканием" я не сталкивался, но возможно оно связано с тем, что вы пишете браузеру Accept-Ranges: bytes, но не поддерживаете этот протокол в своем коде.
Но сначала надо объяснить - почему вы вообще отдаете файлы скриптом, а не ставите ссылку напрямую. потому что отдача файлов - это задача веб-сервера, а не РНР.

А вот проблема со " знаком &" явно высосана из пальца. Пора бы уже и освоить HTML на самом базовом уровне и узнать, что все управляющие символы HTML прекрасно кодируются, чтобы не "ломались get параметры" .

Answer 1

[Дмитрий]

возможно поможет

// index.php

function download(string $filePath): void
{
    if (!headers_sent()) {
        ob_end_clean();
    }

    if (!file_exists($filePath)) {
        throw new InvalidArgumentException('File not exists');
    }

    $filesize = filesize($filePath);
    $fileObject = new SplFileObject($filePath, 'rb');

    header('content-type: audio/mpeg');

    $range = 0;

    if (isset($_SERVER['HTTP_RANGE'])) {
        $range = $_SERVER['HTTP_RANGE'];
        $range = str_replace('bytes=', '', $range);
        [$range] = explode('-', $range);

        if (!empty($range)) {
            $fileObject->fseek($range);
        }
    }

    if ($range) {
        header($_SERVER['SERVER_PROTOCOL'] . ' 206 Partial Content');
    } else {
        header($_SERVER['SERVER_PROTOCOL'] . ' 200 OK');
    }

    header('Accept-Ranges: bytes');
    header('Content-Description: inline; File Transfer');
    header('Content-Disposition: attachment; filename="' . basename($fileObject->getBasename()) . '";', false);
    header('Content-Transfer-Encoding: binary');
    header('Content-Length: ' . ($filesize - $range));

    if ($range) {
        header('Content-Range: bytes ' . $range . '-' . ($filesize - 1) . '/' . $filesize);
    }

    header('Connection: close');

    $speed = 100;

    while (!$fileObject->eof() && connection_status() === 0) {
        echo $fileObject->fread(1024 * $speed);
        flush();
        #sleep(1);  // разкоментирование приведет к ограничению скорости в 100 kb
    }
}

download('./1.mp3');

<span class="green"><audio controls><source src="http://localhost/dnl/index.php"></audio></span>

spoiler

Request URL: http://localhost/dnl/index.php
Request Method: GET
Status Code: 206 Partial Content
Remote Address: 127.0.0.1:80
Referrer Policy: strict-origin-when-cross-origin
Accept-Ranges: bytes
Connection: close
Content-Description: inline; File Transfer
Content-Disposition: attachment; filename="1.mp3";
Content-Length: 168977156
Content-Range: bytes 2097152-171074307/171074308
Content-Transfer-Encoding: binary
Content-Type: audio/mpeg
Date: Sat, 15 Apr 2023 19:03:29 GMT
Server: Apache
X-Content-Type-Options: nosniff
Accept: */*
Accept-Encoding: identity;q=1, *;q=0
Accept-Language: ru-RU,ru;q=0.9,en-US;q=0.8,en;q=0.7,nb;q=0.6
Connection: keep-alive
DNT: 1
Host: localhost
Range: bytes=2097152-
Referer: http://localhost/dnl/index.html
sec-ch-ua: "Google Chrome";v="111", "Not(A:Brand";v="8", "Chromium";v="111"
sec-ch-ua-mobile: ?0
sec-ch-ua-platform: "Windows"
Sec-Fetch-Dest: video
Sec-Fetch-Mode: no-cors
Sec-Fetch-Site: same-origin
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/111.0.0.0 Safari/537.36

Comments

[Артём Дайнов]

Спасибо! Я попробую ваш вариант. На данный момент я обращаюсь к symlink

Answer 2

[pantsarny]

А зачем тут php?
Если у вас nginx - используйте alias или root для папки с контентом

Comments

[Артём Дайнов]

Я незрячий человек. Программу пишу для себя, чтобы было лично мне удобно. Решил обратиться именно к php, так как у меня на android и windows стоит связка apache, php. Если я напишу свой скрипт, он одинаково будет работать на android и windows. Нужно меньше различных настроек. Я создал веб проводник по файлам и через него пытаюсь воспроизводить видео и аудио.
У вас есть вопрос, а зачем такое?
Ответ прост. Я создал веб приложение, которое управляет моими музыкальными файлами и добавил в него функции, которые есть не во-всех обычных проигрывателей, плюс сделал привязку к локации и погоде. То есть, если на улице дождь то музыка должна настраивать меня на раздумье и работу. Если солнце, то музыка меня должна настраивать на что-то другое. Конечно, пришлось вручную прописывать бпм для каждой композиции, но это стоило...
Но главная функция такого проигрывателя в том, что он плавно переключает композиции и нет тишины между ними.
Nginx мне не подходит ибо музыкальные файлы могут не только быть в D:/music.
По этой причине я хочу правильно настроить заголовки.

[pantsarny]

Artem Mamaev, я понял
если у вас динамическое количество папок и они расположены в разных местах файловой системы - вы делаете все правильно
вам необходимо добавить в скрипт поддержки Accept-Ranges: bytes это позволит реализовать проматывание.

[Артём Дайнов]

pantsarny, Огромное спасибо за вашу помощь.

Answer 3

[Stalker_RED]

1. Вы можете в конфиге nginx указать что при запросе mysite.loc надо искаьт файлы в d:\music
2. вы можете на уровне операционной системы сделать симлинк
mklink /d c:\work'mysite\music d:\music
3. вы можете вот ака как у вас сейчас выдавать через PHP.
Плюсы - легко можно добавить дополнительного кода - проверки прав доступа, статистику собрать, биллинг прикрутить.
Минус один, но очень заметный при большом количестве пользователей - грузите процессор лишний раз.

знак & и из-за этого могут сломаться get параметры

экранирование? не, не слышал.

Comments

[Артём Дайнов]

Я незрячий человек. Программу пишу для себя, чтобы было лично мне удобно. Решил обратиться именно к php, так как у меня на android и windows стоит связка apache, php. Если я напишу свой скрипт, он одинаково будет работать на android и windows. Нужно меньше различных настроек. Я создал веб проводник по файлам и через него пытаюсь воспроизводить видео и аудио.
У вас есть вопрос, а зачем такое?
Ответ прост. Я создал веб приложение, которое управляет моими музыкальными файлами и добавил в него функции, которые есть не во-всех обычных проигрывателей, плюс сделал привязку к локации и погоде. То есть, если на улице дождь то музыка должна настраивать меня на раздумье и работу. Если солнце, то музыка меня должна настраивать на что-то другое. Конечно, пришлось вручную прописывать бпм для каждой композиции, но это стоило...
Но главная функция такого проигрывателя в том, что он плавно переключает композиции и нет тишины между ними.
Nginx мне не подходит ибо музыкальные файлы могут не только быть в D:/music.
По этой причине я хочу правильно настроить заголовки.

На счет экранирования почему-то я не подумал, ведь это может решить мою проблему и тогда мне не нужно обращаться через post.
Приложение лично для меня, но может кто-то через домашнюю сеть воспользуется моим приложением на пк со своего смартфона.

Ранее я использовал вариант копирования файла с диска D: в папку сайта и выдавал проигрывателю, но сейчас решил отказаться от такого варианта.
В общем, теперь ищу вариант, как отдать файл таким образом, как я привел в примере. Ведь как-то отдают же файлы музыкальные сайты.

[Stalker_RED]

Artem Mamaev, у музыкальных сайтов много слушателей, большая нагрузка. Поэтому они отдают специальным стриминговым софтом. Вот список такого софта на википедии, там больше полусотни наименований.
Впрочем, для nginx есть стриминговый плагин, который тоже неплох, особенно если у вас единицы пользователей, а не тысячи.

Если у вас музыка в разных папках - посмотрите внимателнее про симлинки (символические ссылки). Для всех программ это выгляди как будто вы скопировали папка в другое место, при этом по факту копирование не происходит, а создается символическая ссылка. Чем-то напоминает ярлыки в windows.

Да, экранирование решит проблему с "неправильными" ссылками в url, в общем-то оно для этого и придумано. В php есть для этого специальные функции urlencode urldecode, и обратите внимание, их принципы кодирования немного отличаются от аналогичных функций в javascript, можно получить трудноотслеживаемые баги если делать кодирование через js, а раскодировать через php, например.

Чтобы сменить трек на стороне браузера достаточно сменить src и вызвать у плеера метод play()
Если повесить обработчик на события canplay (для файлов) и canplaythrough (для стримов) то можно просто менять src и плеер будет включать проигрование автоматически.

Вот пример минималистичного плеера где в список id=playlist выводится список треков, при клике на трек меняется src, и дальше срабатывает автопроизведение.

<audio id="player"></audio>
<ul id="playlist">
  <li data-src="https://freesound.org/data/previews/447/447951_4716066-lq.mp3">tarck1</li>
  <li data-src="https://freesound.org/data/previews/447/447896_7020227-lq.mp3">tarck2</li>
  <li data-src="https://freesound.org/data/previews/447/447949_9080507-lq.mp3">tarck3</li>
</ul>
<script>
player.addEventListener("canplay", myAutplay);
player.addEventListener("canplaythrough", myAutplay);

function myAutplay () {
  player.play();
}

playlist.addEventListener('click', function(evt) {
  const track = evt.target.closest('li[data-src]');
  if (track) {
    player.src = track.dataset.src;
  }
});

</script>

[Stalker_RED]

Artem Mamaev, сюда-же можно добавить включение следующего трека, если текущий закончился
слушаем событие ended, включаем следующий трек.

[Артём Дайнов]

Stalker_RED, Когда-то я такой проигрыватель делал. Но перед мной стояла другая задача. К примеру.
Мы имеем список композиций.
Их нужно переключать плавно одну за другой, но не использовать событие ended, так как оно делает тишину между композициями. Для этого я написал класс, в котором использую вызов два раза new Audio() и уже ими манипулирую переключение композиций. Всегда шесть секунд до конца трека начинается переключение и в этот момент один audio затихает, а другой наростает или резко начинает играть.

[Stalker_RED]

Artem Mamaev, да, конечно, можно и так. Тогда не совсем понятно с чем у вас сложности - спецсимволы в ссылках можно экранировать, папки смонтировать через симлинки или прописать прямо в конфиге вебсервера.

Если всетаки решите отдавать через php, то учитывайте, что браузер может запросить не весь файл, а используя заголовки range запросить отдельные части, и придется этот функционал писать тоже. а в вебсервере он уже реализован.

Я отдаю аудио как-то так:
У меня, в случае, когда нужно отдавать через php заголовки отдаются так

function sendHeaders($size, $time, $is_partial, $begin, $end) {
    header('Content-Type: audio/mpeg');
    header('Cache-Control: no-cache, public, must-revalidate, max-age=0');
    header('Content-Transfer-Encoding: binary');
    header('Content-Disposition: inline;filename="test.mp3"');
    header("Last-Modified: $time");
    header('Pragma: no-cache');
    header("Accept-Ranges: bytes 0-$size");

    if ($is_partial) {
        if ($end - $begin < 1) {
            header("Content-Range: bytes */$size");
            header('HTTP/1.1 416 Range Not Satisfiable');
            exit;
        }
        header('HTTP/1.1 206 Partial Content');
        header("Content-Range: bytes $begin-$end/$size");
        header('Content-Length:' . (($end - $begin) + 1));
    } else {
        header('Content-length: '.$size);
        header('HTTP/1.1 200 OK');
    }
}

[Артём Дайнов]

Stalker_RED, Огромное спасибо! Я попробую ваш код и попробую обратиться к symlink.

[Stalker_RED]

Artem Mamaev, если вы сделаете через symlink, то вам не понадобится отдавать файлы через php. максимум - раздавать список файлов, если стандартный index чем-то не устраивает.