如何在没有用户交互的情况下用JavaScript播放背景音乐



我有一个网站,用户可以在这里登录并启动和获取调用。第一次登录后是自动的,因此他们可以访问联系人页面,而无需与网站交互,而无需要打开它。这是一个在客户的计算机上自动启动的网站,只是为了让他们可以接收或启动电话,因此他们甚至可能不会与网站交互。

当他们接到电话时,背景音乐就会响起,就像这样:

var audio = new Audio('ringtone.mp3');
audio.play();

当然,除非客户至少按下一个按钮或悬停在网站上的某个东西上,否则它是不起作用的。我想知道是否可以在没有用户交互的情况下启动背景音乐?我知道这已经不可能了,因为人们不想播放烦人的广告,但我想知道是否有一个仍然有效的解决方案。或者我可以以某种方式请求他们的许可,比如通知吗?我会在第一次登录时要求它一次,然后它就会被保存。

编辑:这不是SPA。此外,我的问题不是当选项卡处于非活动状态时,它不会播放声音。问题是,对声音有一个限制,阻止JavaScript播放声音,除非用户在网站上做了任何事情,与之互动(悬停在按钮上、单击按钮或其他任何事情(。用户不一定要与网站交互,因为它会自动启动,因此当有来电时就会出现问题。

不确定OP的网站是否是SPA,如果您使用React,以及使用React Router等,这是SPA(单页应用程序(。

大多数浏览器都会阻止在正常浏览器窗口中自动播放音频而不进行某种形式的用户操作。(健全的政策(。

现在,我问OP他的网站是否是SPA的原因是,这些网站和Web应用程序的效果很好,而Web应用程序有一个稍微不同的健全策略。aka,能够在没有用户交互的情况下播放音频。

那么,你如何将你的网站变成一个Web应用程序呢,。。简单,你告诉浏览器:(

例如,在Chrome中,在更多的工具下,有一个选项显示create shortcut..,这不仅仅是创建一个快捷方式,它还将您的网站置于Web应用程序模式。

这也适用于移动设备,例如,在Android上有Add to home screen、选项

是的,其他浏览器也有这个功能,但Firefox已经决定删除这个功能,所以它不再是我会使用或推荐给我的客户的浏览器。Mozilla发生了什么,他们似乎已经被顽固的开发者接管了。羞耻

因此,如果OP网站是SPA,他所要做的就是使用create shortcut,并自动启动它。

制作Web应用程序还有其他好处,比如顶部没有地址栏等。但Mozilla再次决定,这不是用户想要或需要的,谢谢Moz,再见。。

如果不是SPA怎么办?。。ps,SPA只是意味着没有正常的导航/页面加载。(从我之前的解释中可能不太明显(。

好吧,事情变得有点棘手了。OP提到他在早上自动启动这些,现在这里唯一的问题是阻止任何用户交互,所以很明显,健全的策略开始了

因此,另一个想法是,使用类似木偶师的东西,你可以启动应用程序,在网站上放置一个按钮,可以播放启动声音,甚至静音mp3。然后你可以指示木偶师点击这个按钮。

最新更新