序文ミニプログラムを開発する過程では、録音機能を実装し、録音を再生し、録音をサーバーにアップロードする必要があります。開発プロセスでは 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にアクセスできるようにする方法
目次序文LEDトリガー探索を始めるLEDデバイス登録LEDディレクトリ類推によって理解するクラスディ...
背景AWS EC2 を使用するプロジェクトサービスがあります。セキュリティとパフォーマンスを考慮して...
centos8 ディストリビューションは、BaseOS および AppStream リポジトリを通じ...
ページ: ベース: <テンプレート> <div class="タブコンテ...
123WORDPRESS.COM HTML チュートリアル セクションに戻るには、ここをクリックして...
この記事では、検証コード干渉を実装するためのjsの具体的なコードを参考までに共有します。具体的な内容...
目次典型的なケース付録: 一般的なインデックス障害の状況典型的なケース次の構造を持つ 2 つのテーブ...
1. docker に nginx をインストールします。 docker に Nginx をインスト...
Docker はホストマシン上のブリッジを仮想化します。コンテナを作成して起動すると、各コンテナには...
序文最近、MySQL 5.7 をインストールしましたが、問題が見つかりました。コマンド ライン ウィ...
目次1. 存在する1.1 説明1.2 例1.3 交差/2017-07-21 2. 除く2.1 説明2...
仕事で、これまで一度も書いたことのないケースに遭遇しました。午後の半分をその作業に費やし、ついに書き...
目次基本的な手順と使用方法行コンポーネントの分析レンダリング機能ソースコード分析Col成分の分析コン...
スプライトカウダウンロード CSS リントダウンロード プレフィックスダウンロード 1140px C...
目次1. リテラル1.1 数値リテラル1.2 浮動小数点リテラル1.3 特別な値1.4 文字列リテラ...