如何使用 JavaScript 或 jQuery 在无需用户干预的情况下播放声音？

Question

我正在开发 Asp.Net MVC Web 应用程序。我正在使用 SignalR 调用一个 javascript 方法，在该方法中，我尝试从某些后端事件播放声音，但如果我不在同一个浏览器选项卡上或者我的浏览器像 youtube 视频一样最小化，则它不会播放（您点击 YouTube 视频链接，除非您将该屏幕前景设置一次，否则它不会播放）。

<audio id="audioId" autoplay loop>
    <source src="test.mp3" type="audio/mpeg">
</audio>

播放音频的代码

audioId.play();

如果我在屏幕上，它可以正常工作，但如果屏幕最小化或在后台，则不行。

Answer 1

无需 html 标记即可完成。

但请记住，在用户最小化屏幕之前需要加载音频文件。用户必须在最小化（如任何自动播放功能）之前与文档进行交互（滚动、单击或任何触摸或单击事件）。

否则你会出现以下错误： 未捕获（承诺中）DOMException：play() 失败，因为用户没有先与文档交互

在 google 上查看有关自动播放的信息：https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

所以如果你尝试这样的事情是行不通的：

$(element).on('your-event', function(){
  var audio = new Audio('https://file-examples-com.github.io/uploads/2017/11/file_example_MP3_700KB.mp3');
  audio.play();
}

但是这个方法应该可行

var audio = new Audio('https://file-examples-com.github.io/uploads/2017/11/file_example_MP3_700KB.mp3');
$(element).on('your-event', function(){
  audio.play();
}

这是一个关于 codepen 的工作示例：https://codepen.io/zecka/pen/VwjxGbE

Answer 2

您可以使用 Howl 库通过用户交互来播放声音，我将与您分享我的代码

嚎叫CDN

设置超时（（）=> { var 声音 = 新的嚎叫({ src: ['{{ asset('assets/mp3/notification.mp3') }}'] }); 声音.play(); }, 600);