CODEWITHSUNDEEP
androidhtmlcordova
nycynik
nycynik

Reputation: 7537

html5 audio element return src with jquery

I am converting some HTML5 to work with Android. Android does not support the element, so the play method does not function.

I am using PhoneGap's media element, and that does play audio. What I want, is a way to find the first source of the audio tag, and then use that with media play, but this does not seem to work.

function playSound(whatToPlay) {
    // removed since <audio does not work
    // var snd = document.getElementById(whatToPlay);
    // snd.play();

    toPlaySrc = $("#"+whatToPlay+":first-child").eq(0).attr("src");
    // next I will have to deal with /android_asset and my current partial path
    myMedia = new Media("/android_asset/"+toPlaySrc, onSuccess,onError);
    if (myMedia)
        myMedia.play();        
}
playSound("clockticking");

this is my audio element.

<audio id="clockticking" preload="auto" autobuffer onEnded="instructionFinsihed()">
  <source src="../sound/tictoc.mp3" type="audio/mp3" />
  <source src="../sound/tictoc.ogg" type="audio/ogg" />
</audio>

I have many existing audio elements, so a general solution would really be important, I can not, for instance just ad id tags to all the mp3 elements and solve it.

Upvotes: 1

Views: 480

Answers (1)

Simon MacDonald
Simon MacDonald

Reputation: 23273

Okay, I'm working on some monkey patch code for the Android WebView, you can see the progress over on my corinthian github project. In the meantime what you'd want to do is setup a on deviceready listener:

document.addEventListener("deviceready", monkeypunch, true);

create an array to hold the media objects:

mediaObjs = [];

and in the monkeypunch method you would do:

function monkeypunch() {
    var audioclips = document.getElementsByTagName("audio");
    for (var i=0; i < audioclips.length; i++) {
        // Create new Media object.
        var audioSrc = audioclips[i].firstElementChild.src;
        if (audioSrc.indexOf("file:///android_asset") == 0) {
            audioSrc = audioSrc.substring(7);
        }
        mediaObjs[audioSrc] = new Media(audioSrc);
        // Create the HTML
        var newAudio = document.createElement('div');
        var newImg = document.createElement('img');
        newImg.setAttribute('src', 'images/play.png');
        newAudio.appendChild(newImg);
        // Set the onclick listener
        newAudio.addEventListener("click", function() {
            // figure out what image is displayed
            if (newImg.src.indexOf("images/play.png", newImg.src.length - "images/play.png".length) !== -1) {
                newImg.src = "images/pause.png"; 
                mediaObjs[audioSrc].play();               
            } else {
                newImg.src = "images/play.png";
                mediaObjs[audioSrc].pause();                
            }
        });
        // replace the audio tag with out div
        audioclips[i].parentNode.replaceChild(newAudio, audioclips[i]);
    }
}

You can grab the play/pause images from my github project. I'm planning on adding more functionality when I have some more time.

Upvotes: 1

Related Questions