2011-03-29 2 views
3

J'essaie d'écrire une application Android avec PhoneGap qui contient plusieurs fichiers HTML. Dans chaque HTML je voudrais inclure un fichier mp3 que l'utilisateur peut jouer et arrêter. Cela a fonctionné jusqu'à présent. Le problème que je rencontre est lorsque vous essayez de mettre plusieurs fichiers mp3 dans un fichier.Jouer plusieurs fichiers mp3 avec phonegap pour android

La chose que je voudrais réaliser est de mettre le lecteur audio général javescript dans un fichier et d'indiquer dans le fichier HTML quel fichier doit être lu. Est-ce possible et comment? Merci!

Mon code pour l'un des fichiers html ressemble à ceci:

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

Répondre

0

Vous pouvez envisager d'utiliser une page avec un cadre sur elle. Placez votre javascript commun dans la page principale, puis rappelez à parent.playAudio (src) pour lancer le lecteur de chaque sous-page comme il est chargé dans le cadre.

Une autre direction possible est l'utilisation de jqMobile. Par défaut, jqMobile charge les pages en utilisant des appels Ajax. Par conséquent, votre javascript peut être chargé par la toute première page seulement ... et toutes les charges de pages suivantes via ajax ne remplacent pas totalement le DOM ... laissant votre javascript intact. J'ai développé une petite application en utilisant phonegap et jqMobile avec un assez bon succès.