I have been trying to record and play an audio response ing from the server using web audio API. But when mic is in use or even stopped programmatically the playback volume is very low. It seems a feature of iPhone but it's really annoying when you are running a voice assistant like app in the browser. Here's what I tried using javascript:

stream.getTracks().forEach(track => track.stop()) // Mic muted but still volume is low

and

stream.forEach(function(track) {
    track.enabled = false; // Mic muted but still volume is low

});

Revoking mic permission works but it will be annoying when asking permission every time user trying to record. Is there any other efficient way to temporarily stop mic or regain the original playback volume?

I have been trying to record and play an audio response ing from the server using web audio API. But when mic is in use or even stopped programmatically the playback volume is very low. It seems a feature of iPhone but it's really annoying when you are running a voice assistant like app in the browser. Here's what I tried using javascript:

stream.getTracks().forEach(track => track.stop()) // Mic muted but still volume is low

and

stream.forEach(function(track) {
    track.enabled = false; // Mic muted but still volume is low

});

Revoking mic permission works but it will be annoying when asking permission every time user trying to record. Is there any other efficient way to temporarily stop mic or regain the original playback volume?

• javascript
• ios
• safari
• mobile-safari
• web-audio-api

2 Answers 2

Audio Session API

...probably is the best solution for you.

There are several audio session types for different purposes. Default value is auto and in your use case you probably want to set it to play-and-record, as it allows you to use both your mic and your speaker:

navigator.audioSession.type = 'play-and-record';

You can read it further here: https://w3c.github.io/audio-session/

Note: at the time of writing - Audio Session API is in an "Editor’s Draft" state, so you should check for that particular navigator property prior to rely on it. But it does work in Safari on iOS 16.4.1, though.

This can be caused by echo cancellation. This feature tries to prevent the the audio playback from being picked up by the microphone.

This feature can be turned off programmatically, e.g.

const stream = await navigator.mediaDevices.getUserMedia({ 
  audio: { echoCancellation: false },
});

This requests a "track" with echo cancellation turned off. The system can satisfy this request by supplying a device that would otherwise have echo cancellation turned on by default