RecorderJs in electron exports blob objects and saves them locally using node

recorderJs uses node to save to local files

This blog post mainly talks about how to use recorderJs to record in electron and save it to a local file using node. It can be mainly used in the recording saving function in electron, etc. Similar methods of uploading node servers to save audio and video files can also be used for reference. Node is required for file reading and writing operations.

The front end uses recorderJs to record audio

After using recorderJs to record audio on the front end, you can use recorder.exportWAV() to export the blob object, and then convert the blob object into base64 encoding format, so that it can be passed from the front end to node for processing.

function createDownloadLink() {
    
    
  recorder && recorder.exportWAV(function(cb) {
    
    
    var a = new FileReader();
    readBlobAsBase64(cb, function (dataurl){
    
    
        audioBuffer = dataurl;
        saveRecording(audioBuffer);
    });
  });
}

// 把blob对象转换为Base64
function readBlobAsBase64(blob, callback) {
    
    
  var a = new FileReader();
  a.onload = function(e) {
    
    callback(e.target.result);};
  a.readAsDataURL(blob);
}

The front end passes it to node through app for saving operation.

The front end initiates a request operation to the app and passes the previously obtained base64 encoding as a parameter to the node. Because the blob object cannot be passed directly here, the blob object is converted to base64 encoding format for transmission.
Reference code for front-end request initiation:

app.once('setAudioCallback', callback);
app.send('setAudioFile', {
    
    
  data: {
    
    
    "audiofile": audioBuffer,    // base64 编码格式
    "savePath": savePath + '\\', // savePath 为保存的文件夹的绝对路径
    "outfileName": saveName      // saveName 为保存文件的文件名
  },
  callback: 'setAudioCallback'   // 完成保存文件后的回调
});

node performs a save operation

After node obtains the parameters, it performs a saving operation and checks whether the incoming parameters are empty before performing the saving operation. Then convert the parameters of the base64 encoding format into a buffer . Note that the prefix of the base64 encoding format needs to be removed before converting to a buffer . Otherwise, after the subsequent save operation, it will prompt that the file cannot be played after opening. This could be because the file type is not supported, the file extension is incorrect, or the file is corrupted. . Node reference code:

// 保存录音临时文件
ipc.on("setAudioFile", (event,data) => {
    
    
	let info = {
    
    
		"flag": false,
		"message": ""
	}

	var audiofile = data.data.audiofile;
	var savePath = data.data.savePath ? data.data.savePath : '';
	var outfileName = data.data.outfileName;
	if ((!audiofile || (!outfileName))){
    
    
		info.message = '参数不正确'
		event.sender.send(data.callback, info)
	}
	
	// base64编码转换为Buffer，需去除base64编码前缀
	var dataBuffer = new Buffer(audiofile.replace(/^data:audio\/\w+;base64,/,""), 'base64');

	// fs.writeFile异步保存文件
	fs.writeFile(savePath + "sdasdaas.wav", dataBuffer, (err) => {
    
    
		if (err) throw err;
			console.log('文件已保存');
			info.message = '文件已保存'
			event.sender.send(data.callback, JSON.stringify(info))
	})
})

fs.writeFile saves the Buffer asynchronously or fs.writeFileSync saves the file synchronously

Here, fs.writeFile is used to save files asynchronously or fs.writeFileSync synchronously . Different methods need to be selected in different scenarios. If multiple files are saved at the same time, a callback is required after saving. It is more convenient to choose fs.writeFileSync to save files synchronously .
fs.writeFile async

fs.writeFile(savePath + "sdasdaas.wav", dataBuffer, (err) => {
    
    
	if (err) throw err;
		console.log('文件已保存')
		info.message = '文件已保存'
		event.sender.send(data.callback, JSON.stringify(info))
})

fs.writeFileSync synchronization

fs.writeFileSync(savePath + "sdasdaas.wav", dataBuffer)
console.log('文件已保存')
info.message = '文件已保存'
event.sender.send(data.callback, JSON.stringify(info))

• For information about fs.writeFile and fs.writeFileSync syntax, refer here .

summary

I have been thinking about this format conversion issue for several days. I hope this blog post can help friends in need.