今天感觉无聊，想听一首音乐。没有添加其他页面，只是在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. 360路由器c301最新固件支持万能中继

    360路由器c301现在已经停产了.出厂的固件是360_301_0.7.3.8.这个版本不支持中继.5G信号.本文主要介绍如何刷最新固件以及设置万能中继. 本文为作者原创,发表在博客园:http:// ...

  2. Java线程：创建与启动

    Java线程:创建与启动 一.定义线程   1.扩展java.lang.Thread类.   此类中有个run()方法,应该注意其用法: public void run() 如果该线程是使用独立的 R ...

  3. 让AngularJS的$http 服务像jQuery.ajax()一样工作

    让AngularJS的$http 服务像jQuery.ajax()一样工作 $http的post . 请求默认的content-Type=application/json . 提交的是json对象的字 ...

  4. CCNA网络工程师学习进程（3）常规网络设计模型与基本的网络协议

        本节介绍分层的网络设计模型与基本的网络协议,包括ARP协议,ICMP协议和IP协议.     (1)三层网络架构: 一个好的园区网设计应该是一个分层的设计.一般分为接入层.汇聚层(分布层).核 ...

  5. Linux快速入门01-基础概念

    4年多前,刚到上海时报过一个关于Oracle的培训班,在那里接触到了Linux,不过一直都没真正去试着使用它.现在经过慢慢的成长,越来越觉得,Linux是每一个服务端工程师必须掌握的系统,即使是现在最 ...

  6. JAVA设计模式《三》

    上一篇为大家介绍了一下关于模板方法模式的实现,后来我发现里面有一点小瑕疵,本篇重新为大家介绍一下关于模板方法模式的实现.另外为大家分享一下关于策略模式的实现. 一.模板方法模式: 对于上一篇为大家介绍 ...

  7. poj 1950 Dessert（dfs枚举,模拟运算过程）

    /* 这个代码运行的时间长主要是因为每次枚举之后都要重新计算一下和的值! 如果要快的话,应该在dfs,也就是枚举的过程中计算出前边的数值(这种方法见第二个代码),直到最后,这样不必每一次枚举都要从头再 ...

  8. java中如何生成可执行的jar文件

    java中如何生成可执行的jar文件 最简单的方法就是: jar -cfe Card.jar CardLayoutDemo CardLayoutDemo$1.class CardLayoutDemo$ ...

  9. 通过Nginx部署Django（基于ubuntu)

    Django的部署可以有很多方式,采用nginx+uwsgi的方式是其中比较常见的一种方式. 在这种方式中,我们的通常做法是,将nginx作为服务器最前端,它将接收WEB的所有请求,统一管理请求.ng ...

  10. Java编程思想——初始化与清理

    PS:最近一直忙于项目开发..所以一直没有写博客..趁着空闲期间来一发.. 学习内容: 1.初始化 2.清理 1.初始化   虽然自己的Java基础还是比较良好的..但是在解读编程思想的时候还是发现了 ...