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 をインストールする方法

推薦する

ORM モデル フレームワークを使用して MySQL データベースを操作する方法

ORM とは何ですか? ORM は Object Relational Mapping の略で、オブ...

タグのターゲットリンクを iframe に向ける方法

コードをコピーコードは次のとおりです。 <iframe id="myFrameId&...

HTML テーブルタグについての簡単な説明

主にその構造といくつかの重要な特性について説明します。少しずつ改善しながら紹介していきます。 1) ...

広告を閉じるための JavaScript カウントダウン

広告を閉じるまでのカウントダウンを実装するために JavaScript を使用するまだフロントエンド...

MySQL 8.0.15 のインストールと設定方法のグラフィックチュートリアル

この記事ではMySQL 8.0.15のインストールと設定方法を参考までに記録します。具体的な内容は以...

M1 チップに MySQL 8.0 データベースをインストールする方法 (画像とテキスト)

1. ダウンロードまず、MySQLの国内ミラーをお勧めします。特に速いわけではありませんが、それで...

HTMLコードに基づく画像断片化読み込み機能の実装

今日は断片化された画像の読み込み効果を実装します。効果は次のとおりです。 これを 3 つのステップで...

Vue シングルページ アプリケーションで Markdown レンダリングを実装する

以前、Markdown をレンダリングするときに、mavonEditor のプレビュー モードを使用...

ゲーム開発におけるサウンド処理にCocosCreatorを使用する方法

目次1. Cocos Creatorでのオーディオ再生の基本1. 基本2. 一般的な方法2. Coc...

ウェブデザインにおけるインタラクション: ページングの問題に関する簡単な説明

機能: 前のページまたは次のページにジャンプします。要素: ページングの基本要素は、前のページ + ...

mysql8.0.11データディレクトリ移行の実装

mysql のデフォルトのストレージ ディレクトリは/var/lib/mysql/です。以下は、デフ...

Dockerコンテナの紹介

Dockerの概要Docker はオープンソースのソフトウェア展開ソリューションです。 Docker...

MySQL トリガーの使用方法と利点と欠点の紹介

目次序文1. トリガーの概要2. トリガーの作成2.1 トリガー構文の作成2.2 コード例3. トリ...

タイムライン効果を実現するCSS3

最近、コンピューターの電源を入れたところ、Geek Academy が新規ユーザーに 1 か月の無料...

フレックスレイアウトを使用してページレイアウトを簡単に実装するためのサンプルコード

では、早速コードを見てみましょう。 1. 上部、中央、下部のレイアウト: <!DOCTYPE ...