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

Question

我正在开发 Asp.Net MVC Web 应用程序。我正在使用 SignalR 调用一个 javascript 方法，在这个方法中，我试图播放来自某些后端事件的声音，但如果我不在同一个浏览器选项卡上或者我的浏览器被最小化，它就不会播放喜欢 youtube 视频（你点击 youtube 视频 link，它不会播放，除非你把那个屏幕前景一次）。

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

播放音频的代码audioId.play();

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

Answer 1

您可以在没有 html 标记的情况下完成。

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

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

查看 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

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

How to play play sound without user's intervention using JavaScript or jQuery?

html

javascript

jquery

signalr