1

Androidで動作するように一部のHTML5を変換しています。Android はこの要素をサポートしていないため、play メソッドは機能しません。

私は PhoneGap のメディア要素を使用していますが、それはオーディオを再生します。私が欲しいのは、オーディオタグの最初のソースを見つけて、それをメディア再生で使用する方法ですが、これはうまくいかないようです。

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");

これは私のオーディオ要素です。

<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>

私は多くの既存のオーディオ要素を持っているので、一般的な解決策は本当に重要です。たとえば、すべての mp3 要素に id タグを付けて解決することはできません。

4

1 に答える 1

1

さて、私は Android WebView のモンキー パッチ コードに取り組んでいます。それまでの間、あなたがやりたいことは、on deviceready リスナーをセットアップすることです:

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

メディア オブジェクトを保持する配列を作成します。

mediaObjs = [];

そして、monkeypunch メソッドでは次のようにします。

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]);
    }
}

私のgithubプロジェクトから再生/一時停止の画像を取得できます。時間ができたら、機能を追加する予定です。

于 2012-05-08T13:44:48.273 に答える