WeChatアプレットは記録機能を実装します

WeChatアプレットは記録機能を実装します

この記事では、WeChatアプレットのレコード機能を実装するための具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。

レイアウト

<!--pages/record/record.wxml-->
<表示>
 <ボタン 
  クラス="tui-menu-list"
  bindtap="startRecordAac" 
  type="primary">録音を開始 (aac)</button>
 <ボタン 
  クラス="tui-menu-list"
  bindtap="startRecordMp3" 
  type="primary">録音を開始 (mp3)</button>
 <ボタン 
  クラス="tui-menu-list" 
  bindtap="stopRecord" 
  type="primary">録音終了</button>
 <ボタン 
  クラス="tui-menu-list"
  bindtap="playRecord" 
  type="primary">録音を再生</button>
</ビュー>

スタイル:

/* ページ/レコード/レコード.wxss */
 
.tui-メニューリスト{
  flex-direction: 行;
  マージン: 20rpx;
  パディング: 20rpx;
}

録画の開始と停止

// ページ/レコード/レコード.js
ページ({
 
  /**
   * ページの初期データ */
  データ: {
 
  },
 
  onLoad:関数 (オプション) {
    var that = これ
    this.recorderManager = wx.getRecorderManager();
    this.recorderManager.onError(関数() {
      that.tip("録画に失敗しました!");
    })
    this.recorderManager.onStop(関数(res) {
      that.setData({
        src:res.tempファイルパス
      })
      コンソール.log(res.tempFilePath)
      that.tip("録音が完了しました!")
    })
    this.innerAudioContext = wx.createInnerAudioContext()
    this.innerAudioContext.onError((res) => {
      that.tip("録音の再生に失敗しました!")
    })
  },
 
  //ヒント:関数 (メッセージ) {
    wx.showModal({
      キャンセルカラー: 'キャンセルカラー',
      タイトル:「ヒント」、
      コンテンツ:メッセージ、
      表示キャンセル:false
    })
  },
 
  //aac を録音
  startRecordAac:function() {
    this.recorderManager.start({
      フォーマット:'aac'
    })
  },
 
  //mp3を録音
  startRecordMp3:関数() {
    this.recorderManager.start({
      フォーマット:'mp3'
    })
  },
 
  // 記録を停止する stopRecord:function () {
    this.recorderManager.stop()
  },
 
  //録音を再生するplayRecord:function () {
    var that = これ
    var src = this.data.src
    (ソース='')の場合{
      this.tip('まず録音してください')
      戻る
    }
    this.innerAudioContext.src = this.data.src
    this.innerAudioContext.play()
  }
 
  
})

効果画像:

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • WeChatアプレットの記録機能とアップロード(ノードを使用して解析および受信)
  • WeChatアプレットが録音機能を実現
  • 録音時にマイクのアニメーション効果を実現するWeChatアプレット
  • WeChatアプレット記録ファイル形式シルクで遭遇した問題と解決策
  • WeChatアプレットの録音と再生録音機能
  • WeChatアプレット開発レコーダーオーディオ再生アニメーション例(実機あり)
  • WeChat アプレット - 写真、録音、オーディオ再生、音楽再生、ビデオ、ファイル コード例

<<:  Linux での syslogd および syslog.conf ファイルの解釈

>>:  MYSQL ストアドプロシージャと関数の簡単な記述

推薦する

DockerでPython環境をパッケージ化するプロセスの詳細な説明

docker パッケージング Python 環境の手順は次のとおりです。 1 pip listの下に...

Web2.0: 情報過多の原因と解決策

<br />情報の重複、情報過多、情報強迫、パーソナライズされたカスタマイズ、検索エンジ...

MySQL 5.7.17 のインストールと設定方法のグラフィック チュートリアル (Windows10)

MySQL 5.7.17 のインストールと設定方法の概要最初のステップは、MySQL公式サイトから...

IDEAでVUEプロジェクトをデバッグするための詳細な手順

js コードをデバッグするには、コード内にデバッガーを記述するか、Chrome で毎回ブレークポイン...

Linux 環境に mysql5.7.36 データベースをインストールするチュートリアル

ダウンロードアドレス: https://dev.mysql.com/downloads/mysql/...

mysql5.7.18 解凍バージョンで mysql サービスを起動します

mysql5.7.18の解凍版はmysqlサービスを起動します。具体的な内容は以下のとおりです。 1...

Vue Element フロントエンドアプリケーション開発のための従来の JS 処理機能

目次1. 従来のコレクションに対するフィルター、マップ、および削減処理方法2. 再帰処理3. for...

JSプロトタイプとプロトタイプチェーンについての簡単な説明

目次1. プロトタイプ2. プロトタイプポインタ: __proto__要約する1. プロトタイプJa...

DockerにRedisをインストールし、設定ファイルとして起動する詳細な説明

更新: 最近、サーバーがマイニング ウイルスによってハッキングされたことが判明しました。これは、おそ...

Vue パッケージ化後の空白ページの解決策

1. vue-cli がプロジェクト パッケージを作成した後にページが空白になる問題の解決方法コマン...

MySQL の char、varchar、text フィールド タイプの違い

MySQL では、char、varchar、text の各タイプのフィールドはすべて文字タイプのデー...

Nginx 逆生成 Mogilefs 分散ストレージ例の詳細な説明

1. 分散ストレージシステムの概要情報技術の継続的な発展により、利便性がもたらされる一方で、データ量...

MySQLを5.7にアップグレードすると、WordPressはデータをインポートするときにエラー1067を報告します

最近MySQLを5.7にアップグレードしましたが、WordPressでデータのインポート時にエラーが...

MySQLが正常にインストールされたかどうかを確認する方法

MySQL をインストールした後、DOS ウィンドウまたは MySQL 5.7 コマンドライン クラ...

Zabbix設定 DingTalkアラーム機能実装コード

必要Zabbix で DingTalk アラームを設定する方法は、Prometheus で Ding...