UniappはBaidu Voiceを使用して録音をテキストに変換する機能を実現

UniappはBaidu Voiceを使用して録音をテキストに変換する機能を実現

3日間さまざまな困難に遭遇した後、ようやくこの機能を実現しました。正常に実装できる方法を見つける前に、インターネットで多くの記事を参照しました。インターネットで見つかった例は機能しませんでした。多くの人がここで混乱していると思います。他の人がこの状況を回避するために、私は自分のコードを共有します。これは、recorderManagerを使用するuniappフロントエンドと、Baiduの音声をテキストに変換するJavaエンドを含む、絶対に使用できます。私が書いたものが必要な人はたくさんいると思います。Androidフォンでのみテストしました。内部はhtml5 +です。

plus.speech メソッドは使用しないでください。使い方が簡単ではありません。Baidu の音声認識を呼び出すと、Baidu の管理コンソールに dev_id パラメータが渡されていないというエラーが表示されます。このパラメータを追加する場所が見つからないため、hbuildx の現在のプロジェクトのアプリ モジュール構成でこれを選択する必要はありません。

1. 非常に重要なステップは、manifest.json に android.permission.RECORD_AUDIO 権限を追加することです。実際のデバイスでデバッグする場合でも、カスタム ベースを使用する場合でも、オンラインでパッケージ化して、この権限をベースに含める必要があります。次に、携帯電話システムの現在のアプリのアプリケーション管理で、録音権限を確認する必要があります。

2. recorderManager を使用して、録画機能を使用するページに入り、録画の許可を確認するには、recorderManager を使用する前にハードウェア許可アプリケーションを呼び出す必要があります。プラグインマーケットに https://ext.dcloud.net.cn/plugin?id=594 という js があります。このアドレスはアプリの権限判定とプロンプトです。native.js の機能を利用して特定のハードウェア権限を判定したり申請したりするために使用されます。このプラグインがプロジェクトに導入されると、現在のプロジェクト ディレクトリの js_sdk というフォルダーに配置されます。 wa-permission フォルダの下に permission.js があります。

3. 関連コード

ユニアプリコード

  <view class="popup-content">  
                    <view>{{msg}}</view>  
                    <view>あなたは{{voicetext}について話しています}</view>  
                    <button class="uni-btn" type="warn" @touchstart="startvoice" @touchend="endvoice">押して放すと停止します</button>  
                    <button class="uni-btn" type="warn" @tap="playvoice" >録音を再生</button>  
    </ビュー>  
<スクリプト>  
「@/js_sdk/wa-permission/permission.js」から権限をインポートします。  
    レコーダーマネージャを定数に設定する  
    定数 innerAudioContext = uni.createInnerAudioContext();  
