CODEWITHSUNDEEP
javascriptjqueryhtmlaudio
JorgeAlberto
JorgeAlberto

Reputation: 61

How to continue playing audio after stopped it and show a button

I'm trying to do this:

When the song is at 5 seconds it stop but how I show a button when it stops and if I click the button the song continue?

Here is my code:

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

Upvotes: 1

Views: 757

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337560

You can achieve this by adding a button to the page which is hidden until the 5 seconds has elapsed. Then on click of the button you can use the play() method of the audio element to resume playback. You will also need to set a resumed flag to skip the check which stops the playback after more than 5 seconds. Try this:

$("#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

Upvotes: 1

Related Questions