序文ミニプログラムを開発する過程では、録音機能を実装し、録音を再生し、録音をサーバーにアップロードする必要があります。開発プロセスでは Taro フレームワークが使用されました。録音機能は Taro.getRecorderManager() インターフェースを通じて実装され、録音のサーバーへのアップロードは Taro.uploadFile インターフェースを通じて実装され、録音の再生は Taro.createInnerAudioContext() インターフェースを使用して実装されています。以下では、プロセス全体がどのように実装されるかについて詳しく説明します。 ミニ番組録画まず、レコーディング マネージャー モジュールを取得します。 const レコーダーマネージャー = Taro.getRecorderManager(); コンポーネントがマウントされたときに記録監視イベントを登録します。 使用効果(() => { // 録音開始をリッスンする recorderManager.onStart(() => { console.log('記録を開始します'); }); // 録画一時停止を監視する recorderManager.onPause(() => { console.log('録画を一時停止'); }); // 録音を続行するために待機する recorderManager.onResume(() => { console.log('記録を続行'); }); // モニターの録画停止 recorderManager.onStop((res) => { (res.duration < 1000)の場合{ 太郎.showToast({ タイトル: 「録音時間が短すぎる」 期間: 1000、 アイコン: 'なし'、 }); } それ以外 { console.log('記録を停止'); ファイルのアップロード(res.tempFilePath); } }); レコーダーマネージャー.onError(() => { 太郎.showToast({ タイトル: '録画に失敗しました! '、 期間: 1000、 アイコン: 'なし'、 }); }); }, []); 録画 onStop のコールバック関数では、録画 res.tempFilePath の一時アドレスを取得できますが、このアドレスには有効期限があるため、後で正常に使用できるようにするには、録画をサーバー バックエンドにアップロードして保存する必要があります。 onStop コールバック関数では、fileUpload 関数を呼び出してファイルをアップロードします。fileUpload 関数の実装は次のとおりです。 const fileUpload = (tempFilePath) => { 太郎.uploadFile({ url: 'http://127.0.0.1:7001/record', // サーバーアドレス filePath: tempFilePath, name: 'file', // 任意に入力できます header: { 'content-type': 'multipart/form-data', // 形式は次のようになります Authorization: Taro.getStorageSync('token'), }, // formData はファイル以外の情報を送信するために使用されます formData: { record_name: '朗読作品', 詩ID: 詩情報ID、 カテゴリ: 詩情報カテゴリ、 }, 成功: (res) => { コンソールログ(res); url を res.data に格納します。 playAudio(url); // 録音を再生}, 失敗: (エラー) => { console.log('失敗しました!'); コンソールエラー(エラー); }, }); }; 注意すべき点は、ヘッダーのコンテンツ タイプは multipart/form-data である必要があることです。 イベント処理の記録handleClick の最初のクリックによって録画の開始がトリガーされ、その後、現在の状態を使用して録画を一時停止するか続行するかが決定されます。 handleComplete は記録を停止するために使用されます。 const ハンドルクリック = () => { const curPause = 一時停止; setPause(!curPause); if (最初のレコード) { 最初のレコードを設定します(false); レコーダーマネージャー.start({ 期間: 60000、 サンプルレート: 44100, チャンネル数: 1, エンコードビットレート: 192000、 フォーマット: 'mp3', フレームサイズ: 50, }); 太郎.showToast({ タイトル:「録画を開始」 期間: 1000、 アイコン: 'なし'、 }); } それ以外 { (一時停止)の場合{ recorderManager.pause(); // 録画を一時停止 } else { recorderManager.resume(); // 録画を続行します} } }; 定数handleComplete = () => { recorderManager.stop(); // 録画を停止します}; バックグラウンドで記録保存を実現し、記録アドレスを返しますインターネット上のほとんどのブログではこの内容は取り上げられていません。ここでは実装方法を紹介します。バックグラウンドフレームワークは Alibaba の egg.js を使用しています。 ファイルのアップロードに必要な設定については、公式ドキュメント「egg.js ファイルのアップロード」を参照してください。ここでは、最初のファイル モードを使用して実装します。 egg.js フレームワークには Multipart プラグインが組み込まれているため、アップロードされた multipart/form-data タイプのデータを解析できます。 まず、設定ファイル config.default.js にマルチパート設定を記述します。 モジュール.エクスポート = (アプリ) => { const config = (exports = {}); ... config.multipart = { モード: 'ファイル'、 ファイルサイズ: '50mb', } ... 戻る { ...設定、 ...ユーザー設定、 }; }; 次に、router.js でルートを定義します。 // 録音を送信 router.post('/record', auth, controller.record.postRecord); コントローラー ディレクトリに record.js ファイルを定義し、次の内容を記述します。 const コントローラー = require('egg').Controller; クラス RecordController は Controller を拡張します { 非同期postRecord() { const { ctx } = this; 定数ファイル = ctx.request.files[0]; const { record_name, poet_id, category } = ctx.request.body; const res = ctx.service.record.postRecord(ファイル、レコード名、詩ID、カテゴリ) を待機します。 ctx.body = res; } } モジュールをエクスポートします。 サービス ディレクトリに record.js を定義し、具体的な実装を記述します。 const Service = require('egg').Service; OSS = require('ali-oss'); とします。 aliInfo = {とする // https://help.aliyun.com/document_detail/31837.html 地域: 'oss-cn-guangzhou', バケット: 'poem-mini-program', accessKeyId: 'xxx', // Alibaba CloudのaccessKeyIdを入力してください accessKeySecret: 'xxx', // Alibaba CloudのaccessKeySecretを入力してください }; クライアントを新しいOSS(aliInfo)にします。 クラス RecordService は Service を拡張します { 非同期 postRecord(ファイル、レコード名、詩ID、カテゴリ) { const url = this.uploadOSS(file) を待機します。 this.updateRecord(url, record_name, poet_id, category) を待機します。 URLを返します。 } 非同期アップロードOSS(ファイル) { const { ctx } = this; 結果を出す; 試す { // クラウドへのアップロードなどのファイル処理 result = await client.put(file.filename, file.filepath); ついに // 一時ファイルを削除する必要があります await ctx.cleanupRequestFiles(); } result.url を返します。 } 非同期更新レコード(url、レコード名、詩ID、カテゴリ) { const { ctx } = this; console.log('ctx.locals から openid を取得します'); コンソールにログ出力します。 定数 openid = ctx.locals.openid; // ユーザー情報をデータベースに記録する const res = await ctx.model.Record.create({ レコード名: レコード名、 record_url: URL、 詩ID: 詩ID, カテゴリー: カテゴリー、 オープンID: オープンID、 }); } } モジュールをエクスポートします。 以下の点に留意することが重要です。
録音を再生注意深い友人は、Taro.uploadFile インターフェイスを使用して録音をアップロードした後、オーディオを再生するために成功コールバックで playAudio 関数が呼び出されることに気付くかもしれません。次に、オーディオを再生する方法について説明します。 まず、Taro.createInnerAudioContext を使用してオーディオ コンテキスト オブジェクトを取得します。 const innerAudioText = Taro.createInnerAudioContext(); 記録と同様に、コンポーネントがマウントされたときにリスナー イベントを登録します。 使用効果(() => { innerAudioText.onPlay(() => { console.log('再生を開始します'); }); innerAudioText.onError((e) => { console.log('再生異常'); コンソールログ(e); }); }, []); 録音ファイルが正常にアップロードされたら、playAudio メソッドを呼び出して録音を再生します。 const playAudio = (url) => { インナーオーディオテキストの自動再生 = true; innerAudioText.src = url; }; src に値が割り当てられると、録音の再生が開始されます。 要約するミニプログラム録画機能の実装に関するこの記事はこれで終わりです。より関連性の高いミニプログラム録画コンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き閲覧してください。皆様、今後とも 123WORDPRESS.COM を応援してください。 以下もご興味があるかもしれません:
|
<<: CentOS 7 で NFS ファイル共有ストレージ サービスを構築するための完全な手順
>>: すべてのホストがmysqlにアクセスできるようにする方法
コンテナの場合、最も単純なヘルスチェックはプロセス レベルのヘルスチェックであり、プロセスが稼働して...
目次ブラウザカーネルJavaScript エンジンV8エンジンJavaScript がどのように実行...
フロントエンドcss3 フィルターは、Web ページのグレー効果を実現できるだけでなく、ナイト モー...
この記事では、例を使用して、MySQL の非主キーの自己増分の使用方法を説明します。ご参考までに、詳...
目次シーン設定ゲームリソース砲塔の回転動的に生成された弾丸衝突計算効果を高めるターゲットの動き弾薬庫...
目次1- エラーの詳細2-シングルソリューション2.1-ディレクトリ C:\Windows\Syst...
この記事では、主要な CSS ウェブサイトで推奨されている 20 個の便利なルールとベスト プラクテ...
この記事では、例を使用して MySQL ストアド プロシージャのエラー処理について説明します。ご参考...
1 はじめにKong は単純な製品ではありません。この記事で言及されている Kong は主に Kon...
現在、ますます多くのフロントエンド開発者が、元のテーブル レイアウトを xHTML + CSS に置...
Mysql を完全にアンインストールするにはどうすればいいですか?以下の手順に従って実行してくださ...
この記事の例では、記事の折りたたみと展開の機能を実現するためのjQueryの具体的なコードを参考まで...
目次ここでの問題は次の通りです:解決策1:解決策2: コンストラクタで初期化を割り当てる採掘場の概要...
最近、プロジェクトでは kubernetes (以下、k8s と表記、k と s の間には 8 つの...
目次次のチェックミックスイン$強制更新設定、削除フィルター指令その他の単純な共通プロパティとメソッド...