Playing Local MP3 Android - Cordova “Media Undefined”

Question

I'm building an app using PhoneGap/Cordova that is to play an mp3 file in the background. I have added the Cordova Media plugin, but when I test in my browser I'm getting "Media" undefined as if it can't find the plugin.

$(document).ready(function() {

   var bgMedia = new Media( getPhoneGapPath('timer') );
   bgMedia.play();  

    function getPhoneGapPath(audiofile) {

      var path = window.location.pathname;
          path = path.substr( path, path.length - 23 );
          path = path + 'audio/'+audiofile+'.mp3';
      return 'file://' + path;
     }
});

I have confirmed that the path is correct for the file. My question is twofold, how do I get the Media plugin configured properly to actually worse (am I missing another step) and what is the proper way to call and play the file?

Using current version of Cordova.

Answer 1

After some digging I was able to make the following work:

 // Wait for device API libraries to load // document.addEventListener("deviceready", onDeviceReady, false); // device APIs are available // function onDeviceReady() { playAudio(); } // Audio player // var my_media = null; var mediaTimer = null; function getCordovaPath() { var path = window.location.pathname; if (device.platform == "Android") { path = "/android_asset/www/"; } // path = cordova.file.applicationDirectory + 'www/' // path = path.substr( path, path.length - 23 ); //path = path + 'audio/'+audiofile+'.mp3'; return 'file://' + path; } // Play audio // function playAudio() { // Create Media object from src //my_media = new Media(src, onSuccess, onError); my_media = new Media(getCordovaPath() + 'audio/timer.mp3', // success callback function () { console.log("playAudio():Audio Success"); }, // error callback function (err) { console.log("playAudio():Audio Error: " + err); }); // Play audio my_media.play(); } // Pause audio // function pauseAudio() { if (my_media) { my_media.pause(); } } // Stop audio // function stopAudio() { if (my_media) { my_media.stop(); } } // onSuccess Callback // function onSuccess() { console.log("playAudio():Audio Success"); } // onError Callback // function onError(error) { alert('code: ' + error.code + '\\n' + 'message: ' + error.message + '\\n'); } // Set audio position // function setAudioPosition(position) { document.getElementById('audio_position').innerHTML = position; } 

Answer 2

Cordova plugins works only on devices or emulators. If you run the project in the browser you need to mock them to prevent that the app crash.

When I run the project in the browser I uncomment this line from index.html:

<script src="js/mocks/plugin.media.js"></script>

plugin.media.js:

window.Media = {
  get: function(){},
  play: function(){},
  stop: function(){},
  seekTo: function(){},
  pause: function(){},
  getDuration: function(){},
  getCurrentPosition: function(){},
  startRecord: function(){},
  stopRecord: function(){},
  release: function(){},
  setVolume: function(){},
  onStatus: function(){}
};