最近做了一个关于前端处理语音的需求，总结一下

需求背景：某监控平台获取摄像机的图片后台经过处理产生告警，前端进行告警弹窗和语音播放，弹窗已有功能，只讨论语音播放。

告警上传：上传很简单无论是input 还是 antd，Element 封装的都可以，重点是如何处理长传的文件流。经过查阅相关资料了解到一种方法：首先把文件通过FileReader转为base64，base64格式是无法用audio标签播放的，还需要转成blob对象，把blob对象赋值到audio的src即可进行播放。

await new Promise((res, rej) => {
    // 把文件转为base64 存在localstroge
    let reader = new FileReader()
    reader.readAsDataURL(file.file)
    reader.onload = function (e) {
        _this.setState({
            rankAliveAlarmSrc: e.target.result
        }, () => {
            res()
        })
    }})
_dataURLtoBlob = (dataurl) => {
var arr = dataurl.split(','),
    mime = arr[0].match(/:(.*?);/)[1],
    bstr = atob(arr[1]),
    n = bstr.length,
    u8arr = new Uint8Array(n);
while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], {
    type: mime
});