vue3を使用して人間と猫のコミュニケーションアプレットを実装する

vue3を使用して人間と猫のコミュニケーションアプレットを実装する

序文

猫を飼っている人の多くは、猫とコミュニケーションを取りたいと思っていると思います。猫がさまざまな鳴き声を出すのは、どうしたのか、お腹が空いているのか、など猫に何かを聞いていることが多いです。ペット翻訳ソフトも探して、自分で作ってみます[手動犬頭]。

WeChat ミニプログラムは Vue を使用した直接的な開発をサポートしていませんが、さまざまな開発フレームワークを使用したクロスエンドアプリケーションの開発をサポートするソリューションは業界ですでに数多く存在します。

Taro バージョン 3.0 では Vue3 を使用した開発がサポートされるようになったので、Taro を使用して WeChat アプレットを実装してみましょう。

プロジェクトを初期化する

Taroの詳しい使い方については公式ドキュメントを参照してください。まず@tarojs/cliをグローバルにインストールします

npm をインストール -g @tarojs/cli

インストールが成功したら、taro コマンドを使用してテンプレート プロジェクトを作成します。

taro init catApp

ここではvue3-nutUIフレームワークを選択しています。このフレームワークはtaro-uiほど多くの機能はありませんが、taro-uiはreactしかサポートしていないため、これを使用するしかありません。

デザイン

結局、視覚的な出力がなければ、自分自身に頼らなければなりません。すぐに PPT を開いて簡単なスケッチを描きます。

主な機能コンポーネントは 2 つあります。

  • 猫に伝えたいことを入力し、それをニャー言語に変換して再生します
  • 録音して、鳴き声を録音し、それをテキストに変換して再生します

コードの実装

オンデマンドロード

vue3-nutUI フレームワークをオンデマンドで導入します。先ほどプロジェクトの初期化時にオンデマンドで導入しました。app.js では、プロジェクトに必要なコンポーネントをオンデマンドで導入するだけです。

'vue' から {createApp} をインポートします。
'@nutui/nutui-taro' から Button、Toast、Tabbar、TabbarItem、Icon、Avatar、Input } をインポートします。
'@nutui/nutui-taro/dist/style.css' をインポートします。

定数App = createApp()
アプリ.use(ボタン).use(トースト).use(タブバー).use(タブバーアイテム).use(アイコン).use(アバター).use(入力)

デフォルトアプリをエクスポート

オーディオを再生

飼い主に伝えたい内容を入力し、ニャー言語に変換した後、再生するには、Taro が提供するオーディオ再生インターフェースを使用する必要があります。オーディオ再生では、より公式な Taro.createInnerAudioContext インターフェイスが使用されるようになりました。元の Taro.stopVoice と Taro.playVoice はメンテナンスされなくなりました。

const innerAudioContext = Taro.createInnerAudioContext();
太郎.setInnerAudioOption({
	obeyMuteSwitch: false、
});

innerAudioContext.src = 'xxx.mp3';
内部オーディオコンテキストを再生します。

innerAudioContext.onPlay(()=>{
	console.log('プレイを開始')
})
インナーオーディオコンテキスト.onEnded(()=>{
	console.log('再生終了')
})

obeyMuteSwitch 設定は、ミュートスイッチに従うかどうかです (iOS でのみ有効)。false に設定すると、サイレント モードでもサウンドを再生できます。デフォルトは true です。ここに注意を払わず、長い間混乱していました。オーディオの再生に問題があると思っていましたが、ミュートされていることが判明しました。

録音

猫の飼い主を記録するには、Taro.getRecorderManager記録インターフェースを使用する必要があります。

const レコーダーマネージャー = Taro.getRecorderManager();
レコーダーマネージャー.onStart(() => {
	console.log("レコーダー開始");
});
レコーダーマネージャー.onStop((res) => {
	console.log("レコーダー停止", res);
	const { tempFilePath, 期間 } = res;
	// tempFilePath は録音ファイルの一時パスです //duration は録音の長さです // ここで再生する必要がある場合は、録音ファイルのアドレスを設定すると、録音を再生できます innerAudioContext.src = tempFilePath;
	内部オーディオコンテキストを再生します。
});

長押しイベント

録音するときは、長押しして録音を開始し、放して録音を完了することに慣れているかもしれません。 vue3-nutUI フレームワークはボタンの長押しイベントを提供しないため、アプレットによってネイティブに提供される longpress イベントを使用する必要があります。このイベントは、指が 350 ミリ秒以上タッチするとトリガーされ、タップ イベントはトリガーされません。手を離して録画を終了する場合は、touchend イベントと組み合わせて、長押しして録画し、手を離して終了するという要件を満たす必要があります。

