Microphone Covers Screen and blocks the text the user should read and record

[NickLusson]

Issue Type

• Bug Report
• Feature Request
• Support Question

Description

When you press the capture audio button it first asks for permission to use the microphone, then it opens the microphone in a full screen that covers the statements that I would like to be read, so the user can record but cannot see the statements they are supposed to read into the microphone.

Information

here is some code showing the issue, first the html showing 3 statements that I would like the user to record, and the capture audio button, and then the ts file:

here is the html

Command or Code

<ion-content>
  <ion-grid>
    <ion-row>
      <ion-col>
             <h1 class="ion-text-center">Record these statments</h1><br>
            <p class="ion-text-center">
              Go somewhere quiet.. and record these statements with as much enthusiasim as you can!
            </p>
            1. I am worthy of success. I am worthy of peace.<br><br>
            2. I accept myself as I am. I love myself as I am. I release all limiting thoughts. I honor myself always.<br><br>
            3. I am fearless. I am Powerful.<br><br>
           
                    <div class="ion-text-center">
                      <ion-button color="danger" (click)="captureAudio()">
                        <ion-icon name="mic"></ion-icon>Capture Audio</ion-button>
                    </div>
                  
            <ion-list style="background-color:#f0f0f0">
              <ion-radio-group value="1" required id="recordingradio">
              <ion-item *ngFor="let file of mediaFiles" tappable (click)="play(file)" text-wrap>
                My Recording
                <ion-radio id="recording" name="recording" required value="1"></ion-radio><br><br><br>
                <ion-button slot="end" color="success" href="/results" id="submit">
                  <ion-icon name="arrow-forward-circle" slot="start"></ion-icon>Continue</ion-button>
              </ion-item>
              </ion-radio-group>
            </ion-list>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

Here is the .ts file

import { Component, OnInit, ViewChild } from '@angular/core';
import { NavController } from '@ionic/angular';
import { MediaCapture, MediaFile, CaptureError, CaptureVideoOptions } from '@ionic-native/media-capture/ngx';
import { Storage } from '@ionic/storage';
import { Media, MediaObject } from '@ionic-native/media/ngx';
import { File } from '@ionic-native/file/ngx';

const MEDIA_FILES_KEY = 'mediaFiles';

@Component({
  selector: 'app-confidence2',
  templateUrl: './confidence2.page.html',
  styleUrls: ['./confidence2.page.scss'],
})
export class Confidence2Page implements OnInit {
  mediaFiles = []

  constructor(public navCtrl: NavController, private mediaCapture: MediaCapture, private storage: Storage, private media: Media, private file: File) {}

  ionViewDidLoad() {
    this.storage.get(MEDIA_FILES_KEY).then(res => {
      this.mediaFiles = JSON.parse(res) || [];
    });
  }

  captureAudio(){
    this.mediaCapture.captureAudio().then(res => {
      this.storeMediaFiles(res);
    }, (err: CaptureError) => console.error(err));
  }
  
  play(myFile) {
    if (myFile.name.indexOf('wav.') > -1) {
      const audioFile: MediaObject = this.media.create(myFile.localURL);
      audioFile.play();
    } else {
      let path = this.file.dataDirectory + myFile.name;
      let url = path.replace(/file^\/\//, '');
      
    }
  }

  storeMediaFiles(files) {
    console.log('store: ', files);
    this.storage.get(MEDIA_FILES_KEY).then(res => {
      if (res) {
        let arr = JSON.parse(res);
        arr = arr.concat(files);
        this.storage.set(MEDIA_FILES_KEY, JSON.stringify(arr));
      } else {
        this.storage.set(MEDIA_FILES_KEY, JSON.stringify(files))
      }
      this.mediaFiles = this.mediaFiles.concat(files);
    })
  }
  ngOnInit() {
  }
}

Environment, Platform, Device

Android Device

Version information

ionic 6.9.1
cordova 9.0.0 ([email protected])

plugins:
cordova-plugin-device 2.0.2 "Device"
cordova-plugin-file 6.0.2 "File"
cordova-plugin-ionic-keyboard 2.2.0 "cordova-plugin-ionic-keyboard"
cordova-plugin-ionic-webview 4.2.1 "cordova-plugin-ionic-webview"
cordova-plugin-media 5.0.3 "Media"
cordova-plugin-media-capture 3.0.3 "Capture"
cordova-plugin-nativeaudio 3.0.9 "Cordova Native Audio"
cordova-plugin-nativestorage 2.3.2 "NativeStorage"
cordova-plugin-splashscreen 5.0.2 "Splashscreen"
cordova-plugin-statusbar 2.4.2 "StatusBar"
cordova-plugin-whitelist 1.3.3 "Whitelist"

Checklist

• I searched for already existing GitHub issues about this
• I updated all Cordova tooling to their most recent version
• I included all the necessary information above