mui实现简单的手机音乐播放器

    最近先来无事,我用mui写了一个可以跨页面控制的音乐播放器。主要功能有上一曲,下一曲,播放,暂停,感兴趣的可以继续看下去。

    说的总是不实在,直接上源码,有兴趣的可以读下注释。

    

    

1首页代码   

      

      ①首页的html代码
      

  1. <a>
  2. <i id="bofang" class="iconfont icon-play-o"></i> <!--就是一个播放按钮没啥特殊的-->
  3. </a>
      ②首页的js代码
    

  1. 1 mui.plusReady(function(){
  2. 2 p=null;
  3. 3 function toPlay(path){ //播放方法
  4. 4 p = plus.audio.createPlayer(path);//创建一个音频对象
  5. 5 p.play( function () { //成功的回调函数ps:一首歌播放完成后执行
  6. 6 if(i==2){ //判断下一曲该播放哪一个
  7. 7 i=0;
  8. 8 }else{
  9. 9 i++;
  10. 10 }
  11. 11 toPlay(pat[i]);
  12. 12 }, function ( e ) {
  13. 13 alert( "Audio play failed: " + e.message );//播放失败的回调函数
  14. 14 } );
  15. 15
  16. 16 }
  17. 17 function toPause(){ //暂停方法
  18. 18 p.pause();
  19. 19 }
  20. 20 function toResume(){ //继续方法
  21. 21 p.resume();
  22. 22 }
  23. 23 function to(s){
  24. 24 p.seekTo(s);
  25. 25 }
  26. 26 var i=0;
  27. 27 var pat = ["ziyuan/aaa.mp3",
  28. 28 "ziyuan/bbb.mp3",
  29. 29 "ziyuan/ccc.mp3"];//曲目数组
  30. 30 //播放图标
  31. 31 var bofang = document.getElementById("bofang");
  32. 32 bofang.addEventListener("tap",function(e){
  33. 33 e.stopPropagation(); //阻断事件冒泡
  34. 34 if(this.className=="iconfont icon-play-o"){ //判断图标的样子
  35. 35 //如果已经创建音频对象点击时继续,没有创建者执行play方法
  36. 36 if(!p){toPlay(pat[i]);}else{toResume()}
  37. 37 this.className="iconfont icon-zanting"; //改变图标样式
  38. 38 }else{
  39. 39 toPause(); //暂停方法
  40. 40 this.className="iconfont icon-play-o";
  41. 41 }
  42. 42 })
  43. 43
  44. 44 //播放页
  45. 45 document.getElementById("foot").addEventListener("tap",function(){
  46. 46 mui.openWindow({ //打开播放页 id为foot的标签请自行创建,前面html代码没写
  47. 47 url:"bofangye.html",
  48. 48 id:"bofangye.html",
  49. 49 styles:{
  50. 50 top:0,
  51. 51 bottom:0,
  52. 52 },extras:{
  53. 53 name:p, //将音频对象p传到播放页
  54. 54 }
  55. 55 })
  56. 56 })
  57. 57
  58. 58 //以下三个事件是页面间的事件,是播放页传参数过来通过参数值判断来执行,看不懂请配合播放页代码一起看
  59. 59 window.addEventListener('send',function(event){
  60. 60 //监听send事件
  61. 61 //获得事件参数
  62. 62 var a = event.detail.pause;
  63. 63 if(!p){ //判断是否存在p
  64. 64 toPlay(pat[i]); //不存在执行play方法
  65. 65 }else if(a%2==1){ //根据a的值判断是暂停还是继续
  66. 66 toPause();
  67. 67 }else{
  68. 68 toResume();
  69. 69 }
  70. 70 });
  71. 71 window.addEventListener('pre',function(event){
  72. 72 // 监听pre事件
  73. 73 if(i==0){i=2}else{i--}//i为曲目数组的下标
  74. 74 if(p){p.stop();} //音频对象p存在的话停止掉,然后播放下一曲,不存在则直接播放下一曲
  75. 75 toPlay(pat[i]);
  76. 76 });
  77. 77 window.addEventListener('next',function(event){
  78. 78 //监听next事件
  79. 79 if(i==2){
  80. 80 i=0;
  81. 81 }else{
  82. 82 i++;
  83. 83 }
  84. 84 if(p){p.stop()};
  85. 85 toPlay(pat[i]);
  86. 86 });
  87. 87 })
    

