1

サーバー側のスクリプトに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'
}

そのため、data-content を取得するために content-type:audio/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<>@BEGIMPRTVY[ adfhjmqsuxz|~������������������������� ������������������������Lavc56.13$a5Cwc��8�"#�p7I<��Z���<ѣF� � �HP�.uN{P�!�{������������ ]�D�DDwww��������"'����_���"; �������=��B""�������</p>
4

2 に答える 2

2

mp3 ファイルのコンテンツを取得する場合は、データ 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 の回答で示唆されているように、データ URI を使用できますが、いくつかの点に注意する必要があります。

  • Base-64 ではデ​​ータ サイズが 33% 増加し、JavaScript の文字列は 1 文字あたり 2 バイトを使用します。
  • 一部のブラウザーでは、データ URI の最大長が制限されています (データ URI のデコードに大きなオーバーヘッドがかかるため)。

ブロブ + ObjectURL

IMO のより良いアプローチは、Blob と ObjectURL を使用することです。ただし、独自の欠点がないわけではありません。

  • Blob のデータをロードするために CORS フルフィルメントを要求します (つまり、サンプル データはページと同じサーバーから取得する必要があります。または、サーバーが 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 に答える