私は同時通訳音声認識機能を使用して、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 をインストールする方法
目次導入公開コード(バックエンドインターフェース)例 1: 最もシンプル (純粋な HTML)コード...
この記事では、例を使用して、MySQL で複数テーブルの関連統計を実装する方法について説明します。ご...
2つのタイプがあります: (異なるブラウザ) 1. IEブラウザで利用可能コードをコピーコードは次の...
** Linuxにmysql-8.0.20をインストールする**環境の紹介オペレーティングシステム:...
この記事では、コンパイルとインストールから設定ファイルの説明まで、Nginx について詳しく紹介しま...
MySQLへの接続ここでは、リモート接続に navicat を使用します。MySQL に接続する前に...
CHAR 型と VARCHAR 型は似ていますが、主に格納場所、末尾のスペース、取得方法が異なります...
最近、複数のdivにあるテーブルのTDを同じ幅に調整しても、揃えることができず、幅にパターンがないこ...
アップグレードの背景: MySQLの下位バージョンの脆弱性を解決するために、MySQLはMySQL ...
before/after 疑似クラスは、要素内に 2 つの追加タグを挿入するのと同じです。最も適した...
目次1. Vueルーター1. 説明2. 選択したルートのレンダリング: 3. 基本的な動作原理2. ...
この記事では、カルーセルアニメーションを実現するためのVueの具体的なコードを例として紹介します。具...
フロントエンド開発者の必須科目であるCSS3は、多くの基本的なアニメーション効果を実現するのに役立ち...
厳密に言えば、nginx には負荷分散バックエンド ノードのヘルス チェック機能はありませんが、デフ...
この記事では、二次リンク効果を実現するためのReactの具体的なコードを参考までに共有します。具体的...