Jquery，即使在另一个窗口中也能播放声音

Question

如何在页面上播放声音/通知，即使该页面未在焦点处于活动状态？

function checkOrder()
{
    ...
    ...
    ...

    if (isOrder) {
        var audio = new Audio('/path/to/audio/file.mp3');
        audio.play();
    }
}

通常声音仅在我在页面上处于活动状态时播放。即使我在另一个窗口中活动，我也需要声音重现。

Answer 1

有几种方法可以做到这一点：

1）HTML允许您在大多数现代浏览器中使用html <audio>标记用于此目的

2）使用jQuery创建一个新的Audio对象（就像你已经做过的那样）并将url作为参数传递给声音文件。

警告 - 默认情况下示例非常响亮

var audio = new Audio("https://www.computerhope.com/jargon/m/example.mp3");

$('#start').click(function() {
  audio.play()
});

$('#pause').click(function() {
  audio.pause()
});

.container
{
  border: 1px solid black;
  padding: 5px;
  margin: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container">
  <label>Using audio tag </label><br/>
  <!-- use audio tag !-->
  <audio id="playAudio" controls>
  <source src="https://www.computerhope.com/jargon/m/example.mp3" />
  </audio>
</div>

<div class="container">
  <label>Using jQuery </label><br/>
  <!-- add a button and handle this in jQuery !-->
  <div>
    <button id="start">play</button>
    <button id="pause">pause</button>
  </div>
</div>

以下是<audio>代码支持的浏览器的完整列表：

computerhope.com

的音频赠送金额