时间戳

首页 > 解决方案 > 如何在没有用户干预的情况下使用 JavaScript 或 jQuery 播放声音？

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

问题描述

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

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

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

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

标签： javascripthtmljquerysignalr

解决方案

您可以在没有 html 标记的情况下执行此操作。

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

或者你会遇到以下错误： Uncaught (in promise) DOMException: play() failed because the user didn't先与文档交互

看看谷歌关于自动播放：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

推荐阅读