Télécharger un fichier audio codé binaire via ajax et enregistrer

Question

J'ai un fichier audio enregistré localement que je veux lire, télécharger sur un serveur via ajax et ensuite stocker sur le serveur. Quelque part le long de ce processus, le fichier est corrompu de sorte que le fichier enregistré sur le serveur ne peut pas être lu.

Je vais énumérer des bribes de code simplifié qui montrent le processus que je traverse et j'espère que cela deviendra évident là où je me trompe.

1) Après l'enregistrement audio (en utilisant getUserMedia et MediaRecorder), un fichier local est enregistré:

var audioData = new Blob(chunks, { type: 'audio/webm' }); 
var fileReader = new FileReader(); 
fileReader.onloadend = function() { 
    var buffer = this.result, 
     uint8Array = new Uint8Array(buffer); 

    fs.writeFile('path/to/file.webm', uint8Array, { flags: 'w' }); 
} 
fileReader.readAsArrayBuffer(audioData); 

2) Plus tard ce fichier local est lu et envoyé à un serveur (en utilisant la bibliothèque axios pour envoyer la demande ajax)

fs.readFile('path/to/file.webm', 'binary', (err, data) => { 
    var formData = new FormData(); 
    formData.append('file', new Blob([data], {type: 'audio/webm'}), 'file.webm'); 
    axios.put('/upload', formData); 
}); 

3) le serveur gère ensuite cette demande et enregistre les fichier

[HttpPut] 
public IActionResult Upload(IFormFile file) 
{ 
    using (var fileStream = new FileStream("path/to/file.webm", FileMode.Create)) 
    { 
     file.CopyTo(fileStream); 
    } 
} 

Le fichier audio local peut être joué mais le fichier audio avec succès sur le serveur ne joue pas.

Je ne sais pas si cette information est utile, mais voici les premières lignes de texte que je vois quand j'ouvre le fichier local dans un éditeur de texte (notepad ++):

Et même quand j'ouvrir celui sur le serveur:

donc un peu la même chose ... mais différent. J'ai essayé d'encoder une myriade de manières différentes mais tout semble échouer. Les doigts croisés quelqu'un peuvent me pointer dans la bonne direction ici.

Answer 1

Le problème était avec comment je passais par le contenu du fichier de fs.readFile. Si j'ai passé un buffer brut encodé en base64 de fs.readFile via json, converti cela en un tableau d'octets sur le serveur et enregistré cela, alors je peux le lire avec succès sur le serveur.

---

fs.readFile('path/to/file.webm', (err, data) => { 
    axios.put('/upload', { audioData: data.toString('base64') }); 
}); 

---

[HttpPut] 
public IActionResult Upload([FromBody]UploadViewModel upload) 
{ 
    var audioDataBytes = Convert.FromBase64String(upload.AudioData); 

    using (var memoryStream = new MemoryStream(audioDataBytes)) 
    using (var fileStream = new FileStream("path/to/file.webm", FileMode.Create)) 
    { 
     await memoryStream.CopyToAsync(fileStream); 
    } 
} 

Answer 2

En fait, cela est un problème de codage de caractères. Vous mélangez probablement UTF-8 et ISO-8859, ce qui provoque la corruption du fichier.

Vous devez probablement définir le jeu de caractères dans la page HTML à celui attendu sur le serveur. Ou effectuez des vérifications préliminaires sur le serveur si vous ne connaissez pas le jeu de caractères des données que vous recevrez.

La conversion en base64 résoudra le problème car elle n'utilisera que des caractères dans la plage ASCII.