欢迎访问 夜阑小雨 我的学习碎片档案,这里记录了我的学习内容和工作中经验,希望给您带去帮助。

phonegap -音乐播放器

phonegap开发 夜阑小雨 1627℃ 0评论

最近要实现 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;
//        }

 

到这里,就完成了,在html代码里面替换掉音乐地址和标题。,

然后手机上运行,点击标题就可以播放音乐了。

话说,这个也仅仅是一个简单的播放器,要开发更好的,可以在此基础上开发。

转载请注明:夜阑小雨 » phonegap -音乐播放器

喜欢 (0)or分享 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址