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

推薦する

MySQL 8.0.18 インストール構成の最適化チュートリアル

MySQLのインストール、設定、最適化は参考用です。具体的な内容は次のとおりです。 MySQL ダウ...

jQuery Ajax チャットボットの実装事例

チャットボットは多くの手作業を省くことができ、顧客サービス、天気予報対応など、さまざまな状況で使用で...

Vueフォームバインディングとコンポーネントの詳細な説明

目次1. 双方向データバインディングとは1. データの双方向バインディングを実装する必要があるのはな...

Axiosは繰り返しのリクエストをキャンセル

目次序文1. リクエストをキャンセルする方法2. 重複リクエストの判定方法3. 繰り返しリクエストを...

HTML における DOM 要素のスクロールバースクロール制御の詳細な説明

dom要素に新しい子要素を追加し、新しく追加された新しい要素がコンテナーのスコープを超えた場合は、次...

Vueはvue-quill-editorリッチテキストエディタを使用し、画像をサーバーにアップロードします。

目次1. 準備2. グローバルコンポーネント quill-editor を定義する1. テンプレート...

Xshell にショートカット コマンドを追加する方法

便利なターミナル エミュレーターである Xshell は、開発者がホスト サーバーをリモート管理する...

フレックスレイアウトによるシームレスなスクロールのサンプルコード

この記事では、シームレスなスクロールを実現するためのフレックスレイアウトのサンプルコードを主に紹介し...

フォーム入力ボックスに関するWebデザインのヒント

1. キャンセル ボタンが押されたときの破線ボックス<br /> 入力に属性値 hide...

JavaScript マクロタスクとマイクロタスク

マクロタスクとマイクロタスクJavaScript はシングルスレッド言語です (マルチスレッドの場合...

MySql 範囲内の検索時にインデックスが有効にならない理由の分析

1 問題の説明この記事では、確立された複合インデックスをソートし、レコード内の非インデックス フィー...

JS+AJAX は、州、市、地区のドロップダウン リストのリンクを実現します。

この記事では、州、市、地区のドロップダウンリストのリンクを実現するためのJS + AJAXの具体的な...

MySQL 5.7.17 winx64 無料インストールバージョン設定方法グラフィックチュートリアル

mysql5.7.17無料インストールバージョンのインストールに関する最近の経験1.ダウンロードして...

ラベルタグの使用時に発生する問題の分析と解決策

最近何かをするときにラベル タグを使用しました。以前はラベル タグをほとんど使用していなかったため、...

mysql 8.0.16 winx64 および Linux でルート ユーザーのパスワードを変更する方法

データベースへの接続などの基本的な操作はご自身で行ってください。この記事ではパスワードの変更方法を中...