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

【问题标题】：HowlerJS: Audio skipping back on itself on Safari and iOS devicesHowlerJS：在 Safari 和 iOS 设备上自动跳回音频
【发布时间】：2019-10-31 09:18:32
【问题描述】：

我正在开发各种网络播放器，我正在使用 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 在本地运行时存在托管版本的问题。

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

【问题讨论】：

标签： laravel audio safari compatibility howler.js

【解决方案1】：

我发现了问题。

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

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

【讨论】：