IOS版添加phonegap--音乐播放器插件教程

一:HTML实现方法
<div class="music">
<div class="Play" onclick="playAudio(‘请选择歌曲’,’no’);"></div>
<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:#FF3030;"><strong>正在播放：</strong><b class="nowplay" style="color:#F08080;"></b></div>
         </div>
<div style="clear:both"></div>
<ul id="articleList" class="ui-listview">
<li><div class="listmusic" onclick="playAudio(this,’音乐的路径’);">歌曲名</div></li>
<li><div class="listmusic" onclick="playAudio(this,’音乐的路径’);">歌曲名</div></li>
</ul>


二:注意的是上面播放器是需要图标来支持的，根据自己的风格自己写CSS样式。


三:添加music.js文件。
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;

function playAudio(obj,src) {
/*if(src ==’no’){
navigator.notification.alert("请选择歌曲播放");
       return false;
          }
if(typeof(obj) == ‘object’)
   txt = $(obj).text();
       else
        txt = obj;              
$(".nowplay").html(txt);
$(‘.Play’).attr(‘onclick’,’playAudio("’+txt+’","’+src+’")’);
$(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
             
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(
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");
              }
              },
function(e) {
console.log("Error getting pos=" + e);
setAudioPosition("Error: " + e);
              }
              );
              }, 1000);
            }
        }
     
function pauseAudio(obj) {
$(".Play").css(‘background’,"url(‘images/bofq/1.png’)");
if (obj) {
obj.pause();
            }
if (my_media) {
        my_media.pause();
            }
                }
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;
                }
function onSuccess(){
console.log("playAudio():Audio Success");
                }
function onError(error){
alert(‘code: ‘ + error.code + ‘\n’+‘message:‘ + error.message + ‘\n’);
navigator.notification.alert("正在努力加载中,请稍后……");
                }
function setAudioPosition(position){
document.getElementById(‘audio_position’).innerHTML = position;
                       }


KeyMob移动广告平台以云端集成广告方式，整合国内外多家主流手机广告联盟平台。KeyMob为开发者提供Android/IOS应用交叉推广，为开发者带来更高的广告收入。