Phonegap Build App - Play Audio

348 views Asked by At

So, i have made an app with phonegap build, where the goal is to read a xml file that contains info about audio tracks, and includes the path for each audio track. I proceed to input the data of xml file into html, and before it was working fine. After i imported my project into phonegap build, no more audio plays. The controls work, but the audio doesn't play.

Here is the code:

<script>
    document.addEventListener('play', function(e){
    var audios = document.getElementsByTagName('audio');
    for(var i = 0, len = audios.length; i < len;i++){
        if(audios[i] != e.target){
            audios[i].pause();
        }
    }
    }, true);
    xmlhttp=new XMLHttpRequest();
    xmlhttp.open("GET","teste.xml",false);
    xmlhttp.send();
    xmlDoc=xmlhttp.responseXML; 

    document.write("<table><tr><th>Track</th><th>Description</th<th>URL</th></tr>");
    var x=xmlDoc.getElementsByTagName("CD");
    for (i=0;i<x.length;i++){ 
        document.write("<tr><td>");
        document.write(x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue);
        document.write("</td><td>");
        document.write(x[i].getElementsByTagName("DESCRIPTION")[0].childNodes[0].nodeValue);
        document.write("</td><td>");
        var audio = x[i].getElementsByTagName("URL")[0].childNodes[0].nodeValue;
        document.write('<audio controls><source src="'+audio +'" type="audio/mpeg"></audio>');
        document.write("</td></tr>");
    }
    document.write("</table>");
</script>

The XML file is simply structured like this:

<CD>
<TITLE>Track one</TITLE>
<DESCRIPTION>Bob Dylan</DESCRIPTION>
<URL>files/test.mp3</URL>
</CD>

I have read some similar questions and find that most mistakes are in the PATH of the audio file. What should i do for the audio to play? Thanks

EDIT: I have updated my code:

var path = '/android_asset/www/';
var audio = x[i].getElementsByTagName("URL")[0].childNodes[0].nodeValue;
var audioPath = path+audio;
alert(audioPath);

document.write('<a href="#" onclick="playAudio('+audioPath+')">PLAY</a><br/>');
document.write('<a href="#" onclick="pauseAudio()">PAUSE</a><br/>');
document.write('<a href="#" onclick="stopAudio()">STOP</a>');
document.write('<p id="audio_position"></p>');

The alert(audioPath) returns the correct path and it works when I use this function:

function onDeviceReady() {
        playAudio('/android_asset/www/files/test1.mp3');
    }

The audioPath is the same as the path above. But the app doesn't play the sound when i press Play... Any ideas?

playAudio function: function playAudio(src) { // Create Media object from src my_media = new Media(src, onSuccess, onError);

        // Play audio
        my_media.play();

        // Update my_media position every second
        if (mediaTimer == null) {
            mediaTimer = setInterval(function() {
                // get my_media position
                my_media.getCurrentPosition(
                    // success callback
                    function(position) {
                        if (position > -1) {
                            setAudioPosition((position) + " sec");
                        }
                    },
                    // error callback
                    function(e) {
                        console.log("Error getting pos=" + e);
                        setAudioPosition("Error: " + e);
                    }
                );
            }, 1000);
        }
    }

FOUND my problem! It was the 'onclick'. I now import jQuery and built the following code:

$(".btPlay").on("click",function (e) {
    // body...
    console.log("Play");
    playAudio(audioPath);
});

It now works!

1

There are 1 answers

1
Guillaume Munsch On BEST ANSWER

Try to install the cordova Media plugin org.apache.cordova.media (http://docs.phonegap.com/en/edge/cordova_media_media.md.html)

And then, try this :

//src is your path to your file
var my_media = new Media(src, function(){
    alert("Success");
}, function(){
    alert("Fail");
});

my_media.play();

Try it with all the paths yuo already tried, but this plugin works for me with online files.

EDIT: You may need to add '/android_asset/www/' in front of your src