今天感觉无聊，想听一首音乐。没有添加其他页面，只是在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. 《轻量级Java Web整合开发入门SSH》 - 快速理解Java框架的又一积木

           学习JAVA不难,难的是没有多余的时间给你仔细学习.       伴随着项目的不断跟进,责任重于泰山,必须快速提升.       我不能期望把一本书或者一个项目完全吃透,只希望能用数量去 ...

  2. github无法访问?试试修改hosts

    github国内无法访问时,可以试试如下修改hosts,亲测有效: 204.232.175.78 http://documentcloud.github.com 207.97.227.239 http ...

  3. fir.im Weekly - 揭秘直播移动 APP 技术实现

    2016年直播似乎无处不在,作为一个开发者也许需要补充下关于直播技术点.本期 fir.im Weekly 整理了一些开发者对于直播实践项目中的技术经验与直播技术架构分析等内容,还有一些关于 iOS . ...

  4. Mongodb 的基本使用

    一.cmd连接mongodb 服务 进入mongodb的bin目录下:[D:\mongodb3.2.5\bin]$ mongo 127.0.0.1:27017 常用查询: show dbs 查看所有数 ...

  5. How Google Tests Software - The Life of a TE

    By James WhittakerThe Test Engineer is a newerrole within Google than either SWEs or SETs. As such, ...

  6. android target unknown and state offline解决办法

    没有错,将adb的版本升级一下就好了! 下载地址为:http://files.cnblogs.com/files/hujunzheng/adb1.0.32.zip

  7. java中泛型上限，下限应用

    v 一.程序中无形之中用到的泛型 import java.util.*; class Person implements Comparable<Person>{ String name; ...

  8. 哈夫曼树(一)之 C语言详解

    本章介绍哈夫曼树.和以往一样,本文会先对哈夫曼树的理论知识进行简单介绍,然后给出C语言的实现.后续再分别给出C++和Java版本的实现:实现的语言虽不同,但是原理如出一辙,选择其中之一进行了解即可.若 ...

  9. [Node.js] 闭包和高阶函数

    原文地址:http://www.moye.me/2014/12/29/closure_higher-order-function/ 引子 最近发现一个问题:一部分写JS的人,其实对于函数式编程的概念并 ...

  10. Java判断回文数算法简单实现

    好久没写java的代码了, 今天闲来无事写段java的代码,算是为新的一年磨磨刀,开个头,算法是Java判断回文数算法简单实现,基本思想是利用字符串对应位置比较,如果所有可能位置都满足要求,则输入的是 ...