文档章节

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

大街小巷
 大街小巷
发布于 2015/12/23 12:05
字数 635
阅读 42
收藏 0

一: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应用交叉推广,为开发者带来更高的广告收入。

© 著作权归作者所有

大街小巷
粉丝 8
博文 208
码字总数 130367
作品 0
长沙
私信 提问
使用The PhoneGap Developer App实现快速调试项目

如今,基于 PhoneGap 的混合 APP 开发技术更加成熟,优势更加凸显。移动互联网的迅猛发展,Android 和 iOS 的版本快速迭代,使 HTML5 的性能问题逐步解决。仅仅在 PhoneGap 官网上,已经有来...

crazymus
2015/04/26
1K
0
PhoneGap 1.8.1 发布,跨平台移动开发框架

PhoneGap官方今天发布了PhoneGap 1.8.1版本,主要修复了1.8版本中导致iOS平台上PhoneGap应用程序崩溃的bug。 该版本相对于之前的1.7版本,主要修复了iOS、Android、Windows Phone、黑莓和Web...

oschina
2012/06/14
915
3
phoneGap3.0安装步骤(以windows下的android环境为例):

phoneGap3.0安装步骤(以windows下的android环境为例): 环境: WIN系统,JDK,Android,Eclipse,Ant,Git,PhoneGap3.x (Cordova) 1. 安装JRE,设置JAVAHOME,比如JAVAHOME=C:programJavaj...

kisshua
2014/03/05
103
0
PhoneGap Developer App 1.5.2 发布

PhoneGap Developer App 1.5.2 发布,此版本更新内容如下: 更新 PhoneGap Developer App,使用 Content Sync 插件 iOS orientation 修复 此版本现已提供在 iOS AppStore, Android Play Sto...

oschina
2015/05/21
2.2K
0
Phonegap各类商业插件

【Phonegap商业插件服务】[目前插件已经支持到Phonegap最新版本] 1.phonegap-百度社会化分享-andriod插件 v2.0 【该插件支持微信分享和朋友圈分享,qq好友分享,微博分享】 2.phonegap百度社...

夜澜小雨
2015/07/15
1K
0

没有更多内容

加载失败,请刷新页面

加载更多

手写RPC框架指北另送贴心注释代码一套

Angular8正式发布了,Java13再过几个月也要发布了,技术迭代这么快,框架的复杂度越来越大,但是原理是基本不变的。所以沉下心看清代码本质很重要,这次给大家带来的是手写RPC框架。 完整代码...

全菜工程师小辉
15分钟前
3
0
【Java】开发收货

简介 谨以此篇,记载开发过程中的一些tips。 编译器 【Shift + F6】可实现变量的联动修改。

Areya
32分钟前
5
0
DOM官方定义

DOM Document Object Model 文档对象模型 DOM的官方定义:W3C的DOM,可以使程序或者脚本(JS或AS\JScript),动态的访问或者操作文档的内容、结构、样式。 DOM只是一个标准,操作网页的标准。...

前端老手
37分钟前
6
0
IT兄弟连 HTML5教程 HTML5的学习线路图 第一阶段学习网页制作

学习HTML5技术可并不是简单学会几个新增的标签而已,HTML5现在可以说是前端所有技术的代名词。需要学习的语言和工具不仅多,对于刚接触他们的新人会感觉很乱。另外,前端开发也会细分很多个开...

老码农的一亩三分地
39分钟前
6
0
可见性有序性,Happens-before来搞定

写在前面 上一篇文章并发 Bug 之源有三,请睁大眼睛看清它们 谈到了可见性/原子性/有序性三个问题,这些问题通常违背我们的直觉和思考模式,也就导致了很多并发 Bug 为了解决 CPU,内存,IO ...

tan日拱一兵
54分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部