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

Question

我正在开发某种网络播放器，我正在使用 php 框架 Laravel 来处理播放列表的数据。我创建了一个包含所有必要信息的播放列表数组。使用此数组，我在需要播放播放列表对象时制作了一个 howl 实例。

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

然后每当我需要下一首歌曲时，我就会卸载这个嚎叫实例并创建下一首。我的大部分代码都是根据他们 'player' 的 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;

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

HowlerJS: Audio skipping back on itself on Safari and iOS devices

laravel

audio

safari

compatibility

howler.js