2017-07-04 1 views
2

Je construis une application où l'utilisateur peut cliquer sur un bouton, et il envoie des données au serveur. Le serveur calcule ensuite l'audio en fonction des données de la requête (probablement un POST) et renvoie un fichier WAV au navigateur.Comment envoyer une requête AJAX POST et lire l'audio dans la réponse?

J'ai déjà construit la partie en acceptant une demande de publication et en répondant avec le fichier wav, mais je n'arrive pas à comprendre comment envoyer la requête en JS et lire la réponse à l'utilisateur.

De plus, la lecture de l'audio doit commencer (presque) lorsque le premier octet arrive, car les fichiers audio sont assez volumineux et l'utilisateur ne peut pas attendre que la requête soit terminée.

Je suis aussi ouvert aux suggestions changer la façon dont le serveur envoie le fichier: le serveur est fait dans flask

+0

Avez-vous vu ce lien? https://github.com/Jam3/audiobuffer-to-wav/blob/master/demo/index.js –

+0

Je ne pense pas que ce soit ce dont j'ai besoin - il ne lit pas l'audio, il ne joue pas non plus/en quelque sorte renvoyer l'audio en temps réel. – Ginkoid

Répondre

1

Will quelque chose comme ce travail?

<!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> 

Alors que le get.php imprime simplement le lien du fichier audio. Notez que je n'ai pas eu de fichier WAV donc je ne peux pas tester ça. L'audio que j'imprime ci-dessus est d'une taille de fichier de 30 minutes et d'environ 13 Mo.. Mon Internet n'est pas assez rapide pour charger le fichier entier dans une seconde ou deux et pourtant il joue tout de suite.

+0

Merci! Un problème cependant: pour la rapidité, il est probablement préférable pour le serveur de renvoyer l'audio directement, de ne pas renvoyer une URL pour l'audio, et de demander au navigateur de faire une autre requête. Y'a-t'il un quelconque moyen d'y arriver? – Ginkoid

+0

Le contenu du fichier audio pourrait être facilement renvoyé, mais vous aurez alors ce problème ** de gros fichier ** parce que je pense que la requête HTTP doit être complétée avant de faire quoi que ce soit et ensuite je ne sais pas comment la gérer le DOM. – Junaid

+1

Si c'est asynchrone, alors la requête http ne devrait pas bloquer la page. Néanmoins, merci, la performance n'a pas beaucoup d'importance. – Ginkoid