How do I show a spinner while audio is loading using Jquery?

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 开发者_StackOverflow中文版track using something like: .bind('progress', function() {..} but I couldn't figure it out.

Thanks!

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.

There is no built-in progress event in jQuery. You have to trigger that event yourself. You are on the right track, you just need to trigger the progress event when your stream is loading.

And don't forget to also define a custom streamLoaded event (you can call it whatever) for when the stream is loaded.

Or you don't really need to use custom events if you don't want to. Just show/hide the spinner at the proper place.

I dont know if you are lookink for that image but I have a llink that has really nice spinners and it's free enter link description here

that's the page.

And what I did was to put the image right next to the text field that I used and put it in

style="display:none"

and then I put in the place where I wanted it to show I put

$("theidoftheimage").show();

and when I wanted it to be hidden I put:

$("theidoftheimage").hide();

that's how I didi it I hope this is useful