<nut-button ブロック type="info" icon="microphone" @longpress="handleLongpress" @touchend="handleTouchend">
	録音中</nut-button>

デバッグを実行

npm run dev:weapp project を実行すると、ファイルの変更が監視され、リアルタイムでミニプログラムにコンパイルされます。次に、WeChat 開発者ツールを開き、プロジェクトをインポートし、catApp ルート ディレクトリを開くことを選択すると、プレビューできます。

要約する

Taro の利点は、一度コードを書いて複数の端末に適応できることです。WeChat アプレットの開発に使うだけだと、まだまだ道のりは長いです。ネイティブで開発したほうが良いのではないでしょうか。しかし、開発に Vue3 を使用できることは依然として非常に魅力的ですが、Vue3 は内部で Proxy を使用しており、下位バージョンのシステム (iOS 9、Android 6) では直接使用できません。現時点では、これらのユーザーを直接放棄することは不可能であるため、まだあまり実用的ではありません。

この時点で、猫の言語変換をどのように実現するかと疑問に思う人もいるかもしれません。 ?正直に言うと、猫とコミュニケーションをとる能力はまだ世界には存在しません。ここでは、ローカル リソース ファイルとハードコードされたデータを使用するだけです。娯楽として遊んで、あまり真剣に考えないでください。業界がこの機能を備え、インターフェースを提供すれば、アクセスを通じて機能が真に実現されるようになります。 Megviiが人工知能やディープラーニングの分野で取り組みを深めているように、さまざまな鳴き声を訓練し、さまざまな鳴き声のシナリオを組み合わせることで、このようなシンプルなコミュニケーション機能を開発することは可能でしょうか?

完全なコードは github リポジトリにあり、興味のある方はダウンロードして試すことができます。

これで、vue3 を使用して人間と猫のコミュニケーション アプレットを実装する方法に関するこの記事は終了です。vue3 人間と猫のコミュニケーション アプレットに関する関連コンテンツをさらにご覧になりたい場合は、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • JD Vue3コンポーネントライブラリはミニプログラム開発の詳細なプロセスをサポートします

<<:  ソースコード分析からTomcatがサーブレットの初期化を呼び出す方法の詳細な説明

>>:  MySQLクエリ文の実行プロセスを理解するための記事

推薦する

Vue.jsは背景テーブルコンポーネントのカプセル化を管理します

目次問題分析なぜカプセル化なのかパッケージの内容は何ですか?テーブルコンポーネントをカプセル化するデ...

HTML マーキータグの使用例

このタグはHTML3.2の一部ではなく、MSIE3以降のカーネルのみをサポートしています。そのため、...

js は複数の画像を zip にパッケージ化します

目次1. ファイルをインポートする2. HTMLページ3. メインコード4. 画像をbase64に変...

Linux で so または実行可能プログラムの依存ライブラリを表示します

Linux で実行可能プログラムまたは so の依存ライブラリを表示します。 Linux の実行可能...

Viteプロジェクトを作成する手順

目次序文yarn create は何をしますか?ソースコード分析プロジェクトの依存関係テンプレート構...

Ubuntu インストール cuda10.1 ドライバ実装手順

1. cuda10.1をダウンロードします。 NVIDIA 公式ウェブサイト リンク: https:...

MySQL エラー コード 1064 の解決策

SQL ステートメント内の単語が mysql のキーワードと競合する場合は、`` (タブ キーの上)...

CentOS 7 での Nginx ログタイミング分割の実装手順の詳細説明

1. 分割スクリプト (splitNginxLog.sh) を作成します。 * この例では、ログ分割...

Docker に MySQL をデプロイする例

目次1 コンテナクラウドとは何ですか? 2 Dockerの紹介3 dockerを使ってMySQLをイ...

Nginx を使用してポート転送 TCP プロキシを実装する例

目次需要背景Nginx を使用する理由は何ですか? Nginx によるポート転送依存関係をインストー...

CSS カウンターとコンテンツの概要

コンテンツ プロパティは CSS 2.1 で導入され、:before および :after 疑似要素...

言及すべき8つのMySQLの落とし穴を共有する

MySQL はインストールが簡単で、高速で、豊富な機能を備えています。これはオープンソース運動のベン...

MySQL データベースのマスター スレーブ分離のサンプル コード

導入MySQL データベースの読み取りと書き込みの分離を設定すると、データベースに対する書き込み操作...

MySQL初心者のための基本操作のまとめ

図書館運営クエリ1.SHOW DATABASE; ----すべてのデータベースを照会する2. SHO...

CentOS 7.x のマスターおよびスレーブ DNS サーバーの展開

1. 準備例: 2 台のマシン: 192.168.219.146 (マスター)、192.168.21...