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

我正在开发一个web播放器，我正在使用php框架Laravel来处理播放列表的数据。我创建了一个包含所有必要信息的播放列表数组。有了这个数组，当播放列表对象需要播放时，我会制作一个嚎叫实例

这在Firefox和Chrome上都能流畅地工作，无论是在桌面上还是在移动设备上。然而，在Safari或iOS浏览器上测试时，我遇到了一些问题

发生了什么：音频在歌曲开始1-2分钟左右正常播放，但它会在20-45秒前自行循环播放。这就产生了一首非常烦人的歌曲，它只是重复歌曲的同一部分，直到结束。确实如此。因为尽管有这样的循环，应用程序仍然在继续滴答着歌曲的秒数。（sound.seek（）一直在响。）

查看“网络”选项卡，我注意到一些奇怪的事情，而其他浏览器只获取一次音频源，Safari则多次这样做。这是我注意到的唯一切实的变化

因为我没有10个代表，所以这里有：

最奇怪的是，本地托管的版本也没有问题。那么这是一个Web服务器问题吗？浏览器我不知所措

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()

然后，每当我需要下一首歌时，我卸载这个howl实例并创建下一首。 我的大部分代码都是根据HowlerJS的“player”示例进行调整的，以防您想深入研究代码本身

如何提供音频：

公共函数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； 返回响应（$file） ->带标题([ “接受范围”=>“字节”， “接受编码”=>“gzip，泄气”， “Pragma”=>“public”， “Expires”=>“0”， “缓存控制”=>“必须重新验证”， '内容传输编码'=>'二进制'， “内容处置”=>“内联；文件名=”。$name， “内容长度”=>$filesize， “内容类型”=>“音频/mpeg”， “连接”=>“保持活动状态”， '内容范围'=>'字节0-'.$end.'/'.$size， “X-Pad”=>“避免浏览器错误”， “Etag”=>$name， ]); } 因此，我不确定为什么Safari/iOS在本地运行时与托管版本存在问题

这是我在这个网站上的第一个问题，如果你想了解更多信息，请告诉我。

我发现了这个问题

也就是说，Safari认为我提供的是一个音频流，而不仅仅是一个mp3文件，导致它不断发送请求。我通过如下方式提供音频解决了这个问题：

$path=storage\u path（）.DIRECTORY\u SEPARATOR.app.DIRECTORY\u SEPARATOR.songs.DIRECTORY\u SEPARATOR.name；
$response=新的二进制文件响应（$path）；
BinaryFileResponse:：trustXSendfileTypeHeader（）；
返回$response；

我发现了这个问题

也就是说，Safari认为我提供的是一个音频流，而不仅仅是一个mp3文件，导致它不断发送请求。我通过如下方式提供音频解决了这个问题：

$path=storage\u path（）.DIRECTORY\u SEPARATOR.app.DIRECTORY\u SEPARATOR.songs.DIRECTORY\u SEPARATOR.name；
$response=新的二进制文件响应（$path）；
BinaryFileResponse:：trustXSendfileTypeHeader（）；
返回$response；