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

Posted 2023-02-25

【中文标题】Jquery，即使在另一个窗口中也播放声音

【英文标题】：Jquery, play sound even while in another window

【发布时间】：2017-10-24 14:20:20

【问题描述】：

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

function checkOrder()

    ...
    ...
    ...

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

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

【问题讨论】：

也许this question 的答案会很有趣：o)

【参考方案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