1

我正在尝试通过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 无关） .

有人可以帮忙，并可能提供解决方法代码..？

提前致谢！

玛尼

4

0 回答 0