javascript - 如何在停止后继续播放音频并显示按钮

标签 javascript jquery html audio

我正在尝试这样做:

当歌曲播放到 5 秒时,它就会停止,但是当它停止时,我如何显示一个按钮,如果我单击该按钮,歌曲就会继续?

这是我的代码:

<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<audio controls preload id="audio">
        <source src="cancion.mp3" type="audio/mpeg" />
        Tu navegador no soporta esta caracteristica
    </audio> 
    </ul>

    <div id="current">0:00</div>
<div id="duration">0:00</div>
</body>
</html>

<script>
    $(document).ready(function(){
        $("#audio").on("timeupdate",function(event){
      if (this.currentTime >= 5) {
        $("#audio")[0].pause();
      }
     });
    });
    </script>

最佳答案

您可以通过向页面添加一个按钮来实现此目的,该按钮会隐藏直到 5 秒过去。然后,单击按钮后,您可以使用 audio 元素的 play() 方法恢复播放。您还需要设置一个 resumed 标志来跳过超过 5 秒后停止播放的检查。试试这个:

$("#audio").on("timeupdate", function (event) {
  if (this.currentTime >= 5 && !$(this).data('resumed')) {
    $("#audio")[0].pause();
    $('#resume').show();
  }
});

$('#resume').click(function() {
  $("#audio").data('resumed', true).get(0).play();
})

Example fiddle

关于javascript - 如何在停止后继续播放音频并显示按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34047268/

相关文章:

javascript - 根据类值更改颜色

html - DOCTYPE 是什么...用于

javascript - 响应式 jQuery Canvas , Canvas 背景在窗口调整大小时消失

javascript - Openlayers 3 特征的 z 排序

javascript - js :Window. open() 尝试打开本地文件夹失败

javascript - Inappbrowser loadstop 事件不起作用

javascript/json .length 对于长度为 3 的数组返回 1

javascript - ajax数据响应如何返回true或false函数?

javascript - settimeout 后返回到多步最小形式的第一步

javascript - ClojureScript Reagent 父组件不会将光标传递给子组件