1

我正在使用 php 进行服务器端脚本。默认情况下，我使用“音频”标签来播放音频文件，因为我的 api 调用返回文件路径，所以很容易处理。例如，我的示例如下所示：

{
    'id':123,
    'question':'tell about your self?',
    'audio':'/wdk/path/00fl.mp3'
}

所以我可以很容易地在音频标签中使用它。<audio src="www.abc.in/wdk/path/00fl.mp3" preload="auto">

但现在我得到了不同格式的 API 响应。它返回数据内容而不是 url。例如

{
    'id':123,
    'question':'tell about your self?',
    'audio':'/wdk/path/MP3'
}

所以现在我需要再次使用 content-type:audio/mpeg 进行 curl 调用以获取数据内容。它返回原始 mp3 格式数据。那么我们如何在浏览器中播放音频文件呢？是否有任何播放器可以将 mp3 格式数据直接转换为播放器数据？我尝试了另一种方法，但我无法在 php 中存储 mp3 格式文件。我们可以使用 php 创建 mp3 文件吗？例如：

 $myfile = fopen("D:\xampp\htdocs\abc\testfile.mp3", "w"); 
 $fwrite($myfile, $result);

我的卷曲响应是这样的：

ID3#TSSELavf56.15.102��8�Infra !#%*,.0357<>@BEGIMPRTVY[ adfhjmqsuxz|~��������������������������� �����������������������Lavc56.13$a5Cwc��8�"#�p7I<��Z���<ѣF� � �HP����.uN{P�! �{����������� ]�DDwww��������"'����_���"; ��������=��B""��������</p>
4

2 回答 2

2

如果要获取 mp3 文件的内容，可以使用 data URI，源只是编码的文件内容：

echo '<audio src="data:audio/mpeg;base64,'.base64_encode($sound_text).'"  autoplay="autoplay" controls ></audio>';
于 2015-04-20T11:40:02.557 回答
1

数据URI

您可以按照@n-dru 在他的回答中建议的那样使用 data-URI，但您应该注意以下几点：

  • Base-64 将数据大小增加了 33%，JavaScript 中的字符串每个字符使用两个字节。
  • 一些浏览器限制了最大 data-URIs 长度（因为解码它们的开销很大）

Blob + ObjectURL

IMO 的一种更好的方法是使用 Blob 和 ObjectURL。但是，它并非没有自己的缺点：

  • 需要 CORS 实现来加载 Blob 的数据（即，您的示例数据必须来自与页面相同的服务器 - 或者 - 服务器必须允许使用 CORS）
  • URL 对象必须在某些浏览器中添加前缀（包括 webkit）

优点是可以加载数据并将其用作原始字节缓冲区，而无需解码或带宽开销。

例子

此示例加载 MP3 数据（这将是您收到的原始数据），然后为该 Blob 创建一个 Blob 和一个 ObjectURL。然后可以将其设置为音频元素的源。

该示例还显示了如何处理各个阶段的异步性质。

var audio = document.getElementById("audio");

audio.onload = function() {
  // audio has loaded..
  audio.play();
  // continue from here (or the onerror event, not shown)
};

// load the url as raw data and create an ObjectURL:
loadRaw("/wdk/path/MP3", function(url) {
   audio.src = url;
});

function loadRaw(url, callback) {
  var xhr = new XMLHttpRequest();
  xhr.open("GET", url);
  xhr.responseType = "arraybuffer";
  xhr.onerror = function() {console.log("Network error.")};
  xhr.onload = function() {
    if (xhr.status === 200) {
      var blob = new Blob([xhr.response], {type: "audio/mpeg"}),
          oURL = (URL || webkitURL).createObjectURL(blob);
      callback(oURL);
    }
    else {console.log("Loading error:" + xhr.statusText)}
  };
  xhr.send();
}
于 2015-04-20T17:35:05.873 回答