エクスポートデフォルト{  
     データ() {  
    戻る {  
            音声テキスト:"",  
        メッセージ: "",  
        ボイスパス:""  
       }  
   },  
  オンロード() {  
      this.initaudio()  
 
   },  
メソッド: {  
   非同期initaudio(){  
                           // これは非同期イベントをトリガーするため、await する必要があることに注意してください。許可要求ダイアログ ボックスが電話にポップアップ表示され、処理後にのみ録音の次のステップに進むことができます。let recordauth = await permision.requestAndroidPermission("android.permission.RECORD_AUDIO")  
                 console.log("録画許可があるか判断する>>>>>"+recordauth)  
                  レコード認証==1の場合  
                               レコーダーマネージャー.onStart((res)=>{  
                                        console.log("録画を開始>>>>>>>>...")  
                                    });  
                               レコーダーマネージャー.onStop((res)=>{  
                                    console.log("レコーダー停止....res.tempFilePath>>>"+res.tempFilePath)  
                                    this.voicepath = res.tempFilePath  
                                    this.uploadvoicefile()  
                                    // uni.uploadFile を使用してサーバーにアップロードします (今回は mp3 形式)});  
 
                                レコーダーマネージャー.onError( (res)=> {  
 
                                 console.log('onError'+JSON.stringify(res));  
                                });  
                  }   
            }, //initaudio メソッド終了 startvoice(){  
                console.log("記録を開始")  
                レコーダーマネージャー.start({  
                    フォーマット:"mp3",  
                    sampleRate: 16000 // このパラメータはバックグラウンドで設定する必要があります。そうしないと、Baidu 音声認識が機能しません});  
         },  
        エンドボイス(){  
 
              console.log("記録を終了")  
              // 発話時間が短すぎるために発生する API バグを回避するために、遅延を追加する必要があることに注意してください setTimeout(()=>{  
                レコーダーマネージャー.stop()  
             },1000)  
 
            },  
            プレイボイス(){  
                console.log("再生音声をクリック")  
                if (this.voicepath) {  
                    console.log("サウンドを再生")  
                    内部オーディオコンテキストの src を this.voicepath に設定します。  
                    内部オーディオコンテキストを再生します。  
                }  
            },  
            音声ファイルをアップロードする(){  
                // this.msg = "Java サービスのファイル パスを呼び出す" + this.voicepath  
                 uni.uploadFile({  
                url: 'http://ip:port/uploadFile (java 受信ファイル インターフェース名)',   
                filePath: this.voicepath, //録音が完了した後に返される一時パス、  
                名前: 'ファイル',  
                フォームデータ: {  
                   dev_id:1537 // 句読点付き中国語},  
                成功: (uploadFileRes) => {  
                    単語をuploadFileRes.dataとします  
                    console.log("オーディオが正常にアップロードされました"+word);  
                },  
                失敗: (res) => {  
 
                    console.log("オーディオのアップロードに失敗しました"+JSON.stringify(res));  
                }  
                });  
            }  
    }  
}  
</script> ```   
 //uploadFile の url 属性の ip は localhost または 127 にはできないことに注意してください。自分のコンピューターで Java サービスを開始する場合は、192.xxx などのローカル コンピューターの実際の IP またはドメイン名である必要があり、Java インターフェイスはクロスドメインをサポートする必要があります。多くの人がこの IP で行き詰まっており、インターネット上でこの問題を解決するための投稿を見つけるのは困難です。filePath パスは、recorderManager の onStop イベントによって取得された _doc で始まるパスであることに注意してください。インターネット上の一部の人が言うように、file: を追加する必要はありません。

Java側

pomでは2つのパッケージを参照する必要があります

            <依存関係>  
            <groupId>com.baidu.aip</groupId>  
            <アーティファクト ID>java-sdk</アーティファクト ID>  
            <バージョン>4.16.3</バージョン>  
        </依存関係>  
 
        <依存関係>  
            <groupId>com.googlecode.soundlibs</groupId>  
            <artifactId>mp3spi</artifactId>  
            <バージョン>1.9.5.4</バージョン>  
        </依存関係>  
 
 ``` com.baidu.aip.speech.AipSpeech をインポートします。  
javazoom.spi.mpeg.sampled.file.MpegAudioFileReader をインポートします。  
org.apache.commons.io.IOUtils をインポートします。  
org.json.JSONArray をインポートします。  
org.json.JSONObject をインポートします。  
 
org.springframework.web.bind.annotation.* をインポートします。  
org.springframework.web.multipart.MultipartFile をインポートします。  
 
javax.sound.sampled.AudioFormat をインポートします。  
javax.sound.sampled.AudioInputStream をインポートします。  
javax.sound.sampled.AudioSystem をインポートします。  
java.io.IOException をインポートします。  
java.io.InputStream をインポートします。  
java.util.HashMap をインポートします。  
 
@レストコントローラ  
@CrossOrigin(オリジン = "*")  
パブリッククラス BaiduSpeech {  
    //APPID/AK/SK を設定する  
    public static final String APP_ID = ""; //Baidu 音声サービス アプリケーションへ移動 public static final String API_KEY = ""; //Baidu 音声サービス アプリケーションへ移動 public static final String SECRET_KEY = ""; //Baidu 音声サービス アプリケーションへ移動 @RequestMapping(value = "/uploadFile")  
    パブリック String uploadFile( @RequestParam("dev_id") int dev_id, @RequestParam("file") MultipartFile ファイル) 例外をスローします {  
        バイト[] pcmbytedata = mp3Convert2pcm(file.getInputStream());  
        HashMap<String,Object> オプション = 新しい HashMap<String,Object>();  
        options.put("dev_pid",dev_id);//  
        JSONObject jsonfrombaidu = basicBydata(pcmbytedata、"pcm"、オプション);  
        JSONArray jsonArray = jsonfrombaidu.getJSONArray("結果");  
        文字列結果 = jsonArray.getString(0);  
        System.out.println(result); // 解析の結果 return result;  
    }  
    // AipSpeech オブジェクトを取得します。単一のインスタンスを使用することをお勧めします。public static AipSpeech getClient() {  
        AipSpeechクライアント = new AipSpeech(APP_ID、API_KEY、SECRET_KEY);  
        // オプション: ネットワーク接続パラメータを設定します client.setConnectionTimeoutInMillis(2000);  
        クライアント.setSocketTimeoutInMillis(60000);  
        クライアントを返す。  
    }  
 
    // 音声認識(ファイルから)  
    パブリック静的JSONObject basicBydata(byte[] voicedata, String fileType,HashMap<String,Object> options) {  
        AipSpeechクライアント = getClient();  
 
        client.asr(voicedata, fileType, 16000, options) を返します。  
    }  
    /**  
     * MP3をPCMに変換する  
     * @param inputStream MP3入力ストリーム * @throws Exception  
     */  
    パブリック静的byte[] mp3Convert2pcm(InputStream inputStream)は例外をスローします{  
        //PCM audioInputStream データを変換します AudioInputStream audioInputStream = getPcmAudioInputStream(inputStream);  
        byte[] pcmBytes = IOUtils.toByteArray(audioInputStream);  
        pcmBytes を返します。  
    }  
 
    /**  
     * PCM AudioInputStream データを取得します * @param inputStream MP3 入力ストリーム * @return AudioInputStream PCM 入力ストリーム */  
    プライベート静的AudioInputStream getPcmAudioInputStream(InputStream inputStream) {  
        オーディオ入力ストリーム audioInputStream = null;  
        オーディオフォーマットターゲットフォーマット = null;  
        試す {  
            AudioInputStream 入力 = null;  
            MpegAudioFileReader mp = 新しい MpegAudioFileReader();  
            mp.getAudioInputStream(入力ストリーム) を呼び出します。  
            オーディオフォーマット baseFormat = in.getFormat();  
            targetFormat = 新しいAudioFormat(AudioFormat.Encoding.PCM_SIGNED, baseFormat.getSampleRate(), 16,  
                    baseFormat.getChannels()、baseFormat.getChannels() * 2、baseFormat.getSampleRate()、false);  
            audioInputStream = AudioSystem.getAudioInputStream(targetFormat, in);  
        } キャッチ (例外 e) {  
            e.printStackTrace();  
        }  
        audioInputStream を返します。  
    }  
 
} ```

uniappがBaidu Voiceを呼び出して録音テキスト機能を実現することについての記事はこれで終わりです。より関連性の高いuniapp録音テキストコンテンツについては、123WORDPRESS.COMの以前の記事を検索するか、以下の関連記事を引き続き閲覧してください。皆様、今後とも123WORDPRESS.COMを応援してください。

以下もご興味があるかもしれません:
  • Uniapp は DingTalk スキャンコード ログイン サンプル コードを実装します
  • uniapp は日付と時刻の選択機能を実装します
  • Vue uniapp はセグメンター効果を実現します
  • Uniappがスライディングスコアリング効果を実現
  • uniappは録音アップロード機能を実現
  • Uniappはスライド可能なタブを実装

<<:  スタイルを書く際の背景色宣言の重要性

>>:  divの背景を透明に設定する方法の例

推薦する

vue3 の setUp とリアクティブ関数の使用方法の詳細な説明

1. いつsetUpを実行するかvue3 ではメソッドを正常に使用できるようになったことは誰もが知っ...

Linux でジャンプ サーバー経由でリモート サーバーに接続し、ファイルを転送する方法

最近、Linux ホストに環境を展開する際に多くの問題に遭遇しました。最初の問題は、ジャンプ サーバ...

docker compose サービスの起動順序を制御する方法

まとめDocker-compose は複数の Docker コンテナ サービスを簡単に組み合わせるこ...

LinuxでRPMを使用してmysql5.7.17をインストールする

LinuxでのMySQL5.7 rpmのインストール方法を参考までに記録します。具体的な内容は以下の...

MySQL の冗長インデックスと重複インデックスの詳細な説明

MySQL では、同じ列に複数のインデックスを作成できます。意図的であるかどうかにかかわらず、MyS...

Centos は chrony 時間同期サーバー プロセス図を構築します

私の環境: 3 centos7.5 1804マスター 192.168.100.140ノード1 192...

Nginx 構成 SSL および WSS 手順の紹介

目次序文1. Nginxのインストール1. Nginxをダウンロードする2. 依存関係をインストール...

Docker 起動時の ES メモリ オーバーフローの解決方法

jvm.options ファイルを elasticsearch 構成に追加し、スタック サイズを変更...

v-model 双方向バインディングデータを実装する vue カスタム コンポーネントのサンプル コード

プロジェクトでは、プロジェクトが呼び出すカスタム パブリック コンポーネントに遭遇します。通常、pr...

Linux でメモリ使用量を確認する方法

システムの問題、アプリケーションの速度低下、または原因不明の問題をトラブルシューティングする場合、最...

MySQL データベース接続例外の概要 (収集する価値あり)

Centos にプロジェクトをデプロイするときに奇妙な問題が見つかりました。データベース接続で例外...

データ URI スキームを使用して Web ページに画像を埋め込む方法の紹介

データ URI スキームを使用すると、HTML、CSS、Javascript などで使用できるインラ...

React 入門レベルの詳細なメモ

目次1. Reactの基本的な理解1. はじめに2. Reactの特徴3. Reactが効率的な理由...

クラウド CentOS で Docker リモート サービス リンクを有効にするための実装手順

ここでは、dockerがインストールされたcentosサーバーを紹介し、リモートリンクサービスを開始...

テーブルを作成するための MySQL SQL ステートメントの詳細な概要

mysql テーブル作成 SQL ステートメントMySQL テーブルを作成するための一般的な SQL...