User Profile

Whenever the mic is turned on on an iOS device using Chrome browser, a popup saying "Microphone Access Allowed" appears. Chrome does not have any documentation/blog regarding the popup. All it has is the support page at https://support.google.com/chrome/answer/2693767?hl=en&co=GENIE.Platform%3DiOS&oco=1 that says: ... When prompted, tap Allow or Don't Allow. To immediately edit your preference, tap Edit. I have a web app that turns microphone on/off frequently which results in the said popup appearing constantly ruining the UX. Is there any way to fix this? Say, for example, make it appear only once, better, disable it altogether? I understand that Chrome is doing it to catch user's attention that an app is accessing the microphone. But in my case, the UX suffers greatly when the core of my app involves using microphone. This happens only on iOS. Has anyone have had similar experience before?

Background I am building a web app where users can talk to a microphone and watch dynamic video that changes depending on what they say. Here is a sample flow: User accesses the page Mic permission popup appears, user grants it User presses start buttton, standby video starts playing and mic turns on User speaks something, the speech gets turned to text, analyzed, and based on that, the src changes The new video plays, mic turns on, the loop continues. Problem The problem in iOS is that volume goes down dramatically to a level where it is hard to hear on max volume if mic access is granted. iPhone's volume up/down buttons don't help much either. That results in a terrible UX. I think the OS is forcefully keeping the volume down, but I could not find any documentation about it. On the contrary, if mic permission not granted, the volume does not change, video plays in a normal volume. Question Why does it happen and what can I do prevent volume going down automatically? Any help would be appreciated. This will not happen in PC(MacOS, Windows) or Android OS. Has anyone had any similar experience before? Context For context: I have two tags(positioned:absolute, with and height 100%) that are switched(by toggling z-indexs) to appear one on top of the other. This is to hide load, buffer and black screen from the user for better UX. If the next video is loaded and can play, then they are switched places. both tags have playsinline to enable inline play as required by webKit. both tags start out muted, muted is removed after play starts. video.play() is initiated after user grants mic permission Tech stack NextJS with Typescript, latest versions Testing on latest Chrome and Safari on iOS 16 fully updated