uniappは録音アップロード機能を実現

uniappは録音アップロード機能を実現

uni-app の紹介

uni-app は、Vue.js を使用してクロスプラットフォーム アプリケーションを開発するためのフロントエンド フレームワークです。
開発者は Vue.js コードを記述し、uni-app はそれを iOS、Android、WeChat アプレットなどの複数のプラットフォームにコンパイルして、正しく実行され、優れたエクスペリエンスが提供されるようにします。

HTML部分

クリックするとポップアップレイヤーが出てくる録画画像を書きました(QQ風に)

ここに画像の説明を挿入

スタイルの書き方については詳しく説明しません。誰もが知っています。

ここに画像の説明を挿入

js部分

ここがポイントです!!!

ここに画像の説明を挿入

インスタンスを作成する

全体像を掴むために、いつでも録画を開始したり停止したりできるようにしました。全体像に落とし込みました。

const recorderManager = uni.getRecorderManager();//録音インスタンスを作成 const innerAudioContext = uni.createInnerAudioContext();//再生に使用するインスタンス // iPhoneがミュートされて再生できなくなるのを防ぐため uni.setInnerAudioOption({
		従うミュートスイッチ: false
	})
	innerAudioContext.autoplay = true;
	エクスポートデフォルト{

録音を開始

this.timecount = '00:00:00'; //録画時間を初期化します this.hour = 0;
this.minute = 0;
this.second = 0;
this.getTimeIntervalplus(); //タイマーをカプセル化し、タイミングを開始するために呼び出します const options = { //パラメータduration: 600000,
	サンプルレート: 44100,
	チャンネル数: 1,
	エンコードビットレート: 192000、
	フォーマット: 'mp3',
	フレームサイズ: 50
}
レコーダーマネージャーを起動します。オプション; 

ここに画像の説明を挿入

録音終了

最小期間を制限する必要がある場合は、ご自身で判断してください。ここでは書きませんでした。

recorderManager.stop(); // 記録終了 clearInterval(this.timer); // タイミング終了

録音を再生

innerAudioContext.src = this.voicePath; //再生アドレス(上記で記録したローカルアドレス)
innerAudioContext.play();//再生

再生を一時停止

innerAudioContext.pause();//再生を一時停止 clearInterval(this.timer);//タイマーをクリア

バックエンドに録音を送信する

//録音を終了して録音を送信するsubmitrecord: function() {
	this.count += 1; //これは、複数の送信を防ぐためのグローバル変数を定義します if (this.count == 1){
		コンソールにログ出力します。
		var https = getApp().globalData.https;
		if (this.recordednum == 2) {
		this.recordednum = 3;
		レコーダーマネージャーを停止します。
		タイマー間隔をクリアします。
	}
	if (this.voicePath != '') {
		コンソールにログ出力します。
		uni.uploadFile({
			url: https + 'Uploads/uploadVoiceVideo',
			ファイルパス: this.voicePath、
			名前: 'ファイル',
			成功: (res) => {
			カウント = 0;
			//初期化 this.initialize()//タイマーを初期化する関数をカプセル化しました this.timer = this.timecount;
			this.show_recording = false;
			var データ = JSON.parse(res.data);
			if (this.current == 0){//どの列にオーディオが録音されているかを判断し、それを挿入し直します this.firsvideo.push(data.address);
				} それ以外の場合 (this.current == 1) {
					this.secovideo.push(データ.アドレス);
					コンソールにログ出力します。
				} それ以外の場合 (this.current == 2) {
					this.thrivideo.push(データ.アドレス);
				}
				uni.showToast({
						タイトル: '送信に成功しました!',
						アイコン: 'なし'、
						所要時間: 1200
				})
			},
			失敗: (エラー) => {
				uni.hideLoading();
				uni.showToast({
					タイトル: 'アップロードに失敗しました~',
					アイコン: 'なし'、
					所要時間: 1200
				})
					戻る
				}
			});
		} それ以外 {
			console.log("記録に失敗しました")
			uni.showToast({
				タイトル: 「録画に失敗しました」
				アイコン: 'なし'、
				所要時間: 1200
			})
			uni.hideLoading();
			this.show_recording = false;
			this.checkPermission()
			this.rerecord()
		}
	} それ以外 {
		uni.showToast({
			タイトル: 「繰り返し送信しないでください」
			アイコン: 'なし'、
			期間: 2000
		})
	カウントを0にします。
	}
},

再録音

//再録音 rerecord: function() {
				//タイマーを初期化する this.initialize()
				this.getTimeIntervalplus();//タイミング開始 const options = {
					期間: 600000、
					サンプルレート: 44100,
					チャンネル数: 1,
					エンコードビットレート: 192000、
					フォーマット: 'mp3',
					フレームサイズ: 50
				}
				recorderManager.start(options);//録画を開始 },

onLoad部分

onLoad(オプション) {
			var appointment_message = オプション。appointment_message;
			予約メッセージ = JSON.parse(予約メッセージ);
			this.appointment_message = 予約メッセージ;
			that = this とする;
			レコーダーマネージャー.onStop(関数(res) {
				console.log('レコーダー停止' + JSON.stringify(res));
				that.voiceDuration = res.duration;
				that.voicePath = res.tempFilePath;
				コンソールログ(res);
			});
		},

タイマー

// タイマー増分 getTimeIntervalplus() {
				タイマー間隔をクリアします。
				this.timer = setInterval(() => {
					this.second += 1;
					(this.second >= 60)の場合{
						this.minute += 1;
						this.second = 0;
					}
					(this.minute >= 10)の場合{
						this.recordednum = 3;
						レコーダーマネージャーを停止します。
						タイマー間隔をクリアします。
					}
					this.second2 = this.second;
					this.minute2 = this.minute;
					this.timecount = this.showNum(this.hour) + ":" + this.showNum(this.minute) + ":" + this
						.showNum(この秒数);

 - console.log("this.timecount", this.timecount)

				}, 1000);
			},

データセクション

データ() {
			戻る {
				action: 'https://yl.letter-song.top/api/Uploads/uploadPicture', //画像アドレスをアップロード textareavalue: '', //テキスト説明値 fileList2: [], //画像パス2を返す
				fileList3: [], //画像パス3を返す
				fileList: [], //画像パス1を返す
				firsvideo: [], //録画パス1
				secovideo: [], //録画パス2
				thrivideo: [], //録画パス3
				appointment_message: '', //前のページから渡された予約情報 list: [{ //ラベルテーブル名: '過去の症状'
				}, {
					名前: 「最近の症状」
				}, {
					名前: 「この症状」
				}],
				current: 0, //選択された項目 sty: { //スライダースタイル height: '4px',
					境界半径: '2rpx',
					左上境界線半径: '10px',
					背景色: '#3ECEB5'
				},
				activeItem: { //選択されたアイテムのスタイルカラー: '#333333',
					フォントの太さ: '600',
					フォントサイズ: '36rpx',
				},
				show_recording: false, //録音ポップアップウィンドウを呼び出すrecordednum: 1, //1: 初期状態2。録音状態3終了voicePath: '', //このオーディオ録音パスvoiceDuration: '',
				タイムカウント: '00:00:00',
				時間カウント2: "",
				時間: 0,
				分: 0,
				秒: 0,
				時間2: 0,
				分2: 0,
				秒2: 0,
				isZant: false、
				タイマー: ''、
				yuming: 「これはドメイン名です」
				permiss: 0, //0は録画許可を有効にすることを意味し、1は録画許可を有効にすることを意味します。
				カウント: 0
			}
		},

uniappの録音アップロード機能に関するこの記事はこれで終わりです。より関連性の高いuniapp録音アップロードコンテンツについては、123WORDPRESS.COMの過去の記事を検索するか、以下の関連記事を引き続き閲覧してください。皆様、今後とも123WORDPRESS.COMを応援してください。

以下もご興味があるかもしれません:
  • uniapp 要素ノードスタイルの動的変更の詳細な説明
  • uniappの無痛トークンリフレッシュ方法の詳細な説明
  • uniapp プロジェクトで MQTT を使用する方法
  • Uniappの小規模プログラム開発経験
  • uniapp アプレットでウォーターフォール フロー レイアウトを実装するためのアイデアとコード
  • Uniapp WeChatアプレット: キー障害の解決策

<<:  写真とテキストによる MySQL と sqlyog のインストール チュートリアル

>>:  Nexus をベースに Alibaba Cloud プロキシ ウェアハウスを構成するプロセスの分析

推薦する

Linux で開いているポートへのリモート アクセスを許可する方法

1. ファイアウォール設定ファイルを変更する # vi /etc/sysconfig/iptable...

Linux カーネルプログラミングにおけるコンテナの of() 関数の紹介

序文Linux カーネルプログラミングでは、マクロ関数 container_of(ptr, type...

Python で pymysql モジュールを使用して MySQL データベースに接続する

pymysqlをインストールするpip install pymysql 2|0pymysqlの使用2...

DockerにRabbitMQを素早くインストールする方法

1. 画像を取得する #Webコントロールページを含むバージョンを指定します docker pull...

CSS floatプロパティの詳細な説明

1. フローティングとは何ですか?フローティングは、その名の通り、浮遊することを意味します。要素がド...

MySQL の遅いクエリの最適化方法と最適化の原則

1. 日付のサイズを比較するには、XML に渡される日付形式は 'yyyy-MM-dd...

MySQL 8.0.13 で日付を 0000-00-00 00:00:00 に設定すると発生する問題を解決する

データベース操作を学び始めたばかりです。今日、データを保存していたところ、エラーが発生していることに...

mysql 5.7.11 winx64 初期パスワード変更

公式サイトからMySQL-5.7.11-winx64の圧縮版をダウンロード。インストール後、パスワー...

Linux コマンドラインのクイックヒント: ファイルの検索方法

私たちのコンピューターには、ディレクトリ、写真、ソース コードなどのファイルが保存されています。たく...

Vue + 要素の動的複数ヘッダーと動的スロット

目次1. 需要2. 効果3. すべてのコード1. 需要ユーザーが自分でテーブルを構成できるようになり...

MySQLでMyISAMストレージエンジンをInnodbに変更した操作記録のまとめ

一般的に、MySQL はデフォルトでさまざまなストレージ エンジンを提供しており、次のように表示され...

WeChat アプレット wxss で外部 CSS ファイルとアイコンフォントを参照する方法

原因外部ファイルをミニプログラムにインポートする方法は次のとおりです: @import "...

Dockerデータボリューム操作の実装

データボリュームの使用開始先ほどのケースでは、ホストからコンテナにデータをコピーする必要がある場合、...

ウェブデザインにおける円形要素の使用例 25 選

本日の投稿では、Web デザインで使用される円形要素の優れた例をいくつか挙げ、美しい丸いボタン、メニ...

MySQLインデックスを追加する3つの原則を簡単に理解する

1. インデックスの重要性インデックスは、列に特定の値を持つ行をすばやく見つけるために使用されます。...