HowlerJS：在Safari和iOS设备上音频跳回自身

Question

我正在开发各种网络播放器，我正在使用php框架Laravel处理播放列表的数据。我创建了一个包含所有必要信息的播放列表数组。使用此数组，我可以在需要播放播放列表对象时为其创建a叫实例。

此功能在Firefox和Chrome上均可流畅运行，无论是台式机还是移动设备。但是，在Safari或iOS浏览器上进行测试时遇到了问题。

将会发生什么：音频正常播放，但是在歌曲中大约1-2分钟播放一次，直到大约20-45秒之前。这会创建一首非常烦人的歌曲，只是重复播放歌曲的相同部分直到结束。是的。因为尽管有这种循环，该应用仍会继续增加歌曲的秒数。 （sound.seek（）不断增加。）

[查看网络标签]，我发现有些奇怪，而其他浏览器只获取一次音频源，而Safari多次这样做。这是我所注意到的唯一切实的变化。

由于我没有10张代表图像，所以在这里https://imgur.com/Y48J52g

最奇怪的是，本地托管的版本也没有问题。那么这是网络服务器问题吗？浏览器？我很茫然。

onloaderror和onplayerror事件也不会触发，因此据我所知没有任何问题。

实例中的l叫：

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

...

sound.play()

然后，每当我需要下一首歌曲时，我都会卸载此how叫实例并创建下一首。如果您想深入研究代码本身，我的大部分代码都是根据其“玩家”的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为什么在本地运行时托管版本存在问题。

这是我在此站点上的第一个问题，因此，如果您需要更多信息，请告诉我。

Answer 1

我发现了问题。

即，Safari认为我正在提供音频流，而不仅仅是mp3文件，这导致它不断发送请求。我通过提供这样的音频来解决此问题：

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