CODEWITHSUNDEEP
node.jsexpressaudiomulterweb-mediarecorder
Jeremy Nelson
Jeremy Nelson

Reputation: 286

How to write audio file on node server from blob/formdata

I have a MedaRecroder stream being recorded in audio/webm format. I'm sending that to a node server. I am able to see the file in the response under req.files but when I play them it sounds like there are encoding errors.

I'm trying to write the audio file to the server (ideally in .wav but webm will do)so i can access and play the audio

function onRecordingReady(e) {
  var audio = document.getElementById('audio');
  var tag = document.getElementById('tag').value
  audio.src = URL.createObjectURL(e.data);
  audio.play();
  var formData = new FormData()
   formData.append('source', e.data);
   formData.append('tag', tag);
  $.ajax({
    url: 'http://localhost:3300/api/kb8',
    type: "POST",
    data:formData,
    processData: false,
    contentType: false,
    success: function(data) {
            console.log(data);
    }
  });

on my server i'm handling the post like this

const express = require('express');
const bodyParser = require('body-parser');
const multer  = require('multer');
const fs = require('fs');
const wav = require('wav');
let upload = multer();
const app = express();
const PORT = process.env.PORT || 3300;
app.use( bodyParser.json() );       // to support JSON-encoded bodies
app.use(bodyParser.urlencoded({     // to support URL-encoded bodies
  extended: true
}));
app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});

app.get('/', function(req, res){
  res.send('hello world');
});   

app.post('/api/kb8', upload.any(), function(req, res) {
    let formData = req.body;
    let files = req.files;
    fs.writeFileSync('audio/audiotest.webm', req.files);
    console.log('form data', formData, 'file' , files);
    res.sendStatus(200);
});

heres my console output

form data { tag: 'tag',  } file { fieldname: 'source',
  originalname: 'blob',
  encoding: '7bit',
  mimetype: 'audio/webm',
  buffer: <Buffer 1a 45 df a3 9f 42 86 81 01 42 f7 81 01 42 f2 81 04 42 f3 81 08 42 82 84 77 65 62 6d 42 87 81 04 42 85 81 02 18 53 80 67 01 ff ff ff ff ff ff ff 15 49 ... >,
  size: 14322 }

Upvotes: 2

Views: 3924

Answers (1)

Jeremy Nelson
Jeremy Nelson

Reputation: 286

I figured it out.

Multer creates an array of files on the request object (req.files) in order to access the buffer and write to file you have to perform this..

fs.writeFileSync('audio/audiotest.webm', req.files[0].buffer);

hopes this helps.

Upvotes: 2

Related Questions