Problem
In our enterprise React application, we're experiencing audio playback issues in Safari with the following scenario:
- The app contains an iframe that plays MP3 narrations using Howler.js
- When the tab becomes inactive due to no user activity, Safari kills the resources and stops the audio
- Upon returning to the tab and interacting, all functionality resumes except for audio playback
- Currently, the only workaround is closing the tab and opening a new one
Question
Is there a way to restore audio playback functionality when the tab becomes active again, without requiring a tab refresh?
Technical Details
- Framework: React Audio
- Library: Howler.js
- Browser: Safari Content
- MP3 files played within an iframe
Expected Behavior
Audio playback should resume normally when returning to the tab and interacting with it.
Current Behavior
Audio remains non-functional after tab becomes active again, requiring a complete tab refresh to restore functionality.