I’m currently developing a meditation app using Expo-AV within a React-Native environment, with an initial focus on web deployment before porting to Android and iOS. The app’s key feature involves playing a looping breath sound (mp4) alongside music (mp3), which works seamlessly on desktop browsers.
However, I’ve encountered a problem when testing the web version on iPhone (I haven’t tested on Android yet). When I attempt to play the video and mp3 simultaneously, one of the two gets canceled out on mobile browsers. Specifically, initiating the video playback mutes the mp3 audio. This issue does not occur on desktop, making it particularly challenging to diagnose and resolve.
The core functionality hinges on both audio and video playing simultaneously without interruption, so this issue is a significant roadblock. I’m looking for insights, suggestions, or solutions from anyone who may have faced and overcome similar challenges, especially concerning Expo-AV and React-Native-Web compatibility on mobile browsers.
If necessary, I can share snippets of my code for a more detailed analysis.
Thank you in advance for your help!
To address the issue of simultaneous audio and video playback in my Expo-AV and React-Native-Web app, I’ve experimented with isolating the core functionalities of the mp3 (breath sound) and mp4 (video) players into separate files. This setup allowed both the audio and video to play concurrently on the initial run. However, the problem reoccurs when the video loops: the mp3 audio gets muted as soon as the video starts its loop.
Additionally, I attempted a workaround by muting the video’s audio while letting it play, which did allow the mp3 background music to continue playing. Yet, this solution proved to be temporary; as soon as the video’s audio was re-enabled, the mp3 audio would automatically mute itself again. It’s crucial to note that these issues are absent in the PC version of the app, where both audio and video play flawlessly together without any conflicts.