Question

我想创建一个简单的页面，该页面具有自动播放的音频。它还具有“暂停”和“播放”按钮。我想创建一个函数，当您按下“暂停”按钮时，音频将停止；但三秒钟后，音频将恢复到当前的播放标记。

类似于 if 功能，即当您按下“暂停”按钮时，音频会停止，但会延迟一段时间，例如3秒钟自动按下“播放”按钮。（这就是我想象的可行的方式，但是我没有知识）

这是我的 HTML

<audio id="player" src="audio/song.mp3"  loop></audio>

<div>
<button class="play" onclick="document.getElementById('player').play()">Play</button>
<button class="pausa" onclick="document.getElementById('player').pause()">||</button></div>

Answer 1

我个人可能不同意在 n 秒后自动恢复暂停的媒体的决定。但是出于纯粹的技术理解，我将分享我将如何做。

在已有功能的基础上，您可以在onClick上使用分号分隔多个命令。添加setTimeout（）函数调用以在3000毫秒（3秒）后播放：

<button class="pausa" onclick="document.getElementById('player').pause(); setTimeout(document.getElementById('player').play(), 3000)">||</button>

当然，将所有代码移至某个函数并仅在onclick上调用该函数会更好。这样，您可以拥有更多代码，而不会导致html / view不可读和拥挤。像这样：

编辑：我纠正了一个错字：“ paseNplay（）”而不是“ pauseNplay（）”。现在可以正常使用了！

<button class="pausa" onclick="pauseNplay()">||</button>

Javascript：

function pauseNplay(){
   var player = document.getElementById('player');
   player.pause(); 
   setTimeout(function(){ player.play() }, 3000);
}

按下暂停按钮后，如何使功能在3秒钟后自动恢复音频？

1 个答案: