Vue3+電子再生オーディオフォーマットアーム

プロジェクトのシナリオ:

Vue3+electron はデスクトップチャットソフトウェアを構築します 要件: デスクトップ上の携帯電話で arm 形式の録音を受信し、再生します

---

問題の説明

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

arm 形式のファイルは、依存関係パッケージ AMR レコーダー | benz-amr-recorderに依存する必要があります。具体的な使用方法については、公式 Web サイトを参照してください。

バックグラウンドで逆音声 URL を使用して再生すると、クロスドメインの問題が報告されます。

以下に 2 つの回避策を示します。

読み込み中....

解決策 1: バックグラウンドでクロスドメインの問題を解決する

バックグラウンド ソリューション。詳しく説明する必要はありません。ここをクリックしてください: 参照 http://t.csdn.cn/KB40A

ソリューション 2: フロントエンド ソリューション

アイデア: 音声をクリックすると、まず音声をローカルにダウンロードし、次にダウンロードした音声ファイルを読み取り、それを blom に変換します。

ローカルオーディオを再生するには、benz-amr-recorder によって提供されるメソッド initWithBlob を使用します。

1.  まず、ダウンロード メソッドを Electron のプリロード ファイル、コード ブロック 1 に追加します。
2. 音声をクリックしてダウンロードします。コードを貼り付ける必要はありません。
3. ローカル ファイル、コード ブロック 2 を読み取ります
4. 読み取ったファイルを blob に変換した後、benz-amr-recorder、コード ブロック 3 によって提供されるメソッド initWithBlob を呼び出します。

// 代码块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 を印刷すると、データ型 (8 ビット符号なし整数)ArrayBuffer格式的数组，Uint8Array のオブジェクト が生成されますArrayBuffer 。Baidu はわかりません。

 

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

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

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