音频不播放（在 iOS、Safari 和 Chrome 上使用 HowlerJs）答案

【问题标题】：Audio Doesn't Play (using HowlerJs on iOS, Safari and Chrome)音频不播放（在 iOS、Safari 和 Chrome 上使用 HowlerJs）
【发布时间】：2019-01-30 06:49:45
【问题描述】：

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

通过 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（音频播放）上运行良好。但是，当在 iOS Safari 或移动版 Chrome 中打开我的手机（iPhone 6s、iOS）上的页面时，音频无法播放，并且我在开发控制台中没有收到任何错误提示我至于为什么。最让我困惑的是为什么它可以在我的桌面浏览器中运行，而不是在移动环境中。

有没有办法解决这个问题？还是调试我应该追求的路线？

一些额外的信息：

用户需要按一个按钮来加载/启动音频，所以他们首先与 DOM 交互。
音频文件为 mp3 格式。

【问题讨论】：

你手机的静音开关有没有拨动？

标签： javascript audio mobile-safari howler.js

【解决方案1】：

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

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

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

        $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;

【讨论】：