ミニプログラム録画機能の実装

ミニプログラム録画機能の実装

序文

ミニプログラムを開発する過程では、録音機能を実装し、録音を再生し、録音をサーバーにアップロードする必要があります。開発プロセスでは 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、
  });
 }
}
モジュールをエクスポートします。

以下の点に留意することが重要です。

  • オーディオを保存するには、Alibaba Cloud アカウントを登録し、オブジェクト ストレージに新しいバケットを作成する必要があります。これがクラウド ストレージの実装です。
  • Alibaba Cloud Object Storage に接続するには、ali-ossnpm パッケージをインストールする必要があります。フロントエンドによってアップロードされた一時ファイルを受信した後、バックグラウンドはオーディオを Alibaba Cloud Object Storage (client.put) にアップロードします。

録音を再生

注意深い友人は、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 を応援してください。

以下もご興味があるかもしれません:
  • 録音機能を実装するミニプログラム
  • WeChatアプレットの記録機能とアップロード(ノードを使用して解析および受信)
  • WeChatアプレットが録音機能を実現
  • アプレットは録音ボタンを押して放すことで音声認識を実現します
  • アプレットは録音を収集し、バックエンドにアップロードします
  • ミニプログラムに録画アップロード機能を実装
  • 録音時にマイクのアニメーション効果を実現するWeChatアプレット
  • WeChatアプレットの録音と再生録音機能
  • WeChatアプレット開発レコーダーオーディオ再生アニメーション例(実機あり)
  • WeChat アプレット - 写真、録音、オーディオ再生、音楽再生、ビデオ、ファイル コード例

<<:  CentOS 7 で NFS ファイル共有ストレージ サービスを構築するための完全な手順

>>:  すべてのホストがmysqlにアクセスできるようにする方法

推薦する

LED を使って Linux カーネルを使い始める方法を探る

目次序文LEDトリガー探索を始めるLEDデバイス登録LEDディレクトリ類推によって理解するクラスディ...

Linux の MySQL 設定の変更が有効にならない問題の解決方法

背景AWS EC2 を使用するプロジェクトサービスがあります。セキュリティとパフォーマンスを考慮して...

CentOS8 でローカル yum ソースを構成するための詳細なチュートリアル

centos8 ディストリビューションは、BaseOS および AppStream リポジトリを通じ...

子コンポーネントで vue activated を使用する詳細

ページ: ベース: <テンプレート> <div class="タブコンテ...

マークアップ言語 -

123WORDPRESS.COM HTML チュートリアル セクションに戻るには、ここをクリックして...

検証コード干渉を実装する js (静的)

この記事では、検証コード干渉を実装するためのjsの具体的なコードを参考までに共有します。具体的な内容...

MySQLインデックスの失敗の典型的なケース

目次典型的なケース付録: 一般的なインデックス障害の状況典型的なケース次の構造を持つ 2 つのテーブ...

Centos7 DockerでNginxファイルを変更するプロセスの詳細な説明

1. docker に nginx をインストールします。 docker に Nginx をインスト...

Docker ネットワークの原理とカスタム ネットワークの詳細な分析

Docker はホストマシン上のブリッジを仮想化します。コンテナを作成して起動すると、各コンテナには...

MySQL 5.7 をインストールした後にコマンドライン ウィンドウを開くとクラッシュする問題の解決方法

序文最近、MySQL 5.7 をインストールしましたが、問題が見つかりました。コマンド ライン ウィ...

SQL Server での exists と except の使用法の概要

目次1. 存在する1.1 説明1.2 例1.3 交差/2017-07-21 2. 除く2.1 説明2...

テキストエリアの残りの単語数を動的に取得する方法

仕事で、これまで一度も書いたことのないケースに遭遇しました。午後の半分をその作業に費やし、ついに書き...

Element-ui レイアウト (行と列コンポーネント) の実装

目次基本的な手順と使用方法行コンポーネントの分析レンダリング機能ソースコード分析Col成分の分析コン...

25 個の CSS フレームワーク、ツール、ソフトウェア、テンプレートを共有

スプライトカウダウンロード CSS リントダウンロード プレフィックスダウンロード 1140px C...

JavaScript データ型の詳細な説明

目次1. リテラル1.1 数値リテラル1.2 浮動小数点リテラル1.3 特別な値1.4 文字列リテラ...