我尝试用PhoneGap媒体插件制作图像/声音库,但我遇到了一个问题。当我点击一张图片时,声音会播放,但当我点击另一张图片时,声音也会播放。知道我怎样才能让他们一次播放一个声音吗?
<script type="text/javascript" charset="utf-8">
// Audio player
//
var my_media = null;
var mediaTimer = null;
// Play audio
//
function playAudio(src) {
// Create Media object from src
my_media = new Media(src, onSuccess, onError);
// Play audio
my_media.play();
// Update my_media position every second
if (mediaTimer == null) {
mediaTimer = setInterval(function() {
// get my_media position
my_media.getCurrentPosition(
// success callback
function(position) {
if (position > -1) {
setAudioPosition((position) + " sec");
}
},
// error callback
function(e) {
console.log("Error getting pos=" + e);
setAudioPosition("Error: " + e);
}
);
}, 1000);
}
}
// Pause audio
//
function pauseAudio() {
if (my_media) {
my_media.pause();
}
}
// Stop audio
//
function stopAudio() {
if (my_media) {
my_media.stop();
}
clearInterval(mediaTimer);
mediaTimer = null;
}
// onSuccess Callback
//
function onSuccess() {
console.log("playAudio():Audio Success");
}
// onError Callback
//
function onError(error) {
alert('code: ' + error.code + 'n' +
'message: ' + error.message + 'n');
}
// Set audio position
//
function setAudioPosition(position) {
document.getElementById('audio_position').innerHTML = position;
}
</script>
<a href="#" class="btn large" onclick="playAudio('http://design.ps4fix.co.uk/arMonika/Audio.mp3');"><img src="arMonika/audio.png" width="147" height="147" /></a>
<a href="#"class="btnlarge"onclick="playAudio('http://design.ps4fix.co.uk/arMonika/komp.v.sepc.mp3');"><img src="arMonika/k.tech.spec.png" width="141" height="141" /></a>
对于有同样问题的人:当你开始定义你的播放器,播放器或"媒体"存储变量时,在你的例子中是"my_media"。
要解决这个问题,只需将变量"my_media"定义为全局变量。然后对于每个需要播放声音的链接你需要停止之前的媒体并将新媒体存储在变量中,像这样:
my_media.stop
new Media(src, onSuccess, onError);
只是要注意将其变量定义为全局变量。
希望有帮助。