2011-03-29 3 views
3

複数のHTMLファイルを含むPhoneGapでAndroidアプリを書こうとしています。すべてのHTMLでは、ユーザーが再生して停止できるmp3ファイルを含めることを望みます。これまでのところこれまで働いていた。私が遭遇する問題は、複数のmp3ファイルを1つのファイルに入れようとするときです。android用のphonegapで複数のmp3ファイルを再生

私が達成したいのは、一般的なオーディオプレーヤージャースクリプトを1つのファイルに入れ、再生するファイルをHTMLで伝えることです。これは可能ですか?ありがとう!

htmlファイルのいずれかの私のコードは次のようになります。

<script type="text/javascript" charset="utf-8" src="phonegap.js"></script> 
<script type="text/javascript" charset="utf-8"> 

//------------------------------------------------------------------------- 
// Audio player 
//------------------------------------------------------------------------- 
var media1 = null; 
var media1Timer = null; 
var audioSrc = null; 

/** 
* Play audio 
*/ 
function playAudio(url) { 
    console.log("playAudio()"); 
    console.log(" -- media="+media1); 

    //var src = "/android_asset/www/audio/01.mp3"; 
    var src = "/android_asset/www/audio/01.mp3"; 
    if (url) { 
     src = url; 
    } 

    // Stop playing if src is different from currently playing source 
    if (src != audioSrc) { 
     if (media1 != null) { 
      stopAudio(); 
      media1 = null; 
     } 
    } 

    if (media1 == null) { 


     media1 = new Media(src, 
      function() { 
       console.log("playAudio():Audio Success"); 
      }, 
      function(err) { 
       console.log("playAudio():Audio Error: "+err); 
       setAudioStatus("Error: " + err); 
      }, 
      function(status) { 
       console.log("playAudio():Audio Status: "+status); 
       setAudioStatus(Media.MEDIA_MSG[status]); 

       // If stopped, then stop getting current position 
       if (Media.MEDIA_STOPPED == status) { 
        clearInterval(media1Timer); 
        media1Timer = null; 
       } 
      }); 
    } 
    audioSrc = src; 

    // Play audio 
    media1.play(); 
    if (media1Timer == null) { 
     media1Timer = setInterval(
      function() { 
       media1.getCurrentPosition(
        function(position) { 
         console.log("Pos="+position); 
         if (position > -1) { 
          setAudioPosition((position/1000)+" sec"); 
         } 
        }, 
        function(e) { 
         console.log("Error getting pos="+e); 
         setAudioPosition("Error: "+e); 
        } 
       ); 
      }, 
      1000 
     ); 
    } 

    // Get duration 
    var counter = 0; 
    var timerDur = setInterval(
     function() { 
      counter = counter + 100; 
      if (counter > 2000) { 
       clearInterval(timerDur); 
      } 
      var dur = media1.getDuration(); 
      if (dur > 0) { 
       clearInterval(timerDur); 
       document.getElementById('audio_duration').innerHTML = (dur/1000) + " sec"; 
      } 
     }, 100); 
} 

/** 
* Pause audio playback 
*/ 
function pauseAudio() { 
    console.log("pauseAudio()"); 
    if (media1) { 
     media1.pause(); 
    } 
} 

/** 
* Stop audio 
*/ 
function stopAudio() { 
    console.log("stopAudio()"); 
    if (media1) { 
     media1.stop(); 
    } 
    clearInterval(media1Timer); 
    media1Timer = null; 
} 

/** 
* Set audio status 
*/ 
var setAudioStatus = function(status) { 
    document.getElementById('audio_status').innerHTML = status; 
}; 

/** 
* Set audio position 
*/ 
var setAudioPosition = function(position) { 
    document.getElementById('audio_position').innerHTML = position; 
}; 
    </script> 
    </head> 
    <body> 
    <!-- Audio --> 
<div id="info"> 
    <h2>Audio</h2> 
</div> 
<a href="#" class="btn large" onclick="playAudio();">Play</a> 
<a href="#" class="btn large" onclick="pauseAudio();">Pause</a> 
<a href="#" class="btn large" onclick="stopAudio();">Stop</a> 
    </body> 

答えて

0

あなたはそれ上のフレームでページを使用して検討するかもしれません。共通のjavascriptをメインページに置き、parent.playAudio(src)にコールバックして、フレームに読み込まれた各サブページからプレーヤーを開始します。

もう1つの可能な方向はjqMobileの使用です。デフォルトでは、jqMobileはAjax呼び出しを使用してページをロードします。その結果、JavaScriptは最初のページのみでロードされ、その後のすべてのページロードはajax経由でDOMを完全に置き換えません。私はかなり良い成功とphonegapとjqMobileを使用して小さなアプリを開発しました。