今天感觉无聊，想听一首音乐。没有添加其他页面，只是在index_list.html页面进行代码添加而已。

 <!doctype html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

         <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

         <link href="../css/mui.min.css" rel="stylesheet" />

     </head>

     <body>

         <div class="mui-content">

             <div class="mui-popup-text" style="padding-left: 2em;padding-top: 15px;">你好，这里是另一个页面！欢迎您的到来。<br/>今天无聊放首本地歌曲听听。</div>

             <div style="padding-left: 2em;padding-top: 15px;">

                 <button id="musicStart" type="button" class="mui-btn mui-btn-primary">GO!</button><br /><br />

                 <button id="musicPause" type="button" class="mui-btn mui-btn-primary">PAUSE!</button><br /><br />

                 <button id="musicResume" type="button" class="mui-btn mui-btn-primary">RESUME!</button><br /><br />

                 <button id="musicStop" type="button" class="mui-btn mui-btn-primary">STOP!</button><br /><br />

             </div>

         </div>

         <script src="../js/mui.min.js"></script>

         <script type="text/javascript">

             mui.init(); //初始化

             // 扩展API加载完毕后调用onPlusReady回调函数

             document.addEventListener('plusready', onPlusReady, false);

             // 扩展API加载完毕，现在可以正常调用扩展API

             function onPlusReady() {}

             var music = null;

             //开始播放

             document.getElementById("musicStart").addEventListener('tap',function (){

                 if(plus.audio == undefined) {

                     alert("Device not ready!");

                 }

                 music = plus.audio.createPlayer("../upload/file/music/caichunjia-qiangwei.mp3");

                 music.play(function() {

                     alert("Audio play success!");

                 }, function(e) {

                     alert("Audio play error!" + e.message);

                 });

             });

             //暂停播放

             document.getElementById("musicPause").addEventListener('tap',function(){

                 music.pause();

             });

             //恢复播放

             document.getElementById("musicResume").addEventListener('tap',function(){

                 music.resume();

             });

             //停止播放

             document.getElementById("musicStop").addEventListener('tap',function(){

                 music.stop();

             });

         </script>

     </body>

 </html>

暂时只支持播放本地音乐，播放、暂停、恢复、停止四个功能键。存在bug，尚未完善，后期会完善，这个后期不是后会无期的意思，不要误会，小编一定会完善的。
下面附上官方文档：http://www.html5plus.org/doc/zh_cn/audio.html

手机测试截图：测试手机系统参数：Android4.2.2.

结尾留下一个思考题：display与tap，见解可以写在评论里面。
转载请注明出处，谢谢。

MUI（4）的更多相关文章

  1. MUI（3）

    本篇博文是继续上篇博文MUI(2).上面这幅图是博文MUI(1)中实现的效果,在博文MUI(1)中提到了2个页面,一个页面是index.html,另一个页面是index_list.html页面.上面这 ...

  2. MUI（2）

    本篇博文是继续MUI(1)博文. 上一篇博文小编写了两个页面,一个页面只写了一个头部导航栏,另一个页面写了一个按钮,然后这两个页面进行合并显示,即在头部导航栏页面加载显示另一个页面的按钮.仔细观察上一 ...

  3. MUI（5）

    今天实现9宫格菜单.先上效果图: 就是这个效果咯,界面不太美观,底部导航栏是为了苹果用户没有返回按键设计的,只是为了方便演示而已,没有做过多的处理.首先先说一下这个底部导航栏如何实现,这个底部导航栏小 ...

  4. MUI（1）

    今天小编用HBuilder+MUI开发移动APP,不用Android原生也不用IOS原生,仅仅用HTML5+MUI.小编也是初学者所以如有不准确的地方望大家指出帮助小编改正,同时也可以促进大家的深入学 ...

  5. mui开发app前言（一）

    dcloud mui开发app前言 大一那会就听说html5快要发布了,前景无量,厉害到能写操作系统==|||(什么???蛤?) 似乎html5标准还没正式发布那会,使用hybrid模式开发app已经 ...

  6. 基于Html5 Plus + Vue + Mui 移动App 开发（二）

    基于Html5 Plus + Vue + Mui 移动App 开发(二) 界面效果: 本页面采用Html5 Plus + Vue + Mui 开发移动界面,本页面实现: 1.下拉刷新.上拉获取更多功能 ...

  7. MUI学习03-滚动图（幻灯片）及菜单项（九宫格）

    <!--标准mui.css-->引入CSS:<link rel="stylesheet" href="../css/mui.min.css"& ...

  8. mui框架（三）

    1.Ajax-get请求 // get测试请求地址 http://test.dongyixueyuan.com/link_app/get?state=index&num=0 mui.get(' ...

  9. Html5+Mui前端框架,开发记录（三）：七牛云 上传图片

    1.Html界面: <div id="container"> <label>凭证:</label> <div id="uploa ...

