Play multiple mp3 files with phonegap for android
I'm trying to write an Android app with PhoneGap that contains multiple HTML files. In every HTML I would like to include an mp3 file that the user can play and stop. This has worked so far. The problem that I encounter is when trying to put multiple mp3 files in one file.
The thing that I would like to achieve is to put the general audio player javescript in one file and to tell in the HTML which file should be played. Is this possible and how? Thanks!
My code for one of the html files looks like this:
<sc开发者_JS百科ript 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>
You might consider using a page with a frame on it. Place your common javascript in the of the main page and then call back to parent.playAudio(src) to kick off the player from each sub-page as it's loaded into the frame.
Another possible direction is use of jqMobile. By default, jqMobile loads pages using Ajax calls..consequently, your javascript can be loaded by the very first page only...and all subsequent page loads via ajax do not totally replace the DOM...leaving your javascript in tact. I have developed a small app using phonegap and jqMobile with fairly good success.
加载中,请稍侯......
精彩评论