2播放页代码

      ①播放页的html代码

  1. <img id="pre" src="img/a9t.png" alt="" />  //上一曲
  2. <img id="play" src="img/a9p.png" alt="" /> //播放按钮
  3. <img id="next" src="img/a9n.png" alt="" />  //下一曲

      ②播放页的js代码

  1. mui.plusReady(function(){
  2. var a=1; //定义一个计数器
  3. var h = plus.webview.getWebviewById(plus.runtime.appid);
  4. var self = plus.webview.currentWebview(); //获取当前页面窗口对象
  5. var name = self.name; //获取name参数
  6. document.getElementById("play").addEventListener("tap",function(){
  7. //play键的点击事件
  8. if(!name){name=1;} //通过传入的参数判断是否存在音频对象
  9. else if(a==3)a=1 //没什么用,只是让a不至于太大,只在1,2循环
  10. mui.fire(h,'send',{ //自定义页面间的send事件
  11. pause:a,
  12. })
  13. if(name===1){name++;return}//name
  14. a++; //改变计数器
  15. })
  16. document.getElementById("pre").addEventListener("tap",function(){
                      //pre键的点击事件
  17. a=1; //点击上下一曲是会自动播放,所以重置a为1,这样下次播放键点击时,为暂停效果
  18. mui.fire(h,'pre',{
  19.  
  20. })
  21. })
  22. document.getElementById("next").addEventListener("tap",function(){
                      //next键的点击事件
  23. a=1;
  24. mui.fire(h,'next',{
  25.  
  26. })
  27. })
  28. });

    这次代码写的仓促,应该还存在许多的bug,大家有发现可以跟我一起来探讨,有什么意见和建议请在下方留言

    今天的分享就到这里了,谢谢观看,希望能对大家有所帮助。

本次分享就到这里

谢谢大家的观看

 
觉得不错请点赞
 

希望能对大家有所启发

有更好的方法或不同的意见请在留言区跟我交流

PS:转载请注明出处!!

  

【源码分享】mui实现简单的手机音乐播放器的更多相关文章

  1. 一款非常简单的android音乐播放器源码分享给大家

    一款非常简单的android音乐播放器源码分享给大家,该应用虽然很小,大家常用的播放器功能基本实现了,可能有点还不够完善,大家也可以自己完善一下,源码在源码天堂那里已经有了,大家可以到那里下载学习吧. ...

  2. 酷狗、QQ、天天动听——手机音乐播放器竞品对比

    如果说什么艺术与人们生活最贴近,那应该属音乐了,因此当代人不离身的手机里必然会有自己喜欢的音乐播放器APP存在. 在当今无论PC端还是手机端音乐播放器都越来越同质化,我们应该选择哪款手机音乐播放器?它 ...

  3. android快捷简单的实现音乐播放器

    自己做了一个相对完整的音乐播放器,现在把播放模块提取出来,分享给大家.音乐播放器基本功能都实现了的,可能有些BUG,希望谅解. 播放器功能如下: 1.暂停,播放 2.拖动条实现,快进,快退 3.歌词同 ...

  4. 简单的HTML5音乐播放器(带歌词滚动)

      // // 0) { this.lrcArr.push(item); } } frag = document.createDocumentFragment(); for(i = 0,len = t ...

  5. 超简单解决linux音乐播放器乱码问题

    问题 中文MP3的tag信息有些因为采用了GBK编码, 导致linux下的大多播放器(Rhythmbox, Audacious)无法正确识别而显示乱码. 如下图Audacious的乱码情况. 网上的常 ...

  6. 简单风格 在线音乐播放器(支持wav,MP3等)

    找了两天终于找到了,支持wav,MP3,其他格式没有测试. 1.修复了jQuery判断ie的bug, 2.修复播放循环 下载地址: http://pan.baidu.com/s/1o6upwHs

  7. 一个简单的ipfs音乐播放器的实现

    IPFS音乐播放器 IPFS相关 IPFS第一次亲密接触 什么是IPFS IPFS对比HTTP/FTP等协议的优势 IPFS应用场景 -移动数据 交易 路由 网络 定义数据 命名 使用数据 具体场景; ...

  8. 一个简单的Android音乐播放器

    Android小白的期末作业 Android期末项目,仅用作学习使用,在线音乐部分只获取了网易云热歌榜,API来自鼻子亲了脸 传送门: GitHub 参考: anddiencn 实现功能 展示出本地的 ...

  9. 推荐!Html5精品效果源码分享

    一直在看别人的汇总,看到了一些不错的关于 HTML5内容的源码,我也汇总下分享出来,好东西需要共享!希望可以帮到需要的朋友. 1.劲爆分享:HTML5动感的火焰燃烧动画特效 这又是一款基于HTML5的 ...

随机推荐

  1. highlight.js 代码高亮插件的使用

    在网页使用过程中,经常会用到代码的展示.而不同颜色的代码,可以让代码看起来更直观,也更美观. 找了几个不同的插件,觉得highlight的插件比较实用,而且用起来炒鸡简单. 比如这样: 首先,我们先下 ...

  2. 分针网—IT教育: Html / CSS常见问题的解决方案

    1. 解决Safari下input光标过大   2. 设置浮层   3. CSS绘制三角形   4. 清除浮动   1) 浮动元素父级添加样式   2) 父元素后添加伪元素     3) 同样可以使用 ...

  3. Android学习资料整理

    1.官方网站 http://developer.android.com/index.html http://android-developers.blogspot.com/ 2.Android Des ...

  4. linux用户和组的创建与管理!

    useradd创建用户,usermod修改用户属性,userdel删除用户,groupadd创建组,groupmod修改组属性,groupdel删除组. 创建用户命令:useradd 语法: user ...

  5. 转:Redis使用认证密码登录

    Redis默认配置是不需要密码认证的,也就是说只要连接的Redis服务器的host和port正确,就可以连接使用.这在安全性上会有一定的问题,所以需要启用Redis的认证密码,增加Redis服务器的安 ...

  6. java线程总结3--synchronized关键字,原理以及相关的锁

    在多线程编程中,synchronized关键字非常常见,当我们需要进行"同步"操作时,我们很多时候需要该该关键字对代码块或者方法进行锁定.被synchronized锁定的代码块,只 ...

  7. ztree实现权限功能(横向显示)

    最近在做权限功能的时候,采用的ztree实现的,但是产品要求最后一层的权限节点要横向显示.开始在网上找的解决方案是用css样式把最后一层的display设置为inline.在我本地电脑上看了下.效果不 ...

  8. Spring切面编程步骤

    什么是面向切面编程 面向对象的编程主要注重核心业务,而面向切面编程主要关注一些不是核心的业务,但又是必须的辅助功能,比如一个完整的系统中,记录平时系统运行时抛出的异常,需要我们去记录,以便我们对系统尽 ...

  9. PHP中array_merge函数与array+array的区别

    在PHP中可以使用array_merge函数和两个数组相加array+array的方式进行数组合并,但两者效果并不相同,下面为大家介绍两者具体的使用区别. 区别如下: 当下标为数值时,array_me ...

  10. Hibernate学习笔记三:对象关系映射(一对一,一对多,多对一,多对多)

    如需转载,请说明出处:http://www.cnblogs.com/gudu1/p/6895610.html Hibernate通过关系映射来表示数据库中表与表之间的关系,关系映射可以通过两种方式:配 ...