最近公司项目需要使用第三方音频评测，而Demo仅有Android原生和微信小程序的，而现有架构选用的是MUI框架。因此将Demo转为H5能够使用的JS代码是尤为重要的（其实我们可以使用后台服务器返回的方式来解决，但会给自身服务器带来很大的压力，因而我们将服务器的压力依旧留给第三方）。
MUI框架使用中使用H5+ API中的各类接口，我们读取录制好的本地音频文件，将使用resolveLocalFileSystemURL()方法
/**
* 通过URL参数获取目录对象或文件对象
* @param(url) 本地文件路径，此处为录制音频完成后返回的路径
* @param(successCB) 成功的回调函数
* @param(errorCB) 失败的回调函数
*/
void plus.io.resolveLocalFileSystemURL( url, succesCB, errorCB );
//应用
plus.io.resolveLocalFileSystemURL(fileName, function(entry) {
//此处写具体的业务操作
}, function(e) {
mui.toast(e.message);
});
resolveLocalFileSystemURL()方法成功执行后返回DirectoryEntry | FileEntry对象（请求到的目录或文件对象）。我们可以在操作之前进行各类判断及方法调用，此处仅对FileEntry做解释。
//属性
entry.isFile; //操作对象是否为文件
entry.isDirectory; //操作对象是否为目录
entry.name; //目录操作对象的名称
entry.fullPath; //目录操作对象的完整路径，文件系统的绝对路径
entry.fileSystem; //文件操作对象所属的文件系统对象
//方法
entry.getMetadata();//获取文件的属性
entry.toURL(); //获取文件路径转换为URL地址
entry.toLocalURL(); //获取文件路径转换为本地路径的URL地址
entry.toRemoteURL(); //获取文件路径转换为网络路径URL地址
entry.file(); //获取文件数据对象
在第三方接口说明中，是以前端File控件选择的方式来读取文件内容。而我们不需要这种方式，我们需要录制音频文件完成后直接调用接口来获取返回结果。因此我们需要用resolveLocalFileSystemURL方法来获取本地音频文件内容。
entry.file(function(evt) {
console.log(JSON.stringify(evt));
//此处编写业务操作
});
接下来我们需要使用H5+ API提供的FileReader来从文件系统中读取文件内容。而该对象提供了两种方法，以URL编码格式读取文件数据内容，最终以Base64返回；另一种以文本格式读取文件数据内容。最后当文件读取操作完成时将结果返回并转成二进制。
var reader = new plus.io.FileReader();
reader.readAsDataURL(evt);
reader.onloadend = function(e) {
// console.log(reader.result);
var blob = base64toBlob(reader.result, "UTF-8");
console.log(blob);
}
//Base64转二进制
function base64toBlob(base64, type) {
// 将base64转为Unicode规则编码,切记需要将头部文件类型做截取
let bstr = atob(base64.substring(base64.indexOf(',') + 1), type),
n = bstr.length,
u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n) // 转换编码后才可以使用charCodeAt 找到Unicode编码
}
return new Blob([u8arr], {
type,
})
}
我们使用resolveLocalFileSystemURL()获取的文件对象实际上是c对象，因此我们以上操作都是为了创建File对象。
var fs = new File([blob], evt.name, {
type: evt.type
});
创建File对象后，我们根据第三方提供的接口来实现数据传输以及结果获取。
//从页面file类型的input中获取文件对象
//此处与现有需求不符，因此改写
//var auidoFile = $("#file_audioFile").get(0).files[0];
var fr = new FileReader();
fr.readAsArrayBuffer(fs);
fr.onload = function(evt) {
console.log(JSON.stringify(evt));
var audioData = evt.target.result;
//获取评测结果
that.websocket.send(audioData);
};
fr.onloadend = function(e) {
console.log(JSON.stringify(e));
that.websocket.send(new ArrayBuffer(0));
}
到此处我们已经完成了音频文件的传输以及结果的获取，此节重点是如何根据文件路径来创建文件对象。
① 通过plus.io.FileReader读取文件内容；
② 将Base64转成Blob字符串；
③ 创建File对象；
网友评论