Сохранить звуковой файл на сервере

213

14 мая 2018, 17:50

Работаю с p5.sound.js. Необходимо сохранить .wav файл на сервер, или просто вывести записанный аудио-сигнал через тег audio. Вместо этого файл просто скачивается через браузер.

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++;
  }
}

Answer 1

Нужно переопределить p5.prototype.writeFile, Создать Blob и преобразовать в base64
Выводим в тег audio

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>