在没有文件的情况下在 HTML5 中播放来自 javascript 的音频 - 使用缓冲区

Posted 2023-02-25

【中文标题】在没有文件的情况下在 HTML5 中播放来自 javascript 的音频 - 使用缓冲区

【英文标题】：Play audio from javascript in HTML5 WITHOUT a file - using buffer

【发布时间】：2013-11-21 23:29:23

【问题描述】：

我正在使用 jQuery 的 ajax 方法在服务器上调用 php 脚本，该脚本将返回一个 mp3 文件给我，因此我将数据保存在成功函数的变量中。现在我想为这个人播放那个音频。我正在使用 html5，但我看到的每个示例都希望您指向一个包含音频的文件。我没有它作为文件，我有它在内存中。

【问题讨论】：

为什么要通过AJAX返回MP3数据？为什么不让浏览器为您处理它，为该媒体指定 PHP 脚本的 URL？这样会更有效率和兼容性。其他方法包括将其放入 Blob，或使用带有脚本节点的 Web Audio API。

因为被调用的 PHP 脚本需要一个带有多个参数的 POST。

我会单独执行您的POST（假设您实际上正在更改数据）并返回一个令牌，然后您可以使用普通的GET 调用您的视频脚本。这是一个更好的解决方案。

mp3文件是根据发送给php脚本的内容动态创建并返回给浏览器的。我不确定您所说的实际效果如何。

将临时文件写入磁盘并返回引用该文件的 ID 作为对 AJAX POST 的响应。您可以使用足够长的 ID 以便此文件可以存在于文档根目录中，或者执行类似getMp3File.php?id=0123456789abcdef 的操作。这不仅会大大增加对浏览器的支持并大大提高性能，而且您会自动添加对在文件中查找范围请求的支持。

【参考方案1】：

以下内容可帮助您开始使用 Web Audio API。 theAjaxResponse 应该是来自服务器的 mp3 响应（二进制）。

window.AudioContext = window.AudioContext || window.webkitAudioContext;
var context = new AudioContext();

context.decodeAudioData(theAjaxResponse, function(buffer) 
      var source = context.createBufferSource();
      source.buffer = buffer;
      source.connect(context.destination);
      source.start(0);
, onError);

这仅适用于支持 Web Audio API 的现代浏览器。

【讨论】：

当我在 decodeAudioData 行上尝试时返回一个语法错误。

好的，发现我必须将 AjaxResponse 转换为 ArrayBuffer 才能到达这里。现在我得到了一个空错误，尽管我必须追查。