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 ストアドプロシージャと関数の簡単な記述

推薦する

HTMLのタグと要素の違いの詳細な説明

ウェブページに慣れていない友人の多くは私と同じように、HTML で要素、タグ、属性がどのように定義さ...

Linux でのマルチスレッドにおけるフォークの紹介

目次質問:ケース(1)子スレッドを作成する前にフォークするケース(2)子スレッドを作成した後にフォー...

JavaScript で Baidu Maps API にアクセスする方法と手順

目次1. Baidu Map API アクセス2. HTML で Baidu Map API を使用...

コード分​​析を実現するためのFastDFSとNginxの統合

FastDFSとNginxの統合:トラッカーは、負荷分散と高可用性のために Nginx と組み合わせ...

リンクをクリックしたときにファイルのダウンロードダイアログボックスをポップアップ表示するには、HTML で href を使用します。

今日、新しい技を学びました。あまりやったことがなかったので、今まで知りませんでした...目的: リン...

MySqlエスケープの詳細な使用例

MySQL エスケープエスケープとは、エスケープ文字の本来の意味を意味します。エスケープ文字の目的は...

Dockerの高可用性構成の詳細な説明

Docker の作成Docker Compose は、管理対象コンテナをプロジェクト、サービス、コン...

CSS で雨滴アニメーション効果を実装するサンプルコード

ガラス窓今日実現するのは雨滴効果です。ただし、雨滴効果を実現する前に、まずは曇りガラス効果を作成しま...

js を使用して数字推測ゲームを実装する

先週、先生が私に数字当てゲームをするちょっとした宿題を出しました。とても面白いと思ったので、適当に書...

Vueグローバルカスタム命令の実践 モーダルドラッグ

目次背景実装のアイデア成果を達成する背景最近取り組んでいるプロジェクトは、Vue2 で構築されたプロ...

React の 3 つの主要属性における Ref の使用に関する詳細な説明

目次クラスコンポーネント機能コンポーネントインタビューのよくある質問: React における ref...

Vue プロジェクトで mock を使用する方法をご存知ですか?

目次最初のステップ: 2 番目のステップは、request.js で関連する構成を行うことです。re...

CentOS7.6にMYSQL8.0をインストールする詳細な手順

1. 一般的に、CentOS では mariadb がデフォルトでインストールされているため、まず ...

MySQL で遅いファジークエリを最適化する方法

目次1. はじめに: 2. 最初のアイデアはインデックスを構築することです3. 命令P.S. Lik...

Linux で tcpdump コマンドを使用してデータ パケットをキャプチャおよび分析する方法の詳細な説明

序文tcpdump はよく知られたコマンドライン パケット分析ツールです。 tcpdump コマンド...