implementing audio functionality

This commit is contained in:
tiago.kayaya
2022-03-02 18:23:05 +01:00
parent 5b7511ac7a
commit 7087faccc2
7 changed files with 42 additions and 32 deletions
@@ -175,16 +175,19 @@
</div>
<ion-list>
<ion-item (click)="playFile(storedFileNames)">
<ion-item *ngFor="let audio of storedFileNames">
<span (click)="playFile(audio)">{{audio}}</span>
</ion-item>
<!-- <ion-item (click)="playFile(storedFileNames)">
{{storedFileNames}}
</ion-item>
<ion-item (click)="playFile(storedFileNames)">
{{storedFileNames}}
</ion-item>
</ion-item> -->
</ion-list>
<audio controls>
<!-- <source src="https://www.tabularium.pt/file-upload/5g6DkyMC4MHcuaDyp/Audio%20record.mp3" type="audio/mpeg"> -->
</audio>
<!-- <audio controls>
<source src="https://www.tabularium.pt/file-upload/5g6DkyMC4MHcuaDyp/Audio%20record.mp3" type="audio/mpeg">
</audio> -->
<button (click)="startRecording()">Start Recording</button>
<button (click)="stopRecording()">Stop Recording</button>
<div class="container width-100 d-flex">
@@ -199,7 +202,7 @@
<ion-item class="ion-no-padding ion-no-margin type-message" lines="none">
<ion-textarea autocomplete="on" autocorrect="on" spellcheck="true" *ngIf="!recording" clearOnEdit="true" placeholder="Escrever uma mensagem" auto-grow class="message-input" rows="1" [(ngModel)]="wsChatMethodsService.getDmRoom(roomId).message" (ionChange)="wsChatMethodsService.getDmRoom(roomId).sendTyping()"></ion-textarea>
<ion-textarea autocomplete="on" spellcheck="true" *ngIf="recording" clearOnEdit="true" placeholder="Escrever uma mensagem" auto-grow class="message-input" rows="1" [(ngModel)]="durationDisplay"></ion-textarea>
<button hidden #recordbtn class="btn-no-color" (click)="notImplemented()">
<button #recordbtn class="btn-no-color" (click)="notImplemented()">
<ion-icon slot="end" src="assets/icon/icons-chat-mic.svg"></ion-icon>
</button>
</ion-item>
+11 -7
View File
@@ -20,7 +20,7 @@ import { ChatUserStorage } from 'src/app/store/chat/chat-user.service';
import { environment } from 'src/environments/environment';
import { ThemeService } from 'src/app/services/theme.service'
import { Directory, Encoding, FilesystemDirectory } from '@capacitor/filesystem';
import { Filesystem, Directory, Encoding } from '@capacitor/filesystem';
import { VoiceRecorder, VoiceRecorderPlugin, RecordingData, GenericResponse, CurrentRecordingStatus } from 'capacitor-voice-recorder';
import { Haptics, ImpactStyle } from '@capacitor/haptics';
import { PreviewCameraPage } from 'src/app/modals/preview-camera/preview-camera.page';
@@ -40,9 +40,9 @@ import { SearchPage } from 'src/app/pages/search/search.page';
import { Storage } from '@ionic/storage';
import { FileToBase64Service } from 'src/app/services/file/file-to-base64.service';
import { Camera, CameraResultType, CameraSource } from '@capacitor/camera';
import {Plugins} from '@capacitor/core';
/* import {Plugins} from '@capacitor/core';
const { Filesystem } = Plugins;
const { Filesystem } = Plugins; */
const IMAGE_DIR = 'stored-images';
@@ -144,7 +144,7 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
console.log('MEMBER', value)
})
//this.loadFiles();
this.loadFiles();
VoiceRecorder.requestAudioRecordingPermission();
this.getChatMembers();
Filesystem.mkdir({
@@ -197,13 +197,16 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
directory: Directory.Data
}).then(result => {
console.log(result);
const temp: any[] = result.files.reverse();
this.storedFileNames = result.files;
/* const temp: any[] = result.files.reverse();
this.storedFileNames = temp[0];
console.log(this.storedFileNames);
console.log(this.storedFileNames); */
})
}
startRecording() {
console.log('Recording');
if (this.recording) {
return;
}
@@ -212,6 +215,7 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
}
stopRecording() {
console.log('Stop');
if (!this.recording) {
return;
}
@@ -220,7 +224,7 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
this.recording = false;
if (result.value && result.value.recordDataBase64) {
const recordData = result.value.recordDataBase64;
console.log(recordData);
//console.log(recordData);
this.myAudio = recordData;
const fileName = new Date().getTime() + ".wav";
await Filesystem.writeFile({