HTML5 audio not playing in PhoneGap App (Possible to use Media?)

Question

Working on a basic sound board for a trip abroad. Set up everything to work fine in Browsers but wanted to use PhoneGap Build/GitHub to make it downloadable as cell service

Answer 1

If you are compiling build in cloud,

Just add following line in your index.html

<script type="text/javascript" src="phonegap.js"></script>

Note: No need to include source phonegap.js, while compiling build phonegap.js will be added.

Also include media plugin in config.xml as:

If platform is Android, If media present in root then Media url must be : /android_asset/www/test.mp3

Answer 2

It could be a content security problem, try with this header in your index.html. In my test project, including or excluding it makes or breaks audio playback and reading local files with $.get() or something like that

<meta http-equiv="Content-Security-Policy" content="default-src 'self' http://appvipswi.easwi.it; script-src 'self' 'unsafe-inline'; media-src 'self'">

Answer 3

none of the above worked for me. I have to change the file extension. This is whats worked.

<audio id="a3" controls="controls">
  <source id="s3" src="mp3.audio" type="audio/mp3" />
</audio>

I didnt even have to specify /android_asset/www/

Answer 4

Uff that was really hard and confusing ... But I finally did it!

Here is exactly what i did:

index.html

<audio id="successSound" src="sounds/sayHello.mp3" type="audio/mpeg" ></audio>
<button onclick="playAudio('successSound')">Play successSound local</button>

AndroidManifest.xml

<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />

index.js

function playAudio(id) {
var audioElement = document.getElementById(id);
var url = audioElement.getAttribute('src');
var my_media = new Media('/android_asset/www/' + url,
        // success callback
         function () { console.log("playAudio():Audio Success"); },
        // error callback
         function (err) { console.log("playAudio():Audio Error: " + err); }
);
       // Play audio
my_media.play();

}

plataform/android/res/xml.config

<feature name="Media">
        <param name="android-package" value="org.apache.cordova.media.AudioHandler" />
    </feature>

And it finally works!!! :D uhuuuuu

Answer 5

I've been banging my head all week, and I finally got Media to work! There are many gotchas:

As per Geevan's answer, you do need <script type="text/javascript" src="phonegap.js"></script> on your page.

Step 1:

You need to use org.apache.cordova.media version 0.2.9 or higher (I'm using 0.2.11). As of this writing, PhoneGap Build only supports up to version 0.2.8. I believe the patch notes for 0.2.9 may have resolved my issues.

Step 2:

The PhoneGap documentation for version 3.0.0 has a typo, be sure you are using at least the 3.3.0 documentation, and make sure that the following is typo-free in your config.xml:

<feature name="Media">
    <param name="android-package" value="org.apache.cordova.media.AudioHandler" />
</feature>

(the word "media" in "org.apache.cordova.media.AudioHandler" was missing in the 3.0.0 documentation)

Step 3:

If you're forced to use the CLI version of PhoneGap (NOT PhoneGap Build) due to the issue described in step 1, be sure you add the required plugins. This is described in the documentation:

> cordova plugin add org.apache.cordova.media

And add <gap:plugin name="org.apache.cordova.media" /> to your config.xml

Step 4:

You need to add "/android_asset/www/" to all of your audio file paths. Eg:

new Media('/android_asset/www/' + src);

Step 5:

Do all audio loading after the device is ready. Eg:

document.addEventListener("deviceready", Game.load);

Once I made these changes, my audio started to work! Good luck!

Answer 6

Its a sound file path issue.

instead of /android_asset/www/audio/AudioFile2.mp3

try

/android_asset/www/default/audio/AudioFile2.mp3

I see all other settings are correct in your shared code.