Brazo de formato de audio Vue3+electron play

Escenario del proyecto:

Vue3+electron construye un software de chat de escritorio Requisitos: Recibir la grabación en formato brazo en el teléfono móvil en el escritorio y reproducirla

---

Descripción del problema

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

El archivo en formato arm debe basarse en el paquete de dependencias  AMR recorder | benz-amr-recorder Para uso específico, consulte el sitio web oficial

Cuando se utiliza la URL de audio inverso en segundo plano para reproducir, se informa de un problema entre dominios.

A continuación se proporcionan 2 soluciones alternativas:

cargando....

Solución 1: Resuelva problemas entre dominios en segundo plano

Solución de fondo, no más elaboración, haga clic aquí: Referencia  http://t.csdn.cn/KB40A

Solución 2: Solución frontal

Idea: al hacer clic en la voz, primero descargue la voz en el local, luego lea el archivo de audio descargado y luego conviértalo en un blomb,

Utilice el método initWithBlob proporcionado por benz-amr-recorder para reproducir audio local

1.  Agregue el método de descarga primero al archivo de precarga de electron, bloque de código 1
2. Click en el audio para descargar, ya no pegues el código
3. Leer archivo local, bloque de código 2
4. Después de convertir el archivo leído en blomb, llame al método initWithBlob proporcionado por benz-amr-recorder, bloque de código 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上了

Imprimir buf genera un ArrayBuffer格式的数组，Uint8Array objeto de  ArrayBuffer un tipo de datos (entero sin signo de 8 bits), no entiendo Baidu.

 

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

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

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