无法通过Phonegap在Android中播放音频文件(.mp3)

时间:2013-08-17 15:31:54

标签: android cordova phonegap-plugins android-audiomanager

我正在尝试开发一个可以通过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无关) 。

有人可以帮助,并且可以提供解决方法代码..?

提前致谢!

玛尼

0 个答案:

没有答案