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 をよろしくお願いいたします。

以下もご興味があるかもしれません: