2011-03-29 49 views
3

我正在尝试用PhoneGap编写包含多个HTML文件的Android应用程序。在每一个HTML中,我想包括一个用户可以播放和停止的mp3文件。迄今为止,这工作。我遇到的问题是当试图将多个mp3文件放在一个文件中时。用phonegap播放多个mp3文件for android

我想实现的目标是将一般的音频播放器javescript放在一个文件中,并在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),以在每个子页面加载到框架中时启动播放器。

另一个可能的方向是使用jqMobile。默认情况下,jqMobile使用Ajax调用来加载页面。因此,您的JavaScript可以仅通过第一页加载...并且通过ajax加载的所有页面都不会完全替换DOM ...让您的javascript保持原样。我开发了一个使用phonegap和jqMobile的小应用,取得了相当不错的成功。