I work with p5.sound.js. You must save the .wav file to the server, or simply output the recorded audio signal through the audio tag. Instead, the file is simply downloaded via the browser.

var mic, recorder, soundFile; var state = 0; // mousePress will increment from Record, to Stop, to Play var mic, recorder, soundFile; var state = 0; // mousePress will increment from Record, to Stop, to Play function setup() { createCanvas(400,400); background(200); fill(0); text('Enable mic and click the mouse to begin recording', 20, 20); mic = new p5.AudioIn(); mic.start(); recorder = new p5.SoundRecorder(); recorder.setInput(mic); soundFile = new p5.SoundFile(); } function mousePressed() { if (state === 0 && mic.enabled) { recorder.record(soundFile); background(255,0,0); text('Recording now! Click to stop.', 20, 20); state++; } else if (state === 1) { recorder.stop(); // stop recorder, and send the result to soundFile background(0,255,0); text('Recording stopped. Click to play & save', 20, 20); state++; } else if (state === 2) { soundFile.play(); // play the result! saveSound(soundFile, 'mySound.wav'); // save file state++; } }

    1 answer 1

    You need to override p5.prototype.writeFile , Create Blob and convert to base64
    We display in the audio tag

     var mic, recorder, soundFile, state = 0, audio = document.getElementsByTagName('audio'); p5.prototype.writeFile = function(blob, name, type){ blob.lastModifiedDate = new Date(); blob.name = name; var reader = new FileReader(); reader.readAsDataURL(new Blob(blob, {type: "audio/"+type})); reader.onloadend = function() { audio[0].src = reader.result; } } function setup() { createCanvas(400,40); background(200); fill(0); text('Enable mic and click the mouse to begin recording', 20, 20); mic = new p5.AudioIn();mic.start(); recorder = new p5.SoundRecorder(); recorder.setInput(mic); soundFile = new p5.SoundFile(); } function mousePressed() { if (state === 0 && mic.enabled) { recorder.record(soundFile); background(255,0,0); text('Recording now! Click to stop.', 20, 20); state++; } else if (state === 1) { recorder.stop(); background(0,255,0); text('Recording stopped. Click to play', 20, 20); state++; } else if (state === 2) { saveSound(soundFile, 'mySound.wav'); } } 
     <script src="https://rawgit.com/processing/p5.js-sound/master/lib/p5.js"></script> <script src="https://rawgit.com/processing/p5.js-sound/master/lib/p5.sound.js"></script> <audio controls></audio>

    It is possible that the code will not work on stackoverflow pages and locally, but it works from the server .