2017-07-04 18 views
2

ユーザーがボタンをクリックしてデータをサーバーに送信するアプリケーションを構築しています。次に、サーバーは要求内のデータ(おそらくPOST)に基づいてオーディオを計算し、ブラウザにWAVファイルを返します。AJAX POSTリクエストを送信し、応答でオーディオを再生するには?

私はすでに投稿要求を受け付けてwavファイルで応答するようにパーツを構築しましたが、JSでリクエストを送信してユーザーに応答を再生する方法がわかりません。

また、オーディオファイルがかなり大きいため、オーディオの再生は最初のバイトが来るまで(ほとんど)開始する必要があり、ユーザーは要求の完了を待つことができません。

私は、サーバーがファイルを送信する方法を変更することも提案を開いています:サーバは、この作品のようなflask

+0

このリンクがありますか? https://github.com/Jam3/audiobuffer-to-wav/blob/master/demo/index.js –

+0

私はそれが私の必要としているとは思わない - それは音声を再生しないし、再生しない/何らかの形でリアルタイムでオーディオを返します。 – Ginkoid

答えて

1

ウィル何かに作られるのですか? get.phpながら

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
</head> 
<body> 

    <audio controls> 
     <source id="source" src="" type="audio/mpeg"> 
     Your browser does not support the audio element. 
    </audio> 

    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
    <script type="text/javascript"> 
     $.ajax({ 
      url: 'get.php', 
      data: { attr1: 'value1' }, 
      success: function(data) { 
       console.log(data); 
       $('audio #source').attr('src', data); 
       $('audio').get(0).load(); 
       $('audio').get(0).play(); 
      } 
     }); 
    </script> 
</body> 
</html> 

はちょうどオーディオファイルのリンクを表示します。私はWAVファイルを取得していないので、それをテストできないことに注意してください。

<?php echo 'http://junaidahmed.io/w/audio.mp3'; ?> 

上記の音声は、30分で約13MBのファイルサイズです。私のインターネットは、2〜2秒でファイル全体を読み込むのに十分速くはありませんが、すぐに再生されます。

+0

ありがとう!ただし、スピードを上げるためには、サーバーがオーディオを直接返すこと、オーディオのURLを返さないこと、ブラウザが別のリクエストを出さなければならないことはおそらく良いでしょう。それを行う方法はありますか? – Ginkoid

+0

オーディオファイルの内容は簡単に返信できますが、**大きなファイル**の問題が発生する場合があります。何かをする前にHTTPリクエストを完了する必要があると思います。第2に、 DOM。 – Junaid

+1

非同期の場合、http要求はページをブロックするべきではありません。それにもかかわらず、ありがとう、パフォーマンスはそれほど重要ではありません。 – Ginkoid

関連する問題