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の背景を透明に設定する方法の例

推薦する

ReactとReduxの配列処理の説明

この記事では、reduce()、filter()、map()、every()、some()、spre...

燃える炎効果の英語フォント16種類をシェアする

私たちは視覚の世界に住んでおり、多くの視覚効果に囲まれています。コンピューターの前にいても、屋外にい...

少なくともn日間連続してログインしているユーザーに対するSQLクエリ

MySQL ツールを使用して、3 日間連続する例を見てみましょう。 1. SQL テーブルを作成しま...

テキストエリアの使用に関する注意事項

なぜテキストエリアについて具体的に言及するのでしょうか?なぜなら、textarea ノードは実際には...

MySQL データベース クエリ パフォーマンス最適化戦略

クエリを最適化するExplain ステートメントを使用してクエリ ステートメントを分析するExpla...

CentOS8 システムをベースにした Gitlab を構築するために Docker を使用する詳細なチュートリアル

目次1. Dockerをインストールする2. GitLabをインストールする3. GitLabを初期...

three.js で 3D ダイナミック テキスト効果を実現する方法

序文みなさんこんにちは。CSS ウィザードの alphardex です。以前、海外のウェブサイトを閲...

新しい要素を作成する3つの方法のまとめ

1つ目: テキスト/HTML経由var txt1="<h1>テキスト。<...

Linux Centos でスクリプトを使用して Docker をインストールする方法

Dockerの主な機能は何ですか?現在、Docker には少なくとも次のアプリケーション シナリオが...

Tomcat が非同期サーブレットを実装する方法の詳細な説明

序文これまでの Tomcat シリーズの記事を通じて、私のブログを読んでいる学生は Tomcat に...

CSS は、小さな鋭角のチャット ダイアログ ボックスで鋭角の吹き出し効果を実現します。

1. CSS を使用して、小さな尖った角のチャット ダイアログ ボックスと尖った角の吹き出しを描画...

MySQLのどのフィールドがインデックスに適しているかについての簡単な説明

目次1 データベース インデックスを作成するための一般的なルールは次のとおりです。 2. 数千万件の...

浮遊要素によって引き起こされる問題と解決策の詳細な説明

1. 問題複数のフローティング要素は親要素の幅を拡張できず、親要素の高さが 0 になる可能性がありま...

MySQL の最初のインストールが成功した後にパスワードを初期化する手順

ファイルをディレクトリに解凍しますこれは解凍後のディレクトリですmy.iniファイルを入力しますダブ...

単一/複数行テキストを含む div を垂直方向に中央揃えする N 通りの方法 (高さ不明/高さ固定)

この問題について話すとき、垂直方向の中央揃えを設定するための vertical-align 属性が ...