使用 phonegap for android 播放多个 mp3 文件答案

【问题标题】：Play multiple mp3 files with phonegap for android使用 phonegap for android 播放多个 mp3 文件
【发布时间】：2011-07-25 00:52:10
【问题描述】：

我正在尝试使用包含多个 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 android mp3 cordova

【解决方案1】：

您可以考虑使用带有框架的页面。将常用的 javascript 放在主页面中，然后调用 parent.playAudio(src) 以在每个子页面加载到框架时启动播放器。

另一个可能的方向是使用 jqMobile。默认情况下，jqMobile 使用 Ajax 调用加载页面。因此，您的 javascript 只能由第一个页面加载...并且所有后续通过 ajax 加载的页面都不会完全取代 DOM...使您的 javascript 保持完整。我使用 phonegap 和 jqMobile 开发了一个小应用程序，并取得了相当大的成功。

【讨论】：