Question

我正在建立一个带有时钟和按钮的网页，当点击或点按时，它会播放两个文件，说“＆＃39;时间。我在顺序播放两个文件时遇到问题;目前他们两人基本上同时玩。

我非常感谢帮助让mp3文件顺序播放。目前他们几乎在同一时间开始。

这是我的HTML，包括触发时间的按钮。

@media (min-width: 992px)

currentHours和currentMinutes参数是自动更新页面上时间的函数的一部分。除了音频文件重叠/不按顺序播放外，此部分目前似乎运行顺畅。

我的JavaScript函数读取：

  <body onload="updateClock(); setInterval('updateClock()', 1000 )">
    <div style="clear: both;"> </div>
    <h1>What time is it?</h1>
    <p>Ideally this will have a button that will play the time.</p>
    <div id="clockcontainer">
      <span id="clock">&nbsp;</span>
    </div>
    <div id="voicebuttoncontainer">
      <button id="voicebutton" onclick="playSound(currentHours,currentMinutes)">Hear the time</button>
    </div>

如果你有关于如何在hr完成后进行mn游戏的建议，我将不胜感激。

更新，2017年11月20日：如果您阅读下面的评论，您会发现@ Cyber-Shadow非常友好地通过确定我需要附加事件处理程序来帮助解决此问题到我的第一个play（）函数。这是一个巨大的帮助。

但几周之后，我意识到我的功能并不适用于移动或桌面Safari。我收到以下错误消息：

未处理的Promise拒绝：NotAllowedError（DOM例外35）：当前上下文中的用户代理或平台不允许该请求，可能是因为用户拒绝了权限。

它似乎与Safari（桌面和移动设备）和其他移动浏览器有关。自动播放的局限性。例如，Safari在6月发布的消息：https://webkit.org/blog/7734/auto-play-policy-changes-for-macos/

在任何情况下，为了解决这个限制，我将第二个play（）函数从其嵌套函数中拉出来，所以它最初在与第一个play（）函数相同的范围内触发，然后我跟着它使用pause（）函数。更具体地说，该功能来自于此：

// Function to play audio file
function playSound(hour,minute) {
    var path = "~/www/clock/recordings/"
    var hr = new Audio(path + hour + ".mp3");
    var mn = new Audio(path + minute + ".mp3");
    hr.play();
    mn.play();
}

......对此：

// Function to play audio file
function playSound(hour,minute) {
    hr.play();
    $(hr).on("ended", function() {
      mn.play();
    });
}

在第一个播放功能之后触发播放功能允许我使用下面更详细概述的事件处理程序。

Answer 1

您可以使用jQuery事件侦听器。它如下：

$("hr").on("ended", function() {
mn.play();
});

这将跟踪第一个音频结束的时间，然后您可以播放第二个音频。

注意：为了能够使用jQuery，请将此代码添加到<head>

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

完成第一个音频文件后播放第二个音频文件，同时解决移动浏览器上的播放（）限制问题

1 个答案: