我正在尝试开发一个可以通过Phonegap框架播放音频文件的Android应用程序。
下面是代码,它不是index.html,而是项目中的另一个HTML页面。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>A New App Try</title>
<!--
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js"></script>
-->
<script src="/android_asset/www/js/corodova.js"></script>
<link rel="stylesheet" href="/android_asset/www/css/MyownTry.css"/>
<script type="text/javascript" src="cordova.js"></script>
<script src="/android_asset/www/js/jquery-1.10.2.js"></script>
<script src="/android_asset/www/js/jquery.mobile-1.3.2.js"></script>
<link rel="stylesheet" href="/android_asset/www/css/jquery.mobile.structure-1.3.2.css" />
<script type="text/javascript" charset="utf-8">
//Wait for PhoneGap to load
document.addEventListener("deviceready", onDeviceReady, false);
// PhoneGap is ready
/*
function onDeviceReady() {
playAudio("../assets/files/Roja_Flute.mp3");
}
*/
// 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);
if (!playing) {
my_media.play();
document.getElementById('play').src = "/android_asset/www/img/pause_icon.jpg";
playing = true;
} else {
my_media.pause();
document.getElementById('play').src = "/android_asset/www/img/Playicon.png";
playing = false;
}
}
// Pause audio
//
/* function pauseAudio() {
if (my_media) {
my_media.pause();
}
}*/
// Stop audio
//
function stopAudio() {
my_media.stop();
playing = false;
document.getElementById('play').src = "/android_asset/www/img/Playicon.png";}
// 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>
<style>
img{
width=30%;
}
</style> </head>
<body>
<br/><br/>
<a href="#" class="btn large" onclick="playAudio('/android_asset/files/Roja_Flute.mp3');"><img id="play" src="/android_asset/www/img/Playicon.png"/></a>
<!-- <a href="#" class="btn large" onclick="pauseAudio();"><img id="pause"src="/android_asset/www/img/pause_icon.jpg" width="20%"/></a> -->
<a href="#" class="btn large" onclick="stopAudio();"><img id="stop" src="/android_asset/www/img/stop_icon.jpg" /></a>
<!-- <p id="audio_position"></p>-->
<br/><br/>
<a href="index.html">Go back to Home Page</a>
<div data-role="footer">
<p>Copyright 2013 | Mani C | newtolearn.android</p>
</div>
</div>
</body>
</html>
我希望图标是较小的图标,就像我在样式元素中定义的那样,占图像尺寸的30%。而且,当我点击播放图标时,我希望播放音频文件。
不幸的是,两种预期的行为都没有发生。我看到一个更大的'播放图标',更小的'停止图标'并获得'未捕获的参考异常:变量playAudio在index.html中未定义'(事实上,上述HTML代码与index.html无关) 。
有人可以帮助,并且可以提供解决方法代码..?
提前致谢!
玛尼