iPhone启用麦克风后音频音量降低问题排查求助

我正在开发一个需要播放音频并接收音频输入的项目，遇到以下问题：调用getUserMedia启用麦克风并停止音频轨道后（Chrome标签页已无麦克风状态标识），后续播放的音频音量变得极低。该问题仅在未使用蓝牙/耳机设备的iPhone上出现。

特殊现象：若先暂停音频，切换标签页后返回再播放，音量恢复正常。

复现步骤 #

• 点击“Play Oasis”播放音频
• 点击“Start Recording”启用麦克风
• 点击“Stop recording”停止录制
• 此时音频音量极低，暂停再播放仍无改善

相关代码 #

音频播放器代码 #

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;

麦克风代码 #

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;

App组件代码 #

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>
  );
}

内容的提问来源于stack exchange，提问作者Caio Frota