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

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

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

    

    

1首页代码   

      

      ①首页的html代码
      

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

 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实现简单的手机音乐播放器的更多相关文章

  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. 最简单的html5语言

    什么是 HTML5? HTML5 是下一代 HTML 标准. 最小的HTML5文档 下面是一个简单的HTML5文档: <</span>!DOCTYPE html><< ...

  2. Linux上bash的部分基础特性:

    命令补全: tab shell程序在接收到用户执行命令的请求,分析完成后,最左侧的字符串会被当做命令 命令查找机制: 查找内部命令: 根据PATH环境变量中设定的目录,自左而右逐个搜索目录下的文件名 ...

  3. Java学习笔记——排序算法之希尔排序(Shell Sort)

    落日楼头,断鸿声里,江南游子.把吴钩看了,栏杆拍遍,无人会,登临意. --水龙吟·登建康赏心亭 希尔算法是希尔(D.L.Shell)于1959年提出的一种排序算法.是第一个时间复杂度突破O(n²)的算 ...

  4. docker对cpu使用及在kubernetes中的应用

    docker对CPU的使用 docker对于CPU的可配置的主要几个参数如下: --cpu-shares CPU shares (relative weight) --cpu-period Limit ...

  5. Jenkins 远程构建任务

    开发过程中提交代码以后,如何不登录Jenkins就自动触发jenkins 任务来发布软件版本. 1.首先我们创建一个Jenkins任务. 2.选择"构建触发器"->勾选&qu ...

  6. ArrayList源码解析(二)自动扩容机制与add操作

    本篇主要分析ArrayList的自动扩容机制,add和remove的相关方法. 作为一个list,add和remove操作自然是必须的. 前面说过,ArrayList底层是使用Object数组实现的. ...

  7. 微信小程序大全(下)(最新整理 建议收藏)

  8. hello Kotlin!

    听说谷爹要把Kotlin作为了Android开发的一级语言,吓得我赶紧写个“Hello Kotlin!”压压惊! Kotlin是由JetBrains 公司开发的语言,并且已经开源.而JetBrains ...

  9. spring-定时器(1)

    先看一个例子 一.demo1(MethodInvokingJobDetailFactoryBean) 1.要执行业务类 public class BusinessReport { public voi ...

  10. iOS学习之应用之间的操作(转发)

    首先要说的是每一个APP都可以设置一个自己独有的URL,APP应用之间的操作就是通过这个URL来实现的! 1.如何配置自己应用的URL? 关于自己的URL,作为资深的程序猿都会想到 Info.plis ...