上篇文章**从零开发手机app之安卓显示首页歌曲列表**我们完成了音乐列表展示的功能,本文继续下面的代码,主要实现点击音乐列表中的某个音乐,进入播放页面,并播放该音乐。
要播放指定音乐,我们需要跳转到播放音乐,并将该音乐数据携带过来,所以我们要修改之前写的音乐列表页面代码,加上跳转且携带数据的功能。
首页
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73
| <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title>首页</title> <link href="css/mui.min.css" rel="stylesheet" /> </head> <body> <header class="mui-bar mui-bar-nav"> <h1 class="mui-title">首页</h1> </header> <div class="mui-content"> <ul class="mui-table-view" id="music_list"></ul> </div> </body> <script src="js/mui.js"></script> <script type="text/javascript" charset="utf-8"> mui.init(); mui.plusReady(function(){ mui.get(window.base_url+'/songs', {}, function(res){
res.data.forEach(function(item, index){ item.pic = window.images_url + item.pic item.audio = window.media_url + item.audio add_item(item) }) } ) }) function add_item(obj){ var li = document.createElement("li"); li.className ="mui-table-view-cell mui-media"; var a = document.createElement("a"); a.onclick = function(){ mui.openWindow({ url:"view.html", id:"view.html", extras:obj }) } var img = document.createElement("img"); img.className ="mui-media-object mui-pull-left"; img.src = obj.pic; var div = document.createElement("div"); div.className="mui-media-body"; div.innerText = obj.title; var p = document.createElement("p"); p.className="mui-ellipsis"; p.innerText=obj.author+'-'+obj.releaseDate; li.appendChild(a); a.appendChild(img); a.appendChild(div); div.appendChild(p); document.getElementById("music_list").appendChild(li); } </script> </html>
|
音乐播放页面
view.html
代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132
| <!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.css" rel="stylesheet" /> <style> .song_img{ width: 100%; text-align: center; padding: 20px; } .song_pic_bg{ width: 260px; height: 260px; border-radius: 50%; background: #2AC845; margin: 0 auto; } .to_rotate{ animation: rotate 5s linear infinite; } @keyframes rotate{from{transform: rotate(0deg)} to{transform: rotate(360deg)} } .pic{ width:200px; height: 200px; margin: 30px auto; border-radius: 50%; } .text-center{ text-align: center; } </style> </head>
<body> <header class="mui-bar mui-bar-nav"> <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> <h1 class="mui-title" id="title"></h1> </header> <div class="mui-content"> <div class="song_img" id="cd"> <div class="song_pic_bg"> <img src="http://img.mukewang.com/5d81aba509a59de109000383.jpg" class="pic" id="pic" /> </div> </div> <div class="mui-input-row mui-input-range"> <input type="range" min="0" max="100"> </div> <button type="button" id="pause" class="mui-btn mui-btn-yellow mui-btn-block">暂停</button> <button type="button" id="stop" class="mui-btn mui-btn-red mui-btn-block">停止</button>
</div> </body> <script src="js/mui.js"></script> <script type="text/javascript"> mui.init() var player_obj = null; var parse = false; var stop = false; var audio = null; parse_btn = document.getElementById("pause") stop_btn = document.getElementById("stop") mui.plusReady(function() { data = plus.webview.currentWebview() document.getElementById('title').innerText=`正在播放${data.title}` document.getElementById('pic').src=data.pic audio = data.audio player_obj = plus.audio.createPlayer(audio) player_obj.play() document.getElementById('cd').classList.add('to_rotate') }) parse_btn.addEventListener('tap',function () { parse = !parse if(parse){ player_obj.pause() parse_btn.innerText='继续' document.getElementById('cd').classList.remove('to_rotate') }else{ player_obj.resume() parse_btn.innerText='暂停' document.getElementById('cd').classList.add('to_rotate') } }) stop_btn.addEventListener('tap',function () { stop = !stop if(stop){ player_obj.stop(); stop_btn.innerText='开始' document.getElementById('cd').classList.remove('to_rotate') }else{ player_obj = plus.audio.createPlayer(audio) player_obj.play() stop_btn.innerText='停止' document.getElementById('cd').classList.add('to_rotate') } }) </script> </html>
|
预览效果
我们简单做了一点特效,播放时音乐旋转,如同cd
一样,slide
播放进度暂未实现哟,暂停/继续、停止/开始按钮切换
以上就是今天我们完成的功能