WeChatミニプログラムは同時通訳を利用して音声認識を実装します

WeChatミニプログラムは同時通訳を利用して音声認識を実装します

私は同時通訳音声認識機能を使用して、WeChatアプレットのホームページの音声検索機能を実現しました。あなたもそうなら、おめでとうございます。もう一度変更するには、ctrl + c、ctrl + vを押してください。そうでない場合は、急いで立ち去らないでください。私の記事を読むことはあなたにとって役立つでしょう!

まず、WeChatパブリックプラットフォーム(ミニプログラムの背景)で、左側のメニューバーの設定に移動->サードパーティ設定のプラグイン管理->追加->同時通訳を検索->追加をクリックします。

次のステップは、コードにいくつかの設定を追加することです。

WeChat 開発者ツールを使用してミニプログラムを開発する場合は、app.json ファイルに次のコードを追加する必要があります。

// アプリ.json
{
    ...
    「プラグイン」: {
        ...
        「WechatSI」: {
            "version": "0.3.4", // これは同時通訳のバージョンです(WeChatパブリックプラットフォームに追加された同時通訳の最新バージョンも確認できます)
            "provider": "wx069ba97219f66d99" // これは同時通訳者のIDです
        }
    }
}

Hbuildex を使用して小さなプログラムを開発する場合は、manifest.json ファイルのソース コード ビューに変更を追加する必要があります。

ソースコードビューでmp-weixinを見つけ、次のコードに従って追加および変更します。

// マニフェスト.json
/* ミニプログラム関連 */
"mp-weixin": {
    "appid": "xxxxxxxxxx", // これはアプレットの AppId です
    ...
    「プラグイン」: {
        「WechatSI」: {
            "version": "0.3.4", // これは同時通訳のバージョンです(WeChatパブリックプラットフォームに追加された同時通訳の最新バージョンも確認できます)
            "provider": "wx069ba97219f66d99" // これは同時通訳者のIDです
        }
    }
}

上記の手順を完了したら、公式ドキュメントに従って開発することができます。

以下は私の関数実装コードです

// index.vue ここではページレイアウトに音声ボタンのみを記述します(簡略化)
<テンプレート>
    <div @click="yuyin" class="yuyin-icon">
        <img :src="baseUrlImg+'/yuyin.png'" alt="" class="img" />
    </div>
</テンプレート>
<スクリプト>
    エクスポートデフォルト{
        データ() {
            戻る {
                // これは検索ボックスの内容です search_word: ''
            }
        },
        メソッド: {
            // 音声クリックイベントyuyin: function() {
                var that = これ
                // ユーザーへの認可リクエストを開始しますuni.authorize({
                    scope: 'scope.record', // 録音機能、つまりマイクの許可を取得します。成功: (res) => {
                        // ユーザーはマイクの使用を許可され、音声検索イベント関数 that.plugin() を呼び出すことができます
                    },
                    // ユーザーにマイクを使用する権限がありません。次のコードを実行してください fail(res) {
                        // マイクの許可が有効になっていないことをユーザーに通知するモーダルポップアップウィンドウを表示します uni.showModal({
                            内容: 「マイクの許可が有効になっていないことが検出されました。マイクの許可を有効にしておいてください」
                            confirmText: '開く'、
                            表示キャンセル: false、
                            成功: (res) => {
                                コンソール.log(res)
                                確認する場合
                                    // クライアントアプレット設定インターフェースを開き、ユーザーの設定の結果を返します uni.openSetting({
                                        成功: (res) => {
                                            コンソール.log(res)
                                            res.authSetting['scope.record'] == falseの場合{
                                                その.plugin()
                                            }
                                        }
                                    })
                                } それ以外 {
                                    uni.navigateBack({
                                        デルタ: 1
                                    })
                                }
                            }
                        })
                    }
                })
            }
            // 音声検索プラグイン () {
                var that = これ
                var プラグイン = requirePlugin('WechatSI')
                var マネージャー = plugin.getRecordRecognitionManager()
                // 記録パラメータを設定する manager.start({
                    期間: 5000, // 時間 lang: "zh_CN" // 言語 })
                // 録画を開始する manager.onStart = function(res) {
                    console.log("録音認識が正常に開始されました", res)
                    if(res.msg == 'Ok') {
                        // 録画中であることをユーザーに通知するuni.showToast({
                            タイトル: 「音声認識...」
                            期間: 5000、
                            アイコン: '読み込み中'
                        })
                    }
                }
                // 録画終了 manager.onStop = function(res) {
                    // ユーザーに検索ページにジャンプすることを通知します (私が実行したときは、ジャンプに 1 ~ 2 秒かかったため、プロンプト ボックスを設定しました)
                    uni.showToast({
                        タイトル: 'リダイレクト中...'、
                        期間: 1500、
                        アイコン: '成功'
                    })
                    // 認識した音声をテキストに翻訳する plugin.translate({
                        送信元: 'en_US',
                        lto: 'zh_CN',
                        コンテンツ: res.result、
                        成功: function(res) {
                            res.retcode == 0の場合{
                                // (これは iPhone の場合で、Android については不明です) 音声認識では末尾に記号が追加されることがあります if (res.result.charAt(res.result.length - 1) == '.' || res.result.charAt(res.result.length - 1) == '.') {
                                    res.result = res.result.substr(0, res.result.length - 1);
                                }
                                // 翻訳されたコンテンツを検索ボックスに入力します that.search_word = res.result
                                // 検索関数 that.searchName() を実行するコード
                            } それ以外 {
                                console.log('翻訳に失敗しました', res)
                            }
                        },
                        失敗: 関数(res) {
                            console.log('ネットワークに失敗しました', res)
                            // ユーザーが小声で話したり話さなかったりすると、これら 2 つのエラーが報告されます if(res.retcode == -10001 || res.retcode == -10002) {
                                uni.showToast({
                                    タイトル: 「あなたの言うことを聞いていません」
                                    期間: 1000、
                                    アイコン: 'エラー'
                                })
                            }
                        }
                    })
                }
                 // エラー情報を印刷 manager.onError = function(res) {
                    console.error('エラーメッセージ', res.msg)
                }
            }
        }
    }
</スクリプト>

WeChatミニプログラムが同時通訳を利用して音声認識を実装する方法についての記事はこれで終わりです。ミニプログラムの音声認識に関するより関連性の高いコンテンツについては、123WORDPRESS.COMの過去の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも123WORDPRESS.COMを応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Websocket 経由のリアルタイム音声認識のための WeChat アプレット実装コード
  • WeChatアプレットが音声認識をテキスト機能に実装し、遭遇した落とし穴
  • WeChatアプレットとBaiduの音声認識インターフェースの詳細な説明
  • 30分でミニプログラムの音声認識機能を素早く実装

<<:  Mysqlは実行中のトランザクションを照会し、ロックを待機する方法

>>:  Centos8 で yum を使用して mongodb 4.2 をインストールする方法

推薦する

シンプルなログインページを実装するための HTML+jQuery

目次導入公開コード(バックエンドインターフェース)例 1: 最もシンプル (純粋な HTML)コード...

MySQLは複数テーブル関連統計(サブクエリ統計)の例を実装します

この記事では、例を使用して、MySQL で複数テーブルの関連統計を実装する方法について説明します。ご...

Div はフラッシュを覆います。フラッシュ透過方式により、フラッシュ上に DIV レイヤーを配置できます。

2つのタイプがあります: (異なるブラウザ) 1. IEブラウザで利用可能コードをコピーコードは次の...

Linux で mysql-8.0.20 をインストールするための詳細なチュートリアル

** Linuxにmysql-8.0.20をインストールする**環境の紹介オペレーティングシステム:...

コンパイル、インストールから設定ファイルの説明まで、中国語でnginxの詳細な説明

この記事では、コンパイルとインストールから設定ファイルの説明まで、Nginx について詳しく紹介しま...

Docker は 2003 年の問題を解決するために MySQL リモート接続を導入しました

MySQLへの接続ここでは、リモート接続に navicat を使用します。MySQL に接続する前に...

MYSQL における char と varchar の違い

CHAR 型と VARCHAR 型は似ていますが、主に格納場所、末尾のスペース、取得方法が異なります...

複数のdiv内のテーブルのtdwidth設定は同じで、揃えることができません

最近、複数のdivにあるテーブルのTDを同じ幅に調整しても、揃えることができず、幅にパターンがないこ...

win2008 で mysql8.0.11 を mysql8.0.17 にアップグレードする詳細な手順

アップグレードの背景: MySQLの下位バージョンの脆弱性を解決するために、MySQLはMySQL ...

CSS3 における擬似クラスの一般的な使用法の詳細な説明

before/after 疑似クラスは、要素内に 2 つの追加タグを挿入するのと同じです。最も適した...

Vue 学習 - VueRouter ルーティングの基礎

目次1. Vueルーター1. 説明2. 選択したルートのレンダリング: 3. 基本的な動作原理2. ...

Vueはカルーセルアニメーションを実装します

この記事では、カルーセルアニメーションを実現するためのVueの具体的なコードを例として紹介します。具...

簡単な手順で純粋な CSS3 で 3D 反転効果を実現

フロントエンド開発者の必須科目であるCSS3は、多くの基本的なアニメーション効果を実現するのに役立ち...

Nginx の負荷分散構成、ダウンタイム発生時の自動切り替えモード

厳密に言えば、nginx には負荷分散バックエンド ノードのヘルス チェック機能はありませんが、デフ...

Reactは二次的連鎖効果(階段効果)を実現する

この記事では、二次リンク効果を実現するためのReactの具体的なコードを参考までに共有します。具体的...