electron中recorderJs导出blob对象,并使用node保存到本地

electron中recorderJs导出blob对象,并使用node保存到本地

  • recorderJs使用node保存到本地文件的方法
    • 前端使用recorderJs录制音频
    • 前端通过app传递给node进行保存操作
    • node进行保存操作
    • fs.writeFile异步保存Buffer或者fs.writeFileSync同步保存文件
    • 小结

recorderJs使用node保存到本地文件的方法

该博文主要讲述在electron中使用recorderJs录音并用node保存到本地文件的方法,主要可以使用在electron中的录音保存的功能中等等,相似的上传node服务器保存音频视频文件也可以借鉴。需要node进行文件读写操作。

前端使用recorderJs录制音频

在前端使用recorderJs录制音频后,可以使用recorder.exportWAV()导出blob对象,然后把blob对象转化成base64编码格式,这样就可以从前端传给node进行处理。

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

前端通过app传递给node进行保存操作

前端发起想app发起请求操作,并把之前的获得base64编码作为参数传递给node。这里因为不能直接传递blob对象,所以把blob对象转换为base64编码格式进行传输。
前端的发起请求的参考代码:

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

node进行保存操作

node获取到参数后的进行保存操作,在进行保存操作前查看传入参数是否为空。然后把base64编码格式的参数转化成buffer,注意这里转成buffer前需要去除base64编码格式的前缀,不然后面进行保存操作后,打开后提示此文件无法播放。这可能是因为文件类型不受支持、文件扩展名不正确或文件已损坏。
electron中recorderJs导出blob对象,并使用node保存到本地_第1张图片
Node的参考代码:

// 保存录音临时文件
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异步保存Buffer或者fs.writeFileSync同步保存文件

这里使用fs.writeFile异步或者fs.writeFileSync同步保存文件,需要在不同的场景选择不同的方法,如果同时保存多个文件,保存完后需要回调,选择fs.writeFileSync同步保存文件会比较方便。
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.writeFileSync同步

fs.writeFileSync(savePath + "sdasdaas.wav", dataBuffer)
console.log('文件已保存')
info.message = '文件已保存'
event.sender.send(data.callback, JSON.stringify(info))
  • 关于 关于fs.writeFile和fs.writeFileSync 语法,参考 这儿.

小结

关于这个格式转化问题,琢磨了好几天,希望这篇博文可以帮助有需要的朋友。

你可能感兴趣的:(electron,node)