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

问题描述：

我正在构建带时钟和按钮的网页，点击或点按时会播放两个“说”时间。我在顺序播放这两个文件时遇到问题;目前他们都基本同时进行。在完成第一个音频文件后播放第二个音频文件，同时解决移动浏览器上的播放（）限制

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

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

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

的currentHours和currentMinutes参数是自动更新的时间在网页上的功能的一部分。这部分似乎目前工作顺利，除了音频文件重叠/不按顺序播放。

我的JavaScript函数读取：

// 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(); 
}

如果您有办法，使MN发挥人力资源的建议完成后，才我很感激他们。

UPDATE，2017年11月20日：如果你看过下面的评论，你会看到@数码阴影非常亲切地帮助查明，我需要一个事件处理程序附加到我第一次玩解决这个问题（）功能。这是一个巨大的帮助。

但几周后，我意识到我的功能在移动或桌面Safari上不起作用。我收到以下错误消息：

未处理无极抑制：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) { 
    hr.play(); 
    $(hr).on("ended", function() { 
     mn.play(); 
    }); 
}

...这样的：

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

触发播放功能只是后的第一个播放功能让我使用了在列出的事件处理程序以下更详细。

答

你可以做的是使用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>

感谢@ CYBER-影子 - 我可能忽视的东西obvs在这里，但你可以给我如何一点点更多信息整合这个？我试过在我原来的帖子里修改了我的javascript，所以它显示如下： hr.play（）; （）“（结束），function（）{ mn.play（）; }）; } ...但它不工作。 – scaffolding

这样做，谢谢@CyberShadow – scaffolding

@scaffolding很高兴我可以帮助:) –

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

相关推荐