CODEWITHSUNDEEP
javascriptiphoneaudioaudio-recordingrecording
Caio Frota
Caio Frota

Reputation: 185

Audio on iphone lowering after enabling mic

I'm on a project that I need to reproduce audio and sometimes wait for an audio input. My problem is when I'm enabling the audio (getUserMedia), record and do whatever I need to, then I remove the tracks from the stream, ok, the mic is supposed to be off. At least it's not showing on my chrome tab anymore.

But the next audio that I'll play, the audio is too low! Ths problem happens on iPhone when I'm not using any bt/ear devices.

My audio player:

export class WebPlayer {
  private audio: HTMLAudioElement;

  constructor () {
    this.audio = new Audio();
    this.audio.src = "https://onedrive.live.com/download?cid=BF36D99BF1E21AEA&resid=BF36D99BF1E21AEA%21255469";
  }

  play() {
    this.audio.play();
  }

  pause() {
    this.audio.pause();
  }
}

const webPlayer = new WebPlayer();
export default webPlayer;

Microphone:

export class Microphone {
  private audioCtx: AudioContext = new AudioContext();
  private stream: MediaStream | undefined;
  private buff: ArrayBuffer | undefined;

  async record() {
    this.stream = await navigator.mediaDevices.getUserMedia({audio: {channelCount: 1}, video: false});
    const microphone = this.audioCtx.createMediaStreamSource(this.stream);
    const filter = this.audioCtx.createBiquadFilter();
    microphone.connect(filter);
    filter.connect(this.audioCtx.destination);
  }

  async stop() {
    this.stream?.getAudioTracks().forEach((track) => track.stop());
  }
}

const microphone = new Microphone();
export default microphone;

My app.tsx

function App() {

  return (
    <div className="App">
      <header className="App-header">
        <button onClick={() => webPlayer.play()}>Play Oasis</button>
        <button onClick={() => webPlayer.pause()}>Pause Oasis</button>
        <button onClick={() => microphone.record()}>Start recording</button>
        <button onClick={() => microphone.stop()}>Stop recording</button>
      </header>
    </div>
  );
}

How to reproduce the problem:

  1. Click on Play Oasis;
  2. Click on Start Recording;
  3. Click on Stop rocording;
  4. The audio is now very low. I can pause and play it again and it keeps very low;

Intersting: If after all, I click on Stop Oasis, change the phone tab, go back to the app tab then I click on play, the audio is normal!

GitHub Project: https://github.com/caiofrota/audio-issue

Upvotes: 1

Views: 376

Answers (0)

Related Questions