Phonegap, stop audio

Question

I tried to make an simple phonegap aplication, where several songs can be played. So far my app can play an song, but when i tap twice the play button:

 <button onclick="playAudio('test.mp3')">Play Some Audio</button>

It plays the song again, so that an echo can be heard, instead of first stop the audio and then beging from the beginning of the song. I tried severeal things but either my stop button works. The Api for stop audio can be found here: http://docs.phonegap.com/en/2.0.0/cordova_media_media.md.html#media.stop This is my stop button:

 <button onclick="stopAudio()">Stop Some Audio</button>

and the entire project:

     <body>
     <h1>Playing Audio</h1>
      <button onclick="playAudio('test.mp3')">Play Some Audio</button>
      <button onclick="stopAudio()">Stop Some Audio</button>
      </div>
     <script type="text/javascript" src="cordova-2.4.0.js"></script>
     <script type="text/javascript" src="js/index.js"></script>
     <script type="text/javascript">
        app.initialize();
        function playAudio(src) {
        if (device.platform == 'Android') {
            src = '/android_asset/' + src;
        }

        var media = new Media(src, success, error_error);

        media.play();

    }

    function success() {
        // ignore
    }

    function error_error(e) {
        alert('great error');
        alert(e.message);
    }

    function stopAudio() {
     if (media) {
     var media = new Media(src, success, error_error);
         media.stop();
         }
    }
    </script>
</body>

So maybe anybody know how to make that stop button work? Sorry for my bad englisch and greetings from germany!

Matt Matt · Accepted Answer · 2013-05-15T11:43:42

You can create a flag when the audio has been played audioPlaying and check that flag each time to attempt to play the audio again. This is the most straight forward solution here.

Also you are using two different instances of your Media object, when you call stop on it you are referencing an entirely different instance. You need to increase the scope of your media object, see below:

EDIT: Added audioPlaying = false; to the stop function to prevent it getting stuck.

 <body>
 <h1>Playing Audio</h1>
  <button onclick="playAudio('test.mp3')">Play Some Audio</button>
  <button onclick="stopAudio()">Stop Some Audio</button>
  </div>
 <script type="text/javascript" src="cordova-2.4.0.js"></script>
 <script type="text/javascript" src="js/index.js"></script>
 <script type="text/javascript">
    var audioPlaying = false;
    var media;
    app.initialize();
    function playAudio(src) {
        if (audioPlaying === false) {
            if (device.platform == 'Android') {
                src = '/android_asset/' + src;
            }

            media = new Media(src, success, error_error);

            media.play();
            audioPlaying = true;
        } else {
            //audio is already playing
        }
    }

function success() {
    // ignore
}

function error_error(e) {
    alert('great error');
    alert(e.message);
}

function stopAudio() {
 if (media) {
     media.stop();
     audioPlaying = false;
     }
}
</script>

Phonegap, stop audio

2 Answers