Question

I have made a simple play/pause button that works in conjunction with the audio html5 tag and jquery:

$(document).ready(function() {
   $("#stop-bt").hide();

 $("#play-bt").click(function() {
   $("#play-bt").hide();
   $("#audio-player")[0].play();
   $("#stop-bt").show();
 });

 $("#stop-bt").click(function() {
    $("#stop-bt").hide();
    $("#audio-player")[0].pause();
    $("#audio-player")[0].currentTime = 0;
    $("#play-bt").show();
 });
});

I want to add a spinner to indicate the stream is loading. How would I show a div containing my spinner (#spin) when the stream is loading and hide it when the stream starts playing?

I thought I might be on the right track using something like: .bind(‘progress’, function() {..} but I couldn’t figure it out.

Thanks!

Answer 1

Thanks for the answers. I’m sure there are many ways to solve this problem. This is what ended up working for me:

$(document).ready(function() {
 $("#stop-bt").hide();
 $("#spin").hide();

 $("#play-bt").click(function() {
   $("#play-bt").hide();
   $("#spin").show();
   $("#audio-player")[0].play();
  });

 $("#audio-player").bind('playing', function() {
   $("#spin").hide();
   $("#stop-bt").show();
 });


 $("#stop-bt").click(function() {
  $("#stop-bt").hide();
  $("#play-bt").show();
  $("#audio-player")[0].pause();
  $("#audio-player")[0].currentTime = 0;
 });

});

This is a pretty easy solution and might be elementary to some, but in the hopes of helping someone else I want to explain it. This answer assumes you have the corresponding html divs somewhere on the page.

Essentially, how it works is to start by hiding the div containing the stop button, and the div containing the spinner. Next, if the div containing the play button is clicked, it then hides the play button, shows the spinner div and attempts to play the audio.

There is an event in conjunction with the html audio tag called ‘playing’ (among others) that reveals when the audio begins playing. When the playing event begins, it hides the div containing the spinner and shows the div containing the stop button.

Finally, if the stop button is clicked, it hides the stop div container, shows the play button div container, and pauses the audio.