uni-app の紹介uni-app は、Vue.js を使用してクロスプラットフォーム アプリケーションを開発するためのフロントエンド フレームワークです。 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を応援してください。 以下もご興味があるかもしれません:
|
<<: 写真とテキストによる MySQL と sqlyog のインストール チュートリアル
>>: Nexus をベースに Alibaba Cloud プロキシ ウェアハウスを構成するプロセスの分析
表の構造は以下のとおりです。記事数は690件のみです。 記事テーブル article(id,titl...
目次JSON は次の 2 つの構造に基づいて構築されます。 2. JSON形式1. オブジェクト2....
1. ポート 80 が占有されているかどうかを確認します。通常、ポート 80 は Apache サー...
目次1. v-bind: 要素の属性にデータをバインドできる2. v-bind: は次のように省略で...
まず実装手順について説明します。最終結果 2. コードの実装HTML部分 <div class...
目次1. MySQL 結合バッファ2. JoinBufferCacheストレージスペースの割り当て3...
原因最近、プロジェクトのリファクタリングを始めたのですが、マスタースレーブと読み取り書き込み分離を使...
目次0x0 はじめに0x1 RBAC 実装0x2 クレームベースの承認0x3 統合 CASL 0x4...
この記事では、CSS ワープ シャドウの実装コードを紹介し、皆さんと共有します。詳細は以下の通りです...
Mysqlデータベーステーブルの定期的なバックアップの実装0. 背景実際の開発環境では、フロントエン...
<br />長年の専門的なアートデザイン教育を通じて「美とは何か」を学びましたが、「美を...
序文: Vue3 がリリースされてからかなり経ちますが、最近、会社のプロジェクトでVue3 + Ty...
目次スプリングブートDocker spring-boot-maven-プラグインSpotify Ma...
コードをコピーコードは次のとおりです。高さ:自動 !重要;高さ:550px;最小高さ:550px; ...
MySQLデータベースをダウンロードするには、https://dev.mysql.com/down...