随机推荐

  1. 基础才是重中之重~C#中标准的IDispose模式

    回到目录 IDispose模式在C++中用的很多,用来清理资源,而在C#里,资源分为托管和非托管两种,托管资源是由C#的CLR帮助我们清理的,它是通过调用对象的析构函数完成的对象释放工作,而对于非托管 ...

  2. Jquery判断数组中是否包含某个元素$.inArray()的用法

    判断数组里面是否包含某个元素可以使用 $.inArray("元素(字符串)",数组名称) 进行判断 ,当存在该元素(字符串)时,返回该元素在数组的下标,不存在时返回 -1 示例代码 ...

  3. tabs左右滚动

    $(function () { //IdivLeft小于0,说明左边还有菜单,菜单总数大于8 //IdivLeft等于0,说明菜单总数小于8 //IdivLeft大于0,说明右边还有菜单,菜单总数大于 ...

  4. C++11模板类使用心得

    1.推荐使用std::shared_ptr<TaskT>代替指针TaskT*使用,shared_ptr是一种智能指针,能自主销毁释放内存,在c++11中被引入,在多线程编程中有很大的用处, ...

  5. 35．按要求编写Java程序： （1）编写一个接口：InterfaceA，只含有一个方法int method(int n)； （2）编写一个类：ClassA来实现接口InterfaceA，实现int method(int n)接口方 法时，要求计算1到n的和； （3）编写另一个类：ClassB来实现接口InterfaceA，实现int method(int n)接口 方法时，要求计算n的阶乘（n

      35．按要求编写Java程序: (1)编写一个接口:InterfaceA,只含有一个方法int method(int n): (2)编写一个类:ClassA来实现接口InterfaceA,实现in ...

  6. 关于Git和Github你不知道的十件事

    Git 和 GitHub都是非常强大的工具.即使你已经使用他们很长时间,你也很有可能不知道每个细节.我整理了Git和GitHub可能提高日常效率的10个常用技巧. GitHub 快捷键: t 和 w ...

  7. c++中关于初始化型参列表的一些问题

    /* 1.成员是按照他们在类中出现的顺序进行初始化的,而不是按照他们在初始化列表出现的顺序初始化的! 一个好的习惯是,按照成员定义的顺序进行初始化. 2.数组成员在初始化型参列表中不正确 */ #in ...

  8. CentOS 7 关闭防火墙和SELinux

    [修改机器名] # vi /etc/hostname [关SELinux] # vi /etc/selinux/config设置SELINUX=disabled [关防火墙] # systemctl ...

  9. Android基于mAppWidget实现手绘地图（十三）–如何显示/隐藏任意类型的地图对象

    这个很简单,想要显示或隐藏任意类型的地图对象,首先要对地图对象进行分类.不同类型的地图对象放置到不同的地图图层上,然后控制地图图层的显示/隐藏即可. 实例: Layer sportsLayer = m ...

  10. web基础---->request的请求参数分析

    当contentType为application/json的时候,在servlet中通过request.getParameter得到的数据为空.今天我们就java的请求,分析一下request得到参数 ...