2012-05-07 13 views
1

Androidで動作するようにHTML5を変換しています。 Androidは要素をサポートしていないため、再生メソッドは機能しません。html5 audio element return src with jquery

私は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タグ例えば、その一般的な解決策が本当に重要であろう、私はできない、多くの既存のオーディオ要素を持っており、それを解決します。

+0

私はCordova/PhoneGap Androidにこのようなサルパッチの問題を追加できる小さなlibに取り組んでいます。私はあなたの投稿を続けます。 –

+0

ありがとうございます!私はこの問題で唯一のことはできないと確信しています。 – nycynik

答えて

1

さて、私はAndroid WebView用のサルパッチコードを作成しています。あなたは進歩状況を私のcorinthian github projectに見ることができます。

mediaObjs = []; 

とモンキー・パンチの方法であなたがするだろう:

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

は、メディアオブジェクトを格納する配列を作成します。あなたがしたいと思いますどのような一方で、セットアップaはdevicereadyリスナーである

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プロジェクトから再生/一時停止の画像を取得できます。私はもう少し時間がある場合、より多くの機能を追加するつもりです。

+0

これを試してみて、ありがとう。 – nycynik