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