title: PhoneGap Media Plugin - can you detect when url stream has loaded?
body: <p>I been having some issues getting my audio player to work correctly in iOS and Android using the PhoneGap Media plugin through Build 3.1</p>
  
  <p>I have play and stop buttons that work fine but when you hit play there is a slight delay as the audio url loads and it freezes the OS. I can kind of cope with that as its a short delay so I thought I'd pop up a loading icon onscreen.</p>
  
  <p>Ive posted a few time here trying to get the JS to work as im no expert but just now I've realised that there is nothing in my code to check if the audio is actually PLAYING!</p>
  
  <p>The playAudio function loads in the audio and then sets the play button to a stop button. I thought <code>function success() {</code>meant it was playing but it actually means it FINISHED playing.</p>
  
  <p>In my code when the link to the audio is clicked the loader function makes a spinner appear on screen and I thought 'success' would turn the loader off because its loaded when in fact whats happening is the laoder stays on and goes away after the track has finished!</p>
  
  <p>I've realized I need a way of detecting if the track is actually PLAYING!</p>
  
  <p>How do I do that?!?!!</p>
  
  <p>Heres the function:</p>
  
  <pre><code>function loadPlay(src, trackName) {
     loader();
     playAudio(src, trackName);
  }
  
  function loader() {
          // make a loader spinner appear as track loads
      $(".loading").addClass("loadingnow");
  }
  
  function playAudio(src,trackname) {
      // for Android
      if (audioPlaying === false) {
          if (device.platform == 'Android') {
              src = '/android_asset/www/' + src;
          }
          media = new Media(src, success, error_error);
          media.play();
          //add playing class so play button is replaced with stop button
          document.getElementById(trackname).parentNode.className="playing";
          audioPlaying = true;
      } else {
          //audio is already playing
      }
  }
  
  function success() {
      // track isplaying so remove the stop button put play button back
      $(".playing").removeClass("playing");
      // now track is playing remove the loader spinner
      $(".loading").removeClass("loadingnow");
  
      audioPlaying = false;
  }
  
  function error_error(e) {
      //alert('great error');
      //alert(e.message);
  }
  
  function stopAudio() {
      // stop playing track
      if (media) {
          media.stop();
          audioPlaying = false;
      }
  }
  </code></pre>
  
  <p>Heres a link to the PhoneGap Media plugin API:
  <a href="http://docs.phonegap.com/en/3.1.0/cordova_media_media.md.html#Media" rel="nofollow">http://docs.phonegap.com/en/3.1.0/cordova_media_media.md.html#Media</a></p>
  
  <p>Do I need to use this bit?</p>
  
  <pre><code>Media.MEDIA_STARTING = 1;
  Media.MEDIA_RUNNING = 2;
  Media.MEDIA_PAUSED = 3;
  Media.MEDIA_STOPPED = 4;
  </code></pre>