How to tell user about possible audio interruptions when tab loses focus

Question

I have a webapp that plays audio and fails to play audio after some time when out of focus (i.e. that tab isn't open). How should I alert users of possible issues? A couple of solutions I am considering:

• Show a banner when the users starts playing audio: You may experience interruptions. Please leave this tab open or drag it out to create a new window. This is very awkward phrasing IMO. Is there a better way to write this?

• Do nothing while the tab is open, but as soon as the user leaves, pull focus back on the tab and show an alert box with the same text as above.

• Do nothing while the tab is open, but as soon as the user returns after audio cuts out, show an banner with the same text as above.

Answer 1

You could add a suggestion for the user to pin the tab to the left most side of the browser. I believe there's an option on Chrome to do this.

Now, as a web app developer, if the audio in your app cuts out if the user switches tabs, it is not intended behaviour, since tabs are meant to exist to multi-task. If this is a limitation by the browser itself, try to see alternative solutions or else include this in your description of your web app.

Ideally, here's how I feel it should be.

Click on this message to open a new window and enjoy the uninterrupted music!

This doesn't need the user to go into the technicality of facing the decision between new tab and new window. Plus, it gets the thing done in a single click.

Answer 2

If background use is important, provide a pop out button that opens a new, small player window.

^{download bmml source – Wireframes created with Balsamiq Mockups}

This also might be a use case for other implementations such as a browser extension.