簡體   English   中英

使用phonegap為Android播放多個mp3文件

[英]Play multiple mp3 files with phonegap for android

我正在嘗試使用包含多個HTML文件的PhoneGap編寫Android應用程序。 在每個HTML中,我想包含一個用戶可以播放和停止的mp3文件。 到目前為止這已經奏效了。 我遇到的問題是嘗試將多個mp3文件放在一個文件中。

我想要實現的是將通用音頻播放器javescript放在一個文件中,並在HTML中告訴應該播放哪個文件。 這可能嗎?怎么樣? 謝謝!

我的一個html文件的代碼如下所示:

    <script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
<script type="text/javascript" charset="utf-8">

//-------------------------------------------------------------------------
// Audio player
//-------------------------------------------------------------------------
var media1 = null;
var media1Timer = null;
var audioSrc = null;

/**
 * Play audio
 */
function playAudio(url) {
    console.log("playAudio()");
    console.log(" -- media="+media1);

    //var src = "/android_asset/www/audio/01.mp3";
    var src = "/android_asset/www/audio/01.mp3";
    if (url) {
        src = url;
    }

    // Stop playing if src is different from currently playing source
    if (src != audioSrc) {
        if (media1 != null) {
            stopAudio();
            media1 = null;
        }
    }

    if (media1 == null) {


        media1 = new Media(src,
            function() {
                console.log("playAudio():Audio Success");
            },
            function(err) {
                console.log("playAudio():Audio Error: "+err);
                setAudioStatus("Error: " + err);
            },
            function(status) {
                console.log("playAudio():Audio Status: "+status);
                setAudioStatus(Media.MEDIA_MSG[status]);

                // If stopped, then stop getting current position
                if (Media.MEDIA_STOPPED == status) {
                    clearInterval(media1Timer);
                    media1Timer = null;
                }
            });
    }
    audioSrc = src;

    // Play audio
    media1.play();
    if (media1Timer == null) {
        media1Timer = setInterval(
            function() {
                media1.getCurrentPosition(
                    function(position) {
                        console.log("Pos="+position);
                        if (position > -1) {
                            setAudioPosition((position/1000)+" sec");
                        }
                    },
                    function(e) {
                        console.log("Error getting pos="+e);
                        setAudioPosition("Error: "+e);
                    }
                );
            },
            1000
        );
    }

    // Get duration
    var counter = 0;
    var timerDur = setInterval(
        function() {
            counter = counter + 100;
            if (counter > 2000) {
                clearInterval(timerDur);
            }
            var dur = media1.getDuration();
            if (dur > 0) {
                clearInterval(timerDur);
                document.getElementById('audio_duration').innerHTML = (dur/1000) + " sec";
            }
        }, 100);
}

/**
 * Pause audio playback
 */
function pauseAudio() {
    console.log("pauseAudio()");
    if (media1) {
        media1.pause();
    }
}

/**
 * Stop audio
 */
function stopAudio() {
    console.log("stopAudio()");
    if (media1) {
        media1.stop();
    }
    clearInterval(media1Timer);
    media1Timer = null;
}

/**
 * Set audio status
 */
var setAudioStatus = function(status) {
    document.getElementById('audio_status').innerHTML = status;
};

/**
 * Set audio position
 */
var setAudioPosition = function(position) {
    document.getElementById('audio_position').innerHTML = position;
};
   </script>
  </head>
  <body>
    <!-- Audio -->
<div id="info">
    <h2>Audio</h2>
</div>
<a href="#" class="btn large" onclick="playAudio();">Play</a>
<a href="#" class="btn large" onclick="pauseAudio();">Pause</a>
<a href="#" class="btn large" onclick="stopAudio();">Stop</a>
  </body>

您可以考慮使用帶有框架的頁面。 將您的常用javascript放在主頁面中,然后回調到parent.playAudio(src),以便在每個子頁面加載到幀中時啟動播放器。

另一個可能的方向是使用jqMobile。 默認情況下,jqMobile使用Ajax調用加載頁面。因此,您的javascript只能由第一頁加載...並且所有后續頁面通過ajax加載並不能完全取代DOM ...讓您的javascript保持暢銷。 我開發了一個使用phonegap和jqMobile的小應用程序,取得了相當不錯的成功。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM