从零开发手机app之安卓音乐播放页面

上篇文章**从零开发手机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){
// console.log('开始home页面')
// console.log(JSON.stringify(data))

// 循环每条数据
res.data.forEach(function(item, index){
// console.log(JSON.stringify(item))
// 图片地址格式为决定地址
item.pic = window.images_url + item.pic
item.audio = window.media_url + item.audio
// 添加音乐li至页面
add_item(item)
})
}
)
})
// 添加每条音乐html代码
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播放进度暂未实现哟,暂停/继续、停止/开始按钮切换

以上就是今天我们完成的功能