I have a site where the user can log in and can start and get calls. The login is automatic after the first time, so they can get to the contacts page without interacting with the site other than opening it. It's a site that automatically starts on the computers of the customers, just so they can receive or start calls, hence they might not even interact with the site.
When they receive a call, a background music starts, like this:
var audio = new Audio('ringtone.mp3');
audio.play();
Of course it does not work unless the customer pressed at least a button or hovered over something on the site, or anything like that. I am wondering if it's possible to start background music without user interaction? I understand it is no longer possible because people do not want annoying ads to play, but I'm wondering if there is a still working solution. Or can I somehow ask for their permission like for notifications? I would ask for it once during the first login, then it would get saved.
Edit: It is not an SPA. Also my problem is not that it does not play sound when the tab is inactive. The problem is that there's a restriction on sounds which prevents JavaScript from playing sounds unless the user did anything on the site, interacted with it (hovering over a button, clicking a button, or anything). The user does not necessarily interact with the site because it starts up automatically, hence the problem when there's an incoming call.
Not sure if the OP's website is a SPA, if your using React, and using something like React-Router etc, this is a SPA (Single Page Application).
Playing Audio automatically in a normal browser window without some form of user action is blocked by most browsers. (sound policy).
Now the reason I asked the OP if his website was a SPA, these work well as Web App's, and Web Apps have a slightly different sound policy. aka, been able to play audio without user interaction.
So how do you make your website into a Web App,.. Easy, you tell the browser :)
For example in Chrome, under more tools, there is an option that says create shortcut.., this does more than just create a shortcut, it also puts your website in Web App mode.
This also works for mobile's too, eg. on Android there is the option Add to home screen,
And yes other browser have this feature too, but Firefox have decided to remove this feature, so it's not a browser I will use, or recommend to my customers anymore. Whats happening with Mozilla, they seem to have been taken over by stubborn dev's. Shame!!
So if the OP website is a SPA, all he has to do is use the create shortcut, and auto start this.
There are other benefits to making into a Web App too, like not having the address bar at the top etc. But again Mozilla have decided that's not what users want or need, thanks Moz, bye bye now..
What if's not SPA?.. ps, SPA just means there is no normal navigation / page loading. (might not have been obvious from my previous explanation).
Ok, things get a little bit more tricky. The OP mentions he auto-starts these in the morning, now the only issue here this prevents any user interaction, so obviously the sound policy kicks in.
So another idea, using something like puppeteer you could start the app, place a button on your website, that could play a startup sound, or even a silent mp3. You could then instruct puppeteer to click this button.