音频无法播放（在 iOS、Safari 和 Chrome 上使用 HowlerJs）

Question

我一直在尝试建立一个网站来播放远程存储的音频文件（并且不公开）。我播放音频的方式是：

通过 XMLHttpRequest 从服务器获取音频
将此音频存储在 blob 中
使用 Howler.js

我使用以下代码完成此操作：

//Get the audio file from the API 
var request = new XMLHttpRequest();
request.addEventListener("load", loadMusic);
request.responseType = "blob";
request.open("GET", root+"getmusic/"+path);
request.send();

//Function that catches the data, and plays the audio 
function loadMusic(data) {
    var objectUrl = window.URL.createObjectURL(data.currentTarget.response);
    var howler = new Howl({
         autoplay: true,
         src: [objectUrl],
         format: ["mp3"]
         });
    howler.play();
}

这在我的桌面浏览器 Chrome、Safari 和 Firefox（音频播放）上运行良好。但是，当我在 phone（iPhone 6s，iOS）上打开页面时，在 iOS Safari 或 Chrome 的移动版本中，音频确实不玩，而且我在开发控制台中没有收到任何错误，无法提供有关原因的线索。最让我困惑的是为什么它可以在我的桌面浏览器中使用，而不是在移动环境中使用。

有什么办法可以解决这个问题吗？或者我应该追求的调试路线？

一些额外信息：

用户需要按下按钮才能 load/start 播放音频，因此他们会先与 DOM 进行交互。
音频文件为mp3格式。

Answer 1

所以，我最终解决了这个问题如下：

音频无法在移动设备上播放，主要是因为我没有发送正确的数据响应headers。
我最终放弃了 Howler.js，只是将 blob 作为音频元素源，例如<audio id="audioplayer" src=<blob url here set via javascript> controls type="audio/mpeg">

我使用的 Laravel 后端需要发送以下 headers 和音频文件（原始数据），如下所示：

        $data = Storage::get("audio/".$path);

        header('Content-Transfer-Encoding: binary');
        header('Content-Type: audio/mpeg, audio/x-mpeg, audio/x-mpeg-3, audio/mpeg3');
        header('Content-Length: ' . strlen($data));
        header('Content-Disposition: attachment; filename="somefile.mp3"');
        header('X-Pad: avoid browser bug');
        header('Cache-Control: no-cache');

        echo $data;

音频无法播放（在 iOS、Safari 和 Chrome 上使用 HowlerJs）

Audio Doesn't Play (using HowlerJs on iOS, Safari and Chrome)

javascript

audio

mobile-safari

howler.js