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