如何在浏览器中播放MP3格式的数据？

Question

我使用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'
}

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

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

​

我的卷发反应是这样的：

​

ID3#TSSELavf56.15.102��8�Infora !#%*.0357<>@BEGIMPRTVYadfhjmqsuxz|~��������������������������������������������������Lavc56.13$a5Cwc��8�"#�p7I<��Z���<ѣF���HP���.uN{P�！�{������������D�DDwww��������“����_���”；�������=��B""�������

​

Answer 1

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

echo '<audio src="data:audio/mpeg;base64,'.base64_encode($sound_text).'"  autoplay="autoplay" controls ></audio>';

Answer 2

数据URI

您可以使用数据-URI，就像@ aware在他的回答中所建议的那样，但是您应该知道以下几点：

• Bas-64将数据大小增加33%，JavaScript中的字符串每个字符使用两个字节。
• 有些浏览器限制最大数据-URI长度(因为解码它们有很大的开销)。

Blob + ObjectURL

一个更好的方法是使用Blobs和ObjectURL。不过，它也并非没有自己的缺点：

• 要求CORS实现为Blob加载数据(即。您的示例数据必须来自与页或服务器必须允许使用CORS的同一服务器)。
• URL对象必须在某些浏览器中前缀(包括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();
}