HowlerJS: аудио пропускается само по себе на устройствах Safari и iOS - PullRequest
Новая
       31

HowlerJS: аудио пропускается само по себе на устройствах Safari и iOS

1 голос
/ 31 октября 2019

Я занимаюсь разработкой своего рода веб-плеера и использую php-фреймворк Laravel для обработки данных плейлиста. Я создаю массив из списка воспроизведения со всей необходимой информацией. С помощью этого массива я создаю экземпляр объекта списка воспроизведения, когда его нужно воспроизвести.

Это работает плавно на Firefox и Chrome, как на настольном компьютере, так и на мобильном. Однако при тестировании в браузерах Safari или iOS возникают проблемы.

Что происходит : Звук воспроизводится нормально, однако примерно через 1-2 минуты после начала песни он возвращается на себя примерно 20-45 секунд назад. Это создает действительно раздражающую песню, где она просто повторяет одну и ту же часть песни, пока не закончится. Который это делает. Потому что, несмотря на это зацикливание назад, приложение все еще продолжает отсчитывать секунды песни. (sound.seek () продолжает набирать обороты.)

Глядя на вкладку сети, я заметил кое-что странное, в то время как другие браузеры выбирают источник звука только один раз, Safari делает это несколько раз. Это единственное ощутимое изменение, которое я заметил.

Поскольку у меня нет 10 повторений, изображение идет сюда: https://imgur.com/Y48J52g

Самое странное, что версия, размещенная на локальном компьютере, нетоже нет проблем. Так это проблема веб-сервера? Браузер? Я в растерянности.

События onloaderror и onplayerror также не запускаются, поэтому, насколько я знаю, проблем не возникает.

Приведение воющего: 

sound = data.howl = new Howl({
                src: ['./get-audio' + data.file],
                html5: true, 
//After this I instance all onX functions (onplay, onend, etc)

...

sound.play()

Затем, когда мне понадобится следующая песня, я выгружаю этот воющий экземпляр и создаю следующий. Большая часть моего кода отрегулирована на примере HowlerJS их «плеера» на случай, если вы захотите углубиться в сам код.

Как подается звук: 

    public function getAudio($map, $name)
    {
        $fileName = $map.'/'.$name;
        $file = Storage::disk('local')->get($fileName);
        $filesize = Storage::disk('local')->size($fileName);
        $size   = $filesize;
        $length = $size;
        $start  = 0;
        $end    = $size - 1;

        return response($file)
            ->withHeaders([
                'Accept-Ranges' => "bytes",
                'Accept-Encoding' => "gzip, deflate",
                'Pragma' => 'public',
                'Expires' => '0',
                'Cache-Control' => 'must-revalidate',
                'Content-Transfer-Encoding' => 'binary',
                'Content-Disposition' => ' inline; filename='.$name,
                'Content-Length' => $filesize,
                'Content-Type' => "audio/mpeg",
                'Connection' => "Keep-Alive",
                'Content-Range' => 'bytes 0-'.$end .'/'.$size,
                'X-Pad' => 'avoid browser bug',
                'Etag' => $name,
            ]);
    }

Поэтому я не уверен, почему Safari / iOS имеет проблему с размещенной версией, хотя локально это работает.

Это мой первый вопрос на этом сайте, поэтому, если вам нужна дополнительная информация, дайте мне знать.

1 Ответ

0 голосов
/ 04 ноября 2019

Я обнаружил проблему.

А именно, Safari решил, что я передаю аудиопоток, а не просто mp3-файл, заставляя его непрерывно отправлять запросы. Я решил эту проблему, подав свой аудиосигнал так: 

$path = storage_path().DIRECTORY_SEPARATOR."app".DIRECTORY_SEPARATOR."songs".DIRECTORY_SEPARATOR.$name;
$response = new BinaryFileResponse($path);
BinaryFileResponse::trustXSendfileTypeHeader();
return $response;
...