Play sound on Phonegap app for Android

I try to play an mp3 file. This works if I change the path to the file on my local webserver, but if I run this on an Android device the sound is not played and no error is shown.

I am pretty shure that the mp3 file is not found, but I still don’t know how to fix it.

This is the Html


        <audio id="successSound" src="/android_asset/www/sound/successSound.mp3" type="audio/mpeg" ></audio>
           <audio id="errorSound" src="/android_asset/www/sound/errorSound.mp3" type="audio/mpeg" ></audio>
<!-- some more UI -->

This is the Javascript


The is the file structure

`-- www
    `-- index.html
        |-- sound
        |   |-- errorSound.mp3
        |   `-- successSound.mp3
        |-- res
        `-- spec

Edit 1

I tried

<audio id="successSound" src="sound/successSound.mp3" type="audio/mpeg" ></audio>

This worked in chrome on my local webserver but not on Android.

I tried

<audio id="successSound" src="" type="audio/mpeg" ></audio>

This worked, but I need to get local files playing

Here is Solutions:

We have many solutions to this problem, But we recommend you to use the first solution because it is tested & true solution that will 100% work for you.

Solution 1

The play method which the HTML5 API provides is useful for playing media files available on the web. Phonegap provides the media plugin to play local media files. I checked out your code and played the sound successfully by making the following changes. Please check at your end.

1.Add the following line to config.xml

<gap:plugin name="" />

2.Replace the lines in index.html

<button onclick="document.getElementById('successSound').play()">Play successSound local</button>
<button onclick="document.getElementById('errorSound').play()">Play errorSound local</button>

with these lines

<button onclick="playAudio('successSound')">Play successSound local</button>
<button onclick="playAudio('errorSound')">Play errorSoundlocal</button>

3.Add the following function to js/index.js

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

Solution 2

Use this code


    <audio id="successSound" src="file:///android_asset/www/sound/successSound.mp3"      type="audio/mpeg" ></audio>
       <audio id="errorSound" src="file///android_asset/www/sound/errorSound.mp3"   type="audio/mpeg" ></audio>
<!-- some more UI -->

Solution 3

Did you try removing the /android_asset/www/ part in your code? Your app acts like a website and it thinks its root is the www folder itself.

I’ll edit comment. Code not showing somehow.

Solution 4

If you are using local files, try to reference them with src="file:///yourpath/sayHello.mp3"

Solution 5

I had the same problem and finally got it working, with me the problem lied with the scope of my media variable. I got it working as follows:

(function () {

    "use strict";
     var media;
     document.addEventListener('deviceready', onDeviceReady.bind(this), false);

function onDeviceReady() {
    media = new Media("/android_asset/www/sounds/wat is je wens.mp3", null, function (e) {
    alert('Media Error');

function onStart() {;


Essentially I made sure that the scope of my media variable was sort of global by declaring it outside of onDeviceReady, but that Media wasn’t called before the deviceready event.

Solution 6

`` // Audio player
        var my_media = null;
        var mediaTimer = null;
        // Play audio
        function playAudio(src) {
            // Create Media object from src
            my_media = new Media(src, onSuccess, onError);

            // Play audio

            // Update my_media position every second
            if (mediaTimer == null) {
                mediaTimer = setInterval(function() {
                    // get my_media position
                        // success callback
                        function(position) {
                            if (position > -1) {
                                setAudioPosition((position) + " sec");
                        // error callback
                        function(e) {
                            console.log("Error getting pos=" + e);
                            setAudioPosition("Error: " + e);
                }, 1000);
        // onSuccess Callback
        function onSuccess() {
            console.log("playAudio():Audio Success");
function stopAudio() {
            if (my_media) {
            mediaTimer = null;
        // onError Callback
        function onError(error) {
        // Set audio position
        function setAudioPosition(position) {
            document.getElementById('audio_position').innerHTML = position;

Note: Use and implement solution 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from or, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply