微信小程序——【云音乐播放器】
目录
第一章 开发准备
一、项目结构
二、新建微信小程序项目
第二章 标签页切换
一、常用组件介绍
二、编写页面结构和样式
第三章 音乐推荐
一、组件介绍
二、编写音乐推荐页面结构和样式
第四章 播放器
一、任务分析
二、组件介绍
三、实现播放器功能
四、编写播放器页面
第五章 播放列表
一、实现播放列表功能
二、测试播放列表切换功能
三、最终结果展示页面
第一章 开发准备
一、项目结构
- 音乐小程序项目页面结构：
| tab导航栏 | content内容区 | player音乐播放器控件 |
- 音乐小程序项目目录结构
| 标签 | 功能 |
|---|---|
| app.js | 应用程序的逻辑文件 |
| app.json | 应用程序的配置文件 |
| pages/index/index.js | index页面的逻辑文件 |
| pages/index/index.json | index页面的配置文件 |
| pages/index/index.wxss | index页面的样式文件 |
二、新建微信小程序项目
- 开发者工具创建空白项目，命名为music：
- 修改
app.json，标题导航栏名称改为"音乐"{ "pages":[ "pages/index/index" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "音乐", "navigationBarTextStyle":"black" }, "style": "v2", "sitemapLocation": "sitemap.json" }
- 删除
index.wxml、index.wxss里的内容使其成为一个空白的页面
第二章 标签页切换
一、常用组件介绍
swiper常用属性：
| 可选值 | 说明 | 默认 |
|---|---|---|
| indicator-dots | Boolean | 是否显示面板指示点，默认为false |
| indicator-color | Color | 指示点颜色，默认为rgba(0,0,0,.3) |
| indicator-active-color | Color | 当前选中的指示点颜色，默认为#000000 |
| autoplay | Boolean | 是否自动切换，默认为false |
| current | Number | 当前所在滑块的index，默认为0 |
| current-item-id | String | 当前所在滑块的item-id（不能同时指定current） |
| interval | Number | 自动切换时间间隔（毫秒），默认为5000 |
| duration | Number | 滑动动画时长（毫秒），默认为500 |
| circular | Boolean | 是否采用衔接滑动，默认为false |
| vertical | Boolean | 滑动方向是否为纵向，默认为false |
| vertical | Boolean | 滑动方向是否为纵向，默认为false |
-
swiper组件编写滑动页面结构：0 1 2 
二、编写页面结构和样式
- 在
pages/index/index.wxml编写页面和tab导航栏音乐推荐 播放器 播放列表 
- 在
pages/index/index.wxss编写页面样式和tab导航栏样式
page {
display: flex;
flex-direction: column;
background: #17181a;
color: #ccc;
height: 100%;
}
.tab {
display: flex;
}
.tab-item {
flex: 1;
font-size: 10pt;
text-align: center;
line-height: 72rpx;
border-bottom: 6rpx solid #eee;
}
.tab-item.active {
color: #c25b5b;
border-bottom-color: #c25b5b;
}
- 添加页面
info.wxml、playlist.wxml、play.wxml文件 
- 实现标签页切换，通过滚动事件切换页面效果
音乐推荐
播放器
播放列表
- 滚动事件
// tab切换
changeTab: function(e) {
this.setData({
tab: e.detail.current
})
},
- 通过滚动事件切换页面
第三章 音乐推荐
一、组件介绍
scroll-view组件的属性及说明
| 可选值 | 说明 | 默认 |
|---|---|---|
| scroll-x | Boolean | 允许横向滚动，默认为false |
| scroll-x | Boolean | 允许横向滚动，默认为false |
| scroll-x | Boolean | 允许横向滚动，默认为false |
| scroll-left | Number / String | 设置横向滚动条的位置 |
| bindscrolltoupper | EventHandle | 滚动到顶部/左边时触发的事件 |
| bindscrolltolower | EventHandle | 滚动到底部/右边时触发的事件 |
| bindscrolltolower | EventHandle | 滚动到底部/右边时触发的事件 |
| bindscrolltolower | EventHandle | 滚动到底部/右边时触发的事件 |
| bindscroll | EventHandle | 滚动时触发的事件 |
二、编写音乐推荐页面结构和样式
- 在
info.wxml里实现内容区域滚动和轮播效果图
.content-info {
height: 100%;
}
::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
}
/* 轮播图 */
.content-info-slide {
height: 302rpx;
margin-bottom: 20px;
}
.content-info-slide image {
width: 100%;
height: 100%;
}
- 展示页面
- 在
info.html里实现功能按钮
私人FM
每日歌曲推荐
云音乐新歌榜
/* 功能按钮 */
.content-info-portal {
display: flex;
margin-bottom: 15px;
}
.content-info-portal>view {
flex: 1;
font-size: 11pt;
text-align: center;
}
.content-info-portal image {
width: 120rpx;
height: 120rpx;
display: block;
margin: 20rpx auto;
}
- 展示页面
flex布局实现热门音乐的页面布局
推荐歌曲
紫罗兰
五月之歌
菩提树
欢乐颂
安魂曲
摇篮曲
/* 热门音乐 */
.content-info-list {
font-size: 11pt;
margin-bottom: 20rpx;
}
.content-info-list > .list-title {
margin: 20rpx 35rpx;
}
.content-info-list > .list-inner {
display: flex;
flex-wrap: wrap;
margin: 0 20rpx;
}
.content-info-list > .list-inner > .list-item {
flex: 1;
}
.content-info-list > .list-inner > .list-item > image {
display: block;
width: 200rpx;
height: 200rpx;
margin: 0 auto;
border-radius: 10rpx;
border: 1rpx solid #555;
}
.content-info-list > .list-inner > .list-item > view {
width: 200rpx;
margin: 10rpx auto;
font-size: 10pt;
}
- 展示页面
- 在
index.wxml里编写底部播放器代码钢琴协奏曲 肖邦 
- 底部播放器样式代码
/* 底部播放器 */
.player {
display: flex;
align-items: center;
background: #222;
border-top: 1px solid #252525;
height: 112rpx;
}
.player-cover {
width: 80rpx;
height: 80rpx;
margin-left: 15rpx;
border-radius: 8rpx;
border: 1px solid #333;
}
.player-info {
flex: 1;
font-size: 10pt;
line-height: 38rpx;
margin-left: 20rpx;
padding-bottom: 8rpx;
}
.player-info-singer {
color: #888;
}
.player-controls image {
width: 80rpx;
height: 80rpx;
margin-right: 15rpx;
}
- 测试效果页面
第四章 播放器
一、任务分析
- 播放器具体功能
1.音乐信息：显示当前播放曲目的标题和艺术家
2.专辑封面：当音乐播放时，专辑封面会顺时针旋转
3.播放进度：显示播放进度，调节音乐进度二、组件介绍
audioCtx对象声明的方式
var audioCtx = wx.createInnerAudioContext();- 音频
API接口的属性及说明
| 可选值 | 名称 | 说明 |
| 属性 | src | 音频资源的地址，用于直接播放 |
| startTime | 开始播放的位置（秒），默认为0 | |
| autoplay | 是否自动开始播放，默认为false | |
| loop | 是否循环播放，默认为false | |
| volume | 音量。范围0~1。默认为1 | |
| duration | 音频的长度（秒）。在当前有合法的src时返回（只读） | |
| currentTime | 音频的播放位置（秒）。在当前有合法的src时返回（只读） | |
| paused | 开始播放的位置（秒），默认为0 |
三、实现播放器功能
- 在
index.js里定义基础播放列表和音乐状态数据
/**
* 页面的初始数据
*/
data: {
item: 0,
tab: 0,
// 播放列表数据
playlist: [{
id: 1,
title: '玫瑰花的葬礼',
singer: '许嵩',
src: 'https://www.ytmp3.cn/down/78393.mp3',
coverImgUrl: '/images/cover.jpg'
}, {
id: 2,
title: '幻听',
singer: '许嵩',
src: 'https://www.ytmp3.cn/down/59696.mp3',
coverImgUrl: '/images/cover.jpg'
}, {
id: 3,
title: '清明雨上',
singer: '许嵩',
src: 'https://www.ytmp3.cn/down/36119.mp3',
coverImgUrl: '/images/cover.jpg'
}, {
id: 4,
title: '灰色头像',
singer: '许嵩',
src: 'https://www.ytmp3.cn/down/59697.mp3',
coverImgUrl: '/images/cover.jpg'
}],
state: 'paused',
playIndex: 0,
play: {
currentTime: '00:00',
duration: '00:00',
percent: 0,
title: '',
singer: '',
coverImgUrl: '/images/cover.jpg',
}
},
- 在
index.js编辑音乐播放逻辑代码// 实现播放器播放功能 audioCtx: null, onReady: function() { this.audioCtx = wx.createInnerAudioContext() // 默认选择第1曲 this.setMusic(0) var that = this // 播放进度检测 this.audioCtx.onError(function() { console.log('播放失败：' + that.audioCtx.src) }) // 播放完成自动换下一曲 this.audioCtx.onEnded(function() { that.next() }) // 自动更新播放进度 this.audioCtx.onPlay(function() {}) this.audioCtx.onTimeUpdate(function() { that.setData({ 'play.duration': formatTime(that.audioCtx.duration), 'play.currentTime': formatTime(that.audioCtx.currentTime), 'play.percent': that.audioCtx.currentTime / that.audioCtx.duration * 100 }) }) // 格式化时间 function formatTime(time) { var minute = Math.floor(time / 60) % 60; var second = Math.floor(time) % 60 return (minute < 10 ? '0' + minute : minute) + ':' + (second < 10 ? '0' + second : second) } }, // 音乐播放 setMusic: function(index) { var music = this.data.playlist[index] this.audioCtx.src = music.src this.setData({ playIndex: index, 'play.title': music.title, 'play.singer': music.singer, 'play.coverImgUrl': music.coverImgUrl, 'play.currentTime': '00:00', 'play.duration': '00:00', 'play.percent': 0 }) },
- 修改底部播放器的结构代码
{{play.title}} {{play.singer}} 
- 底部播放器样式代码
/* 底部播放器 */
.player {
display: flex;
align-items: center;
background: #222;
border-top: 1px solid #252525;
height: 112rpx;
}
.player-cover {
width: 80rpx;
height: 80rpx;
margin-left: 15rpx;
border-radius: 8rpx;
border: 1px solid #333;
}
.player-info {
flex: 1;
font-size: 10pt;
line-height: 38rpx;
margin-left: 20rpx;
padding-bottom: 8rpx;
}
.player-info-singer {
color: #888;
}
.player-controls image {
width: 80rpx;
height: 80rpx;
margin-right: 15rpx;
}
- 底部播放器播放功能
- 在indexjs里编写底部播放器暂停/播放按钮控制歌曲以及播放器切换下一曲歌曲功能
// 播放按钮
play: function() {
this.audioCtx.play()
this.setData({
state: 'running'
})
},
// 暂停按钮
pause: function() {
this.audioCtx.pause()
this.setData({
state: 'paused'
})
},
// 下一曲按钮
next: function() {
var index = this.data.playIndex >= this.data.playlist.length - 1 ? 0 : this.data.playIndex + 1
this.setMusic(index)
if (this.data.state === 'running') {
this.play()
}
},
- 测试底部播放功能
四、编写播放器页面
- 在
play.wxml编写播放器页面代码
{{play.title}}
—— {{play.singer}} ——
{{play.currentTime}}
{{play.duration}}
- 页面效果
- 在
index.wxss编写播放器样式
/* 播放器 */
.content-play {
display: flex;
justify-content: space-around;
flex-direction: column;
height: 100%;
text-align: center;
}
.content-play-info > view {
color: #888;
font-size: 11pt;
}
/* 显示专辑页面样式 */
.content-play-cover image {
animation: rotateImage 10s linear infinite;
width: 400rpx;
height: 400rpx;
border-radius: 50%;
border: 1px solid #333;
}
@keyframes rotateImage {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* 播放进度和时间 */
.content-play-progress {
display: flex;
align-items: center;
margin: 0 35rpx;
font-size: 9pt;
text-align: center;
}
.content-play-progress > view {
flex: 1;
}
- 查看播放器页面
第五章 播放列表
一、实现播放列表功能
- 在
playlist.wxml编写播放列表结构
{{item.title}}
{{item.singer}}
正在播放
- 查看结果页面
- 在
index.wxss编写播放列表样式
/* 播放列表 */
.playlist-item {
display: flex;
align-items: center;
border-bottom: 1rpx solid #333;
height: 112rpx;
}
.playlist-cover {
width: 80rpx;
height: 80rpx;
margin-left: 15rpx;
border-radius: 8rpx;
border: 1px solid #333;
}
.playlist-info {
flex: 1;
font-size: 10pt;
line-height: 38rpx;
margin-left: 20rpx;
padding-bottom: 8rpx;
}
.playlist-info-singer {
color: #888;
}
.playlist-controls {
font-size: 10pt;
margin-right: 20rpx;
color: #c25b5b;
}
- 查看结果页面
- 在
index.js里实现播放列表的切换功能// 播放列表换曲功能 change: function(e) { this.setMusic(e.currentTarget.dataset.index) this.play() }
二、测试播放列表切换功能
- 播放列表测试效果图
三、最终结果展示页面
-
音乐推荐页面
- 播放器页面
- 播放列表页面
