今天感觉无聊，想听一首音乐。没有添加其他页面，只是在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. PHP面向对象之魔术方法复习

    魔术方法复习 2014-9-2 10:08:00 NotePad++ By jiancaigege 飞鸿影~========================= 1.__construct() 构造方法 ...

  2. 如何制作自己的yum源

    在 /etc/yum.repos.d下创建一个以.repo结尾的文件如aaa.repo,其内容如下(一定要以repo结尾)   [aaa] name=aaa baseurl=http://mirror ...

  3. POJ1014 解题报告(DFS)

    题目在此:http://poj.org/problem?id=1014 要看清题意呢,题中要求输入的是价值分别为1,2,3,4,5,6的大理石的个数,而不是6块价值为输入数字的大理石!选这个题主要想练 ...

  4. 分享系列--面试JAVA架构师--链家网

    本月7日去了一趟链家网面试,虽然没有面上,但仍有不少收获,在此做个简单的分享,当然了主要是分享给自己,让大家见笑了.因为这次是第一次面试JAVA网站架构师相关的职位,还是有些心虚的,毕竟之前大部分时间 ...

  5. wangEditor——轻量级web富文本框

    提示:最新版wangEditor请参见  http://www.wangeditor.com/  和   https://github.com/wangfupeng1988/wangEditor 交流 ...

  6. SQL Server 2014云特性：无缝集成公有云

    本篇是我在IT168的约稿,原文地址:http://tech.it168.com/a2014/0620/1637/000001637358_all.shtml       IT行业已经进入了云时代,未 ...

  7. pomelo获取客户端IP

    代码: Handler.prototype.getClientIp = function(msg, session, next) { var ip = session.__session__.__so ...

  8. Prim算法(一)之 C语言详解

    本章介绍普里姆算法.和以往一样,本文会先对普里姆算法的理论论知识进行介绍,然后给出C语言的实现.后续再分别给出C++和Java版本的实现. 目录 1. 普里姆算法介绍 2. 普里姆算法图解 3. 普里 ...

  9. 使用AndroidStudio报错：INSTALL_FAILED_UPDATE_INCOMPATIBLE

    安装Android Studio后,用真机调试运行项目时出现:INSTALL_FAILED_UPDATE_INCOMPATIBLE这个错误 原因: 1. 可能是设备内存不足: 2. APP已经存在: ...

  10. .NET平台下开源框架

    一.AOP框架Encase 是C#编写开发的为.NET平台提供的AOP框架.Encase 独特的提供了把方面(aspects)部署到运行时代码,而其它AOP框架依赖配置文件的方式.这种部署方面(asp ...