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

electron 同时被 2 个专栏收录
1 篇文章 0 订阅
2 篇文章 0 订阅

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编码格式的前缀,不然后面进行保存操作后,打开后提示此文件无法播放。这可能是因为文件类型不受支持、文件扩展名不正确或文件已损坏。
node进行保存音频文件打开无法播放
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 语法,参考 这儿.

小结

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

  • 3
    点赞
  • 5
    评论
  • 3
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值