【源码分享】mui实现简单的手机音乐播放器
mui实现简单的手机音乐播放器
最近先来无事,我用mui写了一个可以跨页面控制的音乐播放器。主要功能有上一曲,下一曲,播放,暂停,感兴趣的可以继续看下去。
说的总是不实在,直接上源码,有兴趣的可以读下注释。
1首页代码
- <a>
- <i id="bofang" class="iconfont icon-play-o"></i> <!--就是一个播放按钮没啥特殊的-->
- </a>
- 1 mui.plusReady(function(){
- 2 p=null;
- 3 function toPlay(path){ //播放方法
- 4 p = plus.audio.createPlayer(path);//创建一个音频对象
- 5 p.play( function () { //成功的回调函数ps:一首歌播放完成后执行
- 6 if(i==2){ //判断下一曲该播放哪一个
- 7 i=0;
- 8 }else{
- 9 i++;
- 10 }
- 11 toPlay(pat[i]);
- 12 }, function ( e ) {
- 13 alert( "Audio play failed: " + e.message );//播放失败的回调函数
- 14 } );
- 15
- 16 }
- 17 function toPause(){ //暂停方法
- 18 p.pause();
- 19 }
- 20 function toResume(){ //继续方法
- 21 p.resume();
- 22 }
- 23 function to(s){
- 24 p.seekTo(s);
- 25 }
- 26 var i=0;
- 27 var pat = ["ziyuan/aaa.mp3",
- 28 "ziyuan/bbb.mp3",
- 29 "ziyuan/ccc.mp3"];//曲目数组
- 30 //播放图标
- 31 var bofang = document.getElementById("bofang");
- 32 bofang.addEventListener("tap",function(e){
- 33 e.stopPropagation(); //阻断事件冒泡
- 34 if(this.className=="iconfont icon-play-o"){ //判断图标的样子
- 35 //如果已经创建音频对象点击时继续,没有创建者执行play方法
- 36 if(!p){toPlay(pat[i]);}else{toResume()}
- 37 this.className="iconfont icon-zanting"; //改变图标样式
- 38 }else{
- 39 toPause(); //暂停方法
- 40 this.className="iconfont icon-play-o";
- 41 }
- 42 })
- 43
- 44 //播放页
- 45 document.getElementById("foot").addEventListener("tap",function(){
- 46 mui.openWindow({ //打开播放页 id为foot的标签请自行创建,前面html代码没写
- 47 url:"bofangye.html",
- 48 id:"bofangye.html",
- 49 styles:{
- 50 top:0,
- 51 bottom:0,
- 52 },extras:{
- 53 name:p, //将音频对象p传到播放页
- 54 }
- 55 })
- 56 })
- 57
- 58 //以下三个事件是页面间的事件,是播放页传参数过来通过参数值判断来执行,看不懂请配合播放页代码一起看
- 59 window.addEventListener('send',function(event){
- 60 //监听send事件
- 61 //获得事件参数
- 62 var a = event.detail.pause;
- 63 if(!p){ //判断是否存在p
- 64 toPlay(pat[i]); //不存在执行play方法
- 65 }else if(a%2==1){ //根据a的值判断是暂停还是继续
- 66 toPause();
- 67 }else{
- 68 toResume();
- 69 }
- 70 });
- 71 window.addEventListener('pre',function(event){
- 72 // 监听pre事件
- 73 if(i==0){i=2}else{i--}//i为曲目数组的下标
- 74 if(p){p.stop();} //音频对象p存在的话停止掉,然后播放下一曲,不存在则直接播放下一曲
- 75 toPlay(pat[i]);
- 76 });
- 77 window.addEventListener('next',function(event){
- 78 //监听next事件
- 79 if(i==2){
- 80 i=0;
- 81 }else{
- 82 i++;
- 83 }
- 84 if(p){p.stop()};
- 85 toPlay(pat[i]);
- 86 });
- 87 })
2播放页代码
①播放页的html代码
- <img id="pre" src="img/a9t.png" alt="" /> //上一曲
- <img id="play" src="img/a9p.png" alt="" /> //播放按钮
- <img id="next" src="img/a9n.png" alt="" /> //下一曲
②播放页的js代码
- mui.plusReady(function(){
- var a=1; //定义一个计数器
- var h = plus.webview.getWebviewById(plus.runtime.appid);
- var self = plus.webview.currentWebview(); //获取当前页面窗口对象
- var name = self.name; //获取name参数
- document.getElementById("play").addEventListener("tap",function(){
- //play键的点击事件
- if(!name){name=1;} //通过传入的参数判断是否存在音频对象
- else if(a==3)a=1 //没什么用,只是让a不至于太大,只在1,2循环
- mui.fire(h,'send',{ //自定义页面间的send事件
- pause:a,
- })
- if(name===1){name++;return}//name
- a++; //改变计数器
- })
- document.getElementById("pre").addEventListener("tap",function(){
//pre键的点击事件- a=1; //点击上下一曲是会自动播放,所以重置a为1,这样下次播放键点击时,为暂停效果
- mui.fire(h,'pre',{
- })
- })
- document.getElementById("next").addEventListener("tap",function(){
//next键的点击事件- a=1;
- mui.fire(h,'next',{
- })
- })
- });
这次代码写的仓促,应该还存在许多的bug,大家有发现可以跟我一起来探讨,有什么意见和建议请在下方留言
今天的分享就到这里了,谢谢观看,希望能对大家有所帮助。
本次分享就到这里
谢谢大家的观看
希望能对大家有所启发
有更好的方法或不同的意见请在留言区跟我交流
PS:转载请注明出处!!
【源码分享】mui实现简单的手机音乐播放器的更多相关文章
- 一款非常简单的android音乐播放器源码分享给大家
一款非常简单的android音乐播放器源码分享给大家,该应用虽然很小,大家常用的播放器功能基本实现了,可能有点还不够完善,大家也可以自己完善一下,源码在源码天堂那里已经有了,大家可以到那里下载学习吧. ...
- 酷狗、QQ、天天动听——手机音乐播放器竞品对比
如果说什么艺术与人们生活最贴近,那应该属音乐了,因此当代人不离身的手机里必然会有自己喜欢的音乐播放器APP存在. 在当今无论PC端还是手机端音乐播放器都越来越同质化,我们应该选择哪款手机音乐播放器?它 ...
- android快捷简单的实现音乐播放器
自己做了一个相对完整的音乐播放器,现在把播放模块提取出来,分享给大家.音乐播放器基本功能都实现了的,可能有些BUG,希望谅解. 播放器功能如下: 1.暂停,播放 2.拖动条实现,快进,快退 3.歌词同 ...
- 简单的HTML5音乐播放器(带歌词滚动)
// // 0) { this.lrcArr.push(item); } } frag = document.createDocumentFragment(); for(i = 0,len = t ...
- 超简单解决linux音乐播放器乱码问题
问题 中文MP3的tag信息有些因为采用了GBK编码, 导致linux下的大多播放器(Rhythmbox, Audacious)无法正确识别而显示乱码. 如下图Audacious的乱码情况. 网上的常 ...
- 简单风格 在线音乐播放器(支持wav,MP3等)
找了两天终于找到了,支持wav,MP3,其他格式没有测试. 1.修复了jQuery判断ie的bug, 2.修复播放循环 下载地址: http://pan.baidu.com/s/1o6upwHs
- 一个简单的ipfs音乐播放器的实现
IPFS音乐播放器 IPFS相关 IPFS第一次亲密接触 什么是IPFS IPFS对比HTTP/FTP等协议的优势 IPFS应用场景 -移动数据 交易 路由 网络 定义数据 命名 使用数据 具体场景; ...
- 一个简单的Android音乐播放器
Android小白的期末作业 Android期末项目,仅用作学习使用,在线音乐部分只获取了网易云热歌榜,API来自鼻子亲了脸 传送门: GitHub 参考: anddiencn 实现功能 展示出本地的 ...
- 推荐!Html5精品效果源码分享
一直在看别人的汇总,看到了一些不错的关于 HTML5内容的源码,我也汇总下分享出来,好东西需要共享!希望可以帮到需要的朋友. 1.劲爆分享:HTML5动感的火焰燃烧动画特效 这又是一款基于HTML5的 ...
随机推荐
- highlight.js 代码高亮插件的使用
在网页使用过程中,经常会用到代码的展示.而不同颜色的代码,可以让代码看起来更直观,也更美观. 找了几个不同的插件,觉得highlight的插件比较实用,而且用起来炒鸡简单. 比如这样: 首先,我们先下 ...
- 分针网—IT教育: Html / CSS常见问题的解决方案
1. 解决Safari下input光标过大 2. 设置浮层 3. CSS绘制三角形 4. 清除浮动 1) 浮动元素父级添加样式 2) 父元素后添加伪元素 3) 同样可以使用 ...
- Android学习资料整理
1.官方网站 http://developer.android.com/index.html http://android-developers.blogspot.com/ 2.Android Des ...
- linux用户和组的创建与管理!
useradd创建用户,usermod修改用户属性,userdel删除用户,groupadd创建组,groupmod修改组属性,groupdel删除组. 创建用户命令:useradd 语法: user ...
- 转:Redis使用认证密码登录
Redis默认配置是不需要密码认证的,也就是说只要连接的Redis服务器的host和port正确,就可以连接使用.这在安全性上会有一定的问题,所以需要启用Redis的认证密码,增加Redis服务器的安 ...
- java线程总结3--synchronized关键字,原理以及相关的锁
在多线程编程中,synchronized关键字非常常见,当我们需要进行"同步"操作时,我们很多时候需要该该关键字对代码块或者方法进行锁定.被synchronized锁定的代码块,只 ...
- ztree实现权限功能(横向显示)
最近在做权限功能的时候,采用的ztree实现的,但是产品要求最后一层的权限节点要横向显示.开始在网上找的解决方案是用css样式把最后一层的display设置为inline.在我本地电脑上看了下.效果不 ...
- Spring切面编程步骤
什么是面向切面编程 面向对象的编程主要注重核心业务,而面向切面编程主要关注一些不是核心的业务,但又是必须的辅助功能,比如一个完整的系统中,记录平时系统运行时抛出的异常,需要我们去记录,以便我们对系统尽 ...
- PHP中array_merge函数与array+array的区别
在PHP中可以使用array_merge函数和两个数组相加array+array的方式进行数组合并,但两者效果并不相同,下面为大家介绍两者具体的使用区别. 区别如下: 当下标为数值时,array_me ...
- Hibernate学习笔记三:对象关系映射(一对一,一对多,多对一,多对多)
如需转载,请说明出处:http://www.cnblogs.com/gudu1/p/6895610.html Hibernate通过关系映射来表示数据库中表与表之间的关系,关系映射可以通过两种方式:配 ...