数据-URI

Question

我使用php进行服务器端脚本编写。默认情况下，我使用“audio”标签播放音频文件，因为我的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进行curl调用：audio / mpeg获取data-content.It返回原始mp3格式数据。那么我们如何在浏览器中播放音频文件呢？是否有任何球员将mp3格式数据直接转换为球员数据？我尝试了另一种方式，但我无法在PHP中存储mp3格式文件。我们可以用php创建mp3文件吗？例如：

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

我的卷发响应如下：

ID3＃TSSELavf56.15.1028Infora ！＃％* ,. 0357＆LT;＆GT; @BEGIMPRTVY [ adfhjmqsuxz |〜 Lavc56.13 $ a5Cwc8" ＃p7I＆LT; Z＆LT;ѣF HP.uN {P！ {] DDDwww “'_”; = B “”

Answer 1

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

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

Answer 2

数据-URI

你可以使用数据URI，因为@ n-dru在他的回答中建议，但你应该知道几件事情：

Base-64将数据大小增加33％，JavaScript中的字符串每个字符使用两个字节。
某些浏览器会限制最大数据URI长度（因为解码时会产生很大的开销）

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();
}

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

2 个答案:

数据-URI

Blob + ObjectURL

实施例