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

推薦する

Macシステムをインストールした後にVMWareがフルスクリーンで表示できない問題を解決する

システム: VMTOOLs ダウンロード:リンク: https://pan.baidu.com/s/...

HTML シンプルショッピング数量アプレット

この記事では、参考までにシンプルなHTMLショッピング数量アプレットを紹介します。具体的な内容は次の...

MySQLの日次統計レポートでは、その日にデータがない場合には0が入力されます。

1. 問題の再現:各日の合計数を日ごとにカウントします。データのない日がある場合、グループ化によっ...

CSSでemを開く正しい方法の詳細な説明

「通常 1em=16px」と言うのはなぜですか?ユーザーのブラウザによってレンダリングされるデフォル...

MySQL GROUP_CONCAT 制限の解決

効果: GROUP_CONCAT関数は、フィールド値を文字列に連結することができます。デフォルトの区...

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

この記事では、参考として MySQL 5.7.23 のインストール チュートリアルを記録します。 1...

MySQLの暗黙的な変換について話す

作業の過程で、暗黙的な変換が発生するケースが数多くあります。暗黙的な変換は、クエリの速度低下を引き起...

vue3 における vuex と pinia の落とし穴

目次導入インストールと使用方法文章の相違点と類似点の簡単な比較VuexとPiniaの長所と短所Pin...

MySQL でパーセンテージと最初の数パーセントを表示する方法

目次必要とする実装コードデータベース数日前、友人からこれを書くのを手伝ってほしいと頼まれました。ただ...

winx64 での mysql5.7.19 の基本的なインストール プロセス (詳細)

1. ダウンロード参考: https://www.jb51.net/softs/451120.ht...

MySQLデータベース設計:Pythonを使ったスキーマ操作方法の詳しい解説

矢が放たれる前に、弓は矢にささやきました。「お前の自由は私のものだ。」スキーマは矢のようなもので、弓...

MySQL タイムブラインドインジェクションの 5 つの遅延方法

MySQL タイム ブラインド インジェクションの 5 つの遅延方法 (PWNHUB の予期しない解...

jsはショッピングサイトの虫眼鏡機能を実現します

この記事では、ショッピングサイトの虫眼鏡機能を実現するためのjsの具体的なコードを紹介します。具体的...

CSS でフロートとマージンを混合するサンプルコード

最近の勉強で、GitHub でレイアウトの練習をいくつか見つけたのですが、レイアウトにまったく慣れて...

SQLシリアル番号取得コード例

この記事は主にSQLシリアル番号取得コード例を紹介します。記事ではサンプルコードを詳細に紹介しており...