apicloud apicloud

注册
查看: 3409|回复: 20

[模块教程] uimusic模块demo示例

版主

UID:83211

主题:
171
帖子:
9317
云币:
2074

APICloud粉丝模块开发者一周年你吃屎!女朋友SB侠APICloud大会专属勋章捣蛋鬼

[模块教程] uimusic模块demo示例

3409 20 | 发表于 2019-7-13 12:06:03 |阅读模式 | |
uimusic 封装了带音乐界面的音乐播放功能。

点击进入模块详情



  1. <!DOCTYPE html>
  2. <html>

  3. <head>
  4.     <title>Module Develop</title>
  5.     <meta charset="utf-8">
  6.     <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
  7.     <style type="text/css">
  8.         html,
  9.         body {
  10.             height: 100%
  11.         }
  12.         
  13.         body {
  14.             background-color: #fff;
  15.             margin: 0;
  16.         }
  17.         
  18.         #wrap {
  19.             height: 100%;
  20.             position: relative;
  21.         }
  22.         
  23.         #header {
  24.             padding-top: 20px;
  25.             background-color: #5082c2;
  26.             height: 44px;
  27.             position: relative;
  28.         }
  29.         
  30.         #header h1 {
  31.             font-size: 20px;
  32.             height: 44px;
  33.             line-height: 44px;
  34.             margin: 0em;
  35.             color: #fff;
  36.             margin-left: 100px;
  37.             margin-right: 100px;
  38.             text-align: center;
  39.         }
  40.         
  41.         #main {
  42.             display: -webkit-box;
  43.             -webkit-box-orient: vertical;
  44.             -webkit-box-pack: center;
  45.         }
  46.         
  47.         a.button {
  48.             display: -webkit-box;
  49.             -webkit-box-orient: vertical;
  50.             -webkit-box-pack: center;
  51.             -webkit-box-align: center;
  52.             height: 32px;
  53.             margin: 8px;
  54.             background-color: rgba(240, 240, 240, 1.0);
  55.             border-color: rgba(220, 220, 220, 1.0);
  56.             border-width: 2px;
  57.             border-style: solid;
  58.         }
  59.         
  60.         a.active {
  61.             background-color: rgba(240, 240, 240, 0.7);
  62.         }
  63.     </style>
  64. </head>

  65. <body>
  66.     <div id="wrap">
  67.         <div id="main">
  68.             <a class="button" tapmode="active" onclick="netplay()">音乐播放</a>
  69.             <a class="button" tapmode="active" onclick="show()">界面回来</a>
  70.             <a class="button" tapmode="active" onclick="close()">界面关闭</a>
  71.             <a class="button" tapmode="active" onclick="stop()">停止播放</a>
  72.             <a class="button" tapmode="active" onclick="addMusic()">添加单条音乐</a>
  73.             <a class="button" tapmode="active" onclick="selectMusic()">指定某条音乐播放</a>
  74.             <a class="button" tapmode="active" onclick="getCurrentPlayer()">获取当前播放音乐信息</a>

  75.             <a class="button" tapmode="active" onclick="musicPlayPause()">播放或者暂停</a>
  76.             <a class="button" tapmode="active" onclick="musicPrevious()">播放上一曲</a>
  77.             <a class="button" tapmode="active" onclick="musicNext()">播放下一曲</a>
  78.         </div>
  79.     </div>
  80. </body>
  81. <script>
  82.     var demo;

  83.     function getCurrentPlayer() {
  84.         demo.getCurrentPlayer(function(ret, err) {
  85.             alert("getCurrentPlayer|" + JSON.stringify(ret));
  86.         });
  87.     }

  88.     function addMusic() {
  89.         demo.addMusic({
  90.             data: {
  91.                 name: "小苹果3666(widget://)",
  92.                 filename: "widget://res/MP3s/cemo111.mp3",
  93.                 singer: "666666",
  94.                 icon: "widget://res/Images/1.jpg",
  95.                 other: 5,
  96.                 fenxiangSum: 3,
  97.                 downmusicSum: 33,
  98.                 pinglunSum: 44,
  99.                 background: "#DDA0DD"
  100.             }
  101.         }, function(ret, err) {
  102.             alert("addMusic|" + JSON.stringify(ret));
  103.         });
  104.     }

  105.     function selectMusic() {
  106.         demo.selectMusic({
  107.             index: 4
  108.         }, function(ret, err) {
  109.             alert("selectMusic|" + JSON.stringify(ret));
  110.         });
  111.     }

  112.     function netplay() {
  113.         demo.playMusic({
  114.             musics: [{
  115.                 name: "小苹果1(http://)",
  116.                 filename: "http://7xwc0t.com1.z0.glb.clouddn.com/apicloud/619a3762a2be7650c4345c1d7c23575e.mp3",
  117.                 singer: "筷子兄弟",
  118.                 icon: "http://7xwc0t.com1.z0.glb.clouddn.com/apicloud/3a3d926564ab4c5b2292744d5ffb0ec6.jpg",
  119.                 other: 1,
  120.                 fenxiangSum: 43,
  121.                 downmusicSum: 12,
  122.                 pinglunSum: 45,
  123.                 background: "http://7xwc0t.com1.z0.glb.clouddn.com/apicloud/3a3d926564ab4c5b2292744d5ffb0ec6.jpg"
  124.             }, {
  125.                 name: "小苹果2(http://)",
  126.                 filename: "http://7xwc0t.com1.z0.glb.clouddn.com/apicloud/28643b3e661abe4dfb3da33f2d1e2b59.mp3",
  127.                 singer: "筷子兄弟",
  128.                 icon: "http://7xwc0t.com1.z0.glb.clouddn.com/apicloud/7c23cd15fc8fe841ab20f6c87d47ae59.jpg",
  129.                 other: 2,
  130.                 fenxiangSum: 55,
  131.                 downmusicSum: 66,
  132.                 pinglunSum: 233,
  133.                 background: "#800080"
  134.             }, {
  135.                 name: "小苹果3(widget://)",
  136.                 filename: "widget://res/MP3s/cemo111.mp3",
  137.                 singer: "筷子兄弟",
  138.                 icon: "widget://res/Images/1.jpg",
  139.                 other: 3,
  140.                 fenxiangSum: 123,
  141.                 downmusicSum: 889,
  142.                 pinglunSum: 233,
  143.                 background: "#5F9EA0"
  144.             }, {
  145.                 name: "传奇4(fs://)",
  146.                 filename: "fs://shangxuege.mp3",
  147.                 singer: "王菲",
  148.                 icon: "widget://res/Images/nanquan@2x.jpg",
  149.                 other: 4,
  150.                 fenxiangSum: 123,
  151.                 downmusicSum: 889,
  152.                 pinglunSum: 233,
  153.                 background: "#00FF7F"
  154.             }],
  155.             ttf: "widget://res/UKIJTor.ttf",
  156.             downmusicBtn: false,
  157.             fenxiangBtn: true,
  158.             pinglunBtn: true,
  159.             nameTextSize: 20,
  160.             singerTextSize: 16,
  161.             isShowUi: false
  162.         }, function(ret, err) {});
  163.     }

  164.     function show() {
  165.         demo.showUI();
  166.     }

  167.     function close() {
  168.         demo.closeUI();
  169.     }

  170.     function stop() {
  171.         demo.stopMusic();
  172.     }

  173.     function musicPrevious() {
  174.         demo.musicPrevious();
  175.     }


  176.     function musicPlayPause() {
  177.         demo.musicPlayPause();
  178.     }

  179.     function musicNext() {
  180.         demo.musicNext();
  181.     }

  182.     function apiready() {
  183.         demo = api.require('uimusic');
  184.         demo.addEventListener({
  185.             name: "closeui"
  186.         }, function(ret, err) {
  187.             alert("closeui>>addEventListener|" + JSON.stringify(ret));
  188.         });
  189.         demo.addEventListener({
  190.             name: "pinglun"
  191.         }, function(ret, err) {
  192.             alert("pinglun>>addEventListener|" + JSON.stringify(ret));
  193.         });
  194.         demo.addEventListener({
  195.             name: "fenxiang"
  196.         }, function(ret, err) {
  197.             alert("fenxiang>>addEventListener|" + JSON.stringify(ret));
  198.         });
  199.         demo.addEventListener({
  200.             name: "downmusic"
  201.         }, function(ret, err) {
  202.             alert("downmusic>>addEventListener|" + JSON.stringify(ret));
  203.         });

  204.         demo.addEventListener({
  205.             name: "sharetop"
  206.         }, function(ret, err) {
  207.             alert("sharetop>>addEventListener|" + JSON.stringify(ret));
  208.         });
  209.     }
  210. </script>

  211. </html>
复制代码


模块定制开发 qq: 176142998

实习司机

UID:843322

主题:
25
帖子:
131
云币:
155
发表于 2020-1-7 16:28:27 |
还不错哦

驾校小白

UID:833549

主题:
0
帖子:
1
云币:
1
发表于 2020-4-18 17:33:58 |
请问可以指导一下如何指定某条音乐删除吗

版主

UID:83211

主题:
171
帖子:
9317
云币:
2074

APICloud粉丝模块开发者一周年你吃屎!女朋友SB侠APICloud大会专属勋章捣蛋鬼

 楼主| 发表于 2020-4-18 18:04:18 |
目前没有删除的好像
模块定制开发 qq: 176142998

主题:
75
帖子:
663
云币:
631
发表于 2020-4-19 21:43:42 |
加油,学习了

主题:
75
帖子:
663
云币:
631
发表于 2020-4-20 09:19:55 |
学习了,收藏

主题:
3
帖子:
24
云币:
28
发表于 2020-5-29 10:31:26 |
可以支持线控吗?

版主

UID:83211

主题:
171
帖子:
9317
云币:
2074

APICloud粉丝模块开发者一周年你吃屎!女朋友SB侠APICloud大会专属勋章捣蛋鬼

 楼主| 发表于 2020-5-29 18:31:00 |
sailor2008 发表于 2020-5-29 10:31
可以支持线控吗?

不支持。
模块定制开发 qq: 176142998

驾校小白

UID:517586

主题:
7
帖子:
44
云币:
41
发表于 2020-8-19 20:24:41 |
也帮我制作一个xalhar这样的APP要多少钱?

版主

UID:83211

主题:
171
帖子:
9317
云币:
2074

APICloud粉丝模块开发者一周年你吃屎!女朋友SB侠APICloud大会专属勋章捣蛋鬼

 楼主| 发表于 2020-8-20 07:40:41 |
别客 发表于 2020-8-19 20:24
也帮我制作一个xalhar这样的APP要多少钱?

我不接整体app开发。
模块定制开发 qq: 176142998
12下一页
您需要登录后才可以回帖 登录 | 立即注册

快速回复 返回顶部 返回列表