私は同時通訳音声認識機能を使用して、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を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Mysqlは実行中のトランザクションを照会し、ロックを待機する方法
>>: Centos8 で yum を使用して mongodb 4.2 をインストールする方法
今日も Watch アプリのデザインに関する話です。私はケーススタディが大好きなので、同じトピックを...
データベースは、どのオブジェクトにどのフィールドが含まれているかを照会します。 *を選択 sysob...
【質問】 HP サーバーを使用しています。SSD が IOPS 約 5000 を書き込むと、%uti...
MySQL で、id、a、b の 3 つのフィールドを持つ新しいテーブルを作成します。次のように、同...
データベースを操作する過程では、いくつかの指標を日付別にまとめたり、一定期間内の合計金額をカウントし...
UCenter Homeは、ComsenzがリリースしたSNSサイト構築システムです。最新バージョン...
目次1. イメージをプルする2. イメージを実行する3. コンテナ内でアプリケーションをテストする4...
前回の記事では、Windows でタイムアウトを試してみました。この記事では、Linux で試してみ...
time(); 関数関数プロトタイプ: time_t time(time_t *timer)関数の目...
以前、単純な UDP サーバーとクライアントの例を書きましたが、その中で、自分自身をクライアントと見...
Windowsユーザー向けDocker で openGauss を使用するopenGaussイメージ...
使用環境cmd モードで、mysql --version と入力します (インストールされている M...
大規模な開発に Docker を使用する場合でも、クリーンアップ戦略がなければ、ディスクがすぐにいっ...
<br />リンクをクリックすると、ポップアップ表示される Web ページ アドレスは ...
過去 2 日間、ワークベンチが Alibaba Cloud Server に接続できない問題を解決す...