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

推薦する

js配列forEachインスタンスの詳細な使用方法

1. forEach() は map() に似ています。これも渡された関数に各要素を順番に適用します...

ブラウザでビデオプレーヤーを実装するための基本的な考え方とコード

目次序文ブラウザにおけるオーディオとビデオに関する知識のまとめビデオエンコーディング包装形態オーディ...

Web スライスとは何ですか?

IE8 の新機能 Web スライス (Web スライス) Microsoft は 3 月 20 日...

Vue 3 での watch と watchEffect の新しい使い方

目次1. 時計の新しい使い方1.1. ウォッチの使用構文1.2. 複数の属性値を監視する1.3. 参...

Vscode が Ubuntu にリモート接続する際のエラー問題の解決方法

1. 事件の背景:仕事上、Ubuntu への vscode リモート接続を使用する必要があります。 ...

MySQL 8.0.17 のインストールと使用方法のチュートリアル図

前面に書かれた過去および現在のプロジェクトで最も一般的に使用されているリレーショナル データベースは...

MySql インデックスはクエリ速度を向上させる一般的な方法のコード例

インデックスを使用してクエリを高速化する1. はじめにWeb 開発には、ビジネス テンプレート、ビジ...

Vue3+Vantコンポーネントを使用してアプリの検索履歴機能を実装する(サンプルコード)

現在、新しいアプリプロジェクトを開発中です。私にとっても初めてのアプリ開発です。チームで調査と検討を...

MySQLはconnect_by_isleaf MySQLメソッドまたはストアドプロシージャに似た機能を実装します

最近、特に異常なビジネス需要があり、テーブルがあります テーブル「デモ」を作成します( `id` i...

Jenkins + Docker + ASP.NET Core の自動デプロイメントの問題について (落とし穴を避ける)

このブログを書くつもりはなかったのですが、実際の操作中に、ネットワークの問題に圧倒されたこと (ネッ...

CSSスタイルで実現されるHTML背景色のグラデーション効果

エフェクトのスクリーンショット:実装コード:コードをコピーコードは次のとおりです。 <!DOC...

HTML テーブルタグチュートリアル (26): セルタグ

<TD> タグの属性は、テーブル内のセルのプロパティを設定するために使用されます。表 &...

CSS3はシームレスなスクロールと手ぶれ防止を実現します

質問画像とテキストのシームレスなスクロールは、一般的に携帯電話では良い効果をもたらしますが、一部のモ...

CentOS7 で jar アプリケーションの起動を設定する方法

プロジェクトの展開中に遭遇した落とし穴Zhihudemo を展開する際、Jenkins などの自動展...