phonegap -音乐播放器

最近要实现 phonegap的音乐功能，

第一反应是html5来实现，但是测试后，在andriod下面播放不了，不过在ios下面应该没有问题的。

好吧，在网上找现成的，发现有很多都不实际。也无法应用。

那么自己动手，丰衣足食。

翻看phonegap，api，自己写。

下面是我写的实现方法：

1.html

<div class="music">
        <div class="Play" onclick="playAudio(‘请选择歌曲’,’no’);"></div>
        <div class="vol" onclick="vol();"><div id="dt"></div></div>
        <div class="Stop" onclick="stopAudio();"></div>
        <div style="clear:both; color:#06F;"><strong>正在播放：</strong><b class="nowplay" style="color:#F30;"></b></div>
         </div>
         <div style="clear:both"></div>
        <ul id="articleList" class="ui-listview">
        <li><div class="listmusic" onclick="playAudio(this,’http://××××××××/uploads/2013/01/wyyghpy.lite.mp3′);">1.我有1个好朋友</div></li>
        <li><div class="listmusic" onclick="playAudio(this,’http://××××××××××/uploads/2013/01/ywaq.mp3′,1);">2.我们的爱情</div></li>
    </ul>

qwqw

2. 这里需要注意的是上面播放器是需要有图标来支持的，这里自己去写css样式吧。

3.添加music.js文件。

// Audio player
        //
        var my_media = null;//当前音乐对象
        var mediaTimer = null;
        var is_play = null;//当前播放对象，1播放，0暂停
        var now_play = null;//当前播放的音乐地址
        var now_div = null;//当前操作的滚动条所在的div
        var txt = null;

        // Play audio
        //
        function playAudio(obj,src) {
            /*if(src ==’no’){
                navigator.notification.alert("请选择歌曲播放！");
                return false;
               }*/
            if(typeof(obj) == ‘object’)
                txt = $(obj).text();
            else
                txt = obj;
             //alert(txt);
             $(".nowplay").html(txt);
             $(‘.Play’).attr(‘onclick’,’playAudio("’+txt+’","’+src+’")’);
            //i++;
            //$(obj).parent().children(‘.vol’).children(‘div’).css(‘width’,i+’%’);
            //$(‘#dt’+no).css(‘width’,i+’%’);
            //return false;
            //所有的初始化操作
            if(now_play != src)
            {
                if(my_media)
                    my_media.release();
                is_play = null;
                now_div = $(‘#dt’);//操作div的唯一性
                now_div.css(‘width’,’0%’);
            }
            if(is_play == null)
            {
                my_media = new Media(src, onSuccess, onError);
                is_play = 1;
            }
            else
            {
                if(is_play == 1)
                    is_play = 0;
                else
                    is_play = 1
            }
            if(is_play == 1)
            {
                $(".Play").css(‘background’,"url(‘images/bofq/1_1.png’)");
                //if (my_media == null) {
                    // Create Media object from src
                    //my_media.release();
                    //my_media = new Media(src, onSuccess, onError);
                    if(now_play == null)
                    {
                        my_media.play();
                        now_play = src;
                    }
                    else if(now_play == src)
                        my_media.play();
                    else if(now_play != src)
                    {
                        now_play = null;
                        my_media.play();
                    }
                    //my_media.stop();
                    //my_media.release();
                //} // else play current audio
                // Play audio
                //now_play.play();
                //my_media.play();
            }
            else if(is_play == 0)
                pauseAudio(my_media);
            // Update my_media position every second
           if (mediaTimer == null) {
                mediaTimer = setInterval(function() {
                    // get my_media position
                    my_media.getCurrentPosition(
                        // success callback
                        function(position) {
                            if (position > -1) {
                                var dur = my_media.getDuration();
                                if(!isNaN(dur))
                                var progress = position/dur;
                                progress = Math.ceil(progress*100);
                                //$(obj).parent().children(‘.vol’).children(‘div’).css(‘width’,progress+’%’);
                                now_div.css(‘width’,progress+’%’)
                               // setAudioPosition((progress) + " sec");
                            }
                        },
                        // error callback
                        function(e) {
                            console.log("Error getting pos=" + e);
                            setAudioPosition("Error: " + e);
                        }
                    );
                }, 1000);
            }
        }

        // Pause audio
        //
        function pauseAudio(obj) {
            $(".Play").css(‘background’,"url(‘images/bofq/1.png’)");
            if (obj) {
                obj.pause();
            }
            /*if (my_media) {
                my_media.pause();
            }*/
        }

        // Stop audio
        //
        function stopAudio() {
            if (my_media) {
                $(‘#dt’).css(‘width’,’0%’);
                $(".Play").css(‘background’,"url(‘images/bofq/1.png’)");
                is_play = null;
                now_play = null;
                my_media.stop();
                my_media.release();
                //my_media.release();
            }
            clearInterval(mediaTimer);
            mediaTimer = null;
        }

        // onSuccess Callback
        //
        function onSuccess() {
            console.log("playAudio():Audio Success");
        }

        // onError Callback
        //
        function onError(error) {
            //alert(‘code: ‘    + error.code    + ‘\n’ +
//                  ‘message: ‘ + error.message + ‘\n’);
           navigator.notification.alert("正在加载,请稍后……");
        }

        // Set audio position
        //
        //function setAudioPosition(position) {
//            document.getElementById(‘audio_position’).innerHTML = position;
//        }