vue3+electron 播放音频格式arm

项目场景：

vue3+electron搭建桌面端聊天软件，需求：在桌面端接受到手机上arm格式的录音，并进行播放

---

问题描述

提示：这里描述项目中遇到的问题：

arm格式的文件需要借助依赖包 AMR 录音机 | benz-amr-recorder，具体的使用参考官网

在使用过程中使用后台反的音频url去播放时，报跨域问题。

下面提供了2个解决方法:

loading....

解决方案一：后台解决跨域问题

后台解决，不再阐述，请点击这里：参考 http://t.csdn.cn/KB40A

解决方案二：前端解决

思路：点击语音时，先把语音下载到本地，然后读取下载的音频文件，再转成blomb，

使用benz-amr-recorder提供的方法initWithBlob播放本地音频

1.  electron的预加载文件中先添加下载方法，代码块1
2. 点击音频进行下载，不再贴代码了
3. 读取本地文件，代码块2
4. 把读取到的文件转成blomb后，调用benz-amr-recorder提供的方法initWithBlob，代码块3

// 代码块1
/**
         *  description: 图片和文件下载并打开
         *  param {string} url 文件下载链接
         *  param {string} fileName 文件名称
         *  param {string} fileType 文件格式
         *  param {bollean} isOpen 下载完成后是否自动用电脑自带的程序打开下载后的文件
         *  author: liusanshan
        */
        ipcMain.on('downloadFileToFolder', (event: Event, url: string, fileName:string, type: any, isOpen?:boolean ) => {
            win.webContents.downloadURL(url);
            win.webContents.session.once('will-download', (event:any, item:any, webContents:any) => {
                // event 事件参数
                // item 下载的项目实例
                // webContents 网页内容
                const filePath = join(app.getAppPath(), '/download', `${fileName}.${type}`);
                item.setSavePath(filePath);
                 item.on('updated', (event:any, state:any) => {
                  if (state === 'interrupted') {
                    // console.log('下载中断，可以继续');
                  } else if (state === 'progressing') {
                    if (item.isPaused()) {
                      console.log('下载暂停');
                    } else {
                    //   console.log(`当前下载项目的接收字节${item.getReceivedBytes()}`);
                      console.log(`下载完成百分比：${item.getReceivedBytes() / item.getTotalBytes() * 100}`);
                    }
                  }
                });
                if (isOpen) {
                    item.once('done', (event:any, state:any) => {
                        if (state === 'completed') {
                        shell.openPath(filePath) //打开文件
                        }
                    })
                }
               
            })
        });

// 代码块2

const localSrc = 'C:/Users/Lenovo/Downloads/rBQQm2NzptyANQ0pAAAK2goNtV0598.amr' // 假如你保持的本地音频位置时这样的
const buf = window.EAPI.fs.readFileSync(localSrc); // window.EAPI.fs是项目把fs读取文件的方法，挂载到window上了

打印buf 生成了一个ArrayBuffer格式的数组，Uint8Array 对象是 ArrayBuffer 的一个数据类型（8 位不带符号整数），不懂的自己百度。

// 代码块3
const amr = new BenzAMRRecorder();

const bolb = new Blob([buf]);//转为一个新的Blob文件流

amr.initWithBlob(bolb).then(function() {
  amr.play();
});