微信小程序常用API练习 - 音乐播放器小程序开发笔记
目录
音乐播放器
准备工作
创建项目
配置导航栏
资源文件准备
服务器准备
音乐播放器首页
首页页面
音乐推荐页
播放器页面
播放列表
首页样式
首页脚本实现
功能截图
总结
音乐播放器
“音乐播放器”微信小程序可以让用户随时随地享受音乐，给用户带来了便捷的音乐体验，且支持后台播放，用户可以在听音乐的同时进行其他操作。下面将对“音乐播放器”微信小程序进行详细讲解。只是简单的实现音乐播放和推荐音乐列表渲染及音乐播放列表渲染。
准备工作
在开发本案例前，需要先完成一些准备工作，主要包括创建项目、配置页面、配置导航栏、复制素材和启动服务器，具体步骤如下。
创建项目
在微信开发者工具创建一个新的小程序项目，名称为“音乐播放器”，选择“不使用模板”。
配置页面
本项目需要配置多个页面，配置页面如下：
实际只有一个页面，即pages/index/index页面，整体的页面结构在index.wxml文件中编写。
由于内容区域中3个标签页的内容较多，为了避免页面嵌套层级过多，
所以拆分到info.wxml、play.wxml、playlist.wxml文件中，使代码容易阅读、便于维护。
配置导航栏
在pages/index/index.json文件中配置页面导航栏，具体代码如下。
{"usingComponents": {"navigation-bar": "/components/navigation-bar/navigation-bar"},"navigationBarTitleText": "音乐","navigationBarBackgroundColor": "#17181a","navigationBarTextStyle": "white"
}资源文件准备
本项目所需图片文件，需创建images文件夹，包含：
banner图切换图片
功能按钮图片
歌曲封面图片
服务器准备
因为本地服务器，所以设置不检验域名。
我采用的是apache+php。在项目路径下创建music文件夹，
准备4个mp3音乐文件，等待音乐播放器访问。
音乐播放器首页
音乐播放器的结构上分为：首页结构、音乐推荐、播放器、播放器列表四个页面。
首页页面
在pages/index/index.wxml文件中，设置标签、标签页、播放器等内容。
具体代码如下：
<!--index.wxml-->
<navigation-bar title="音乐" back="{{false}}" color="white" background="#17181a"></navigation-bar>
<view class="tab"><view class="tab-item {{ tab == 0 ? 'active' : '' }}" bindtap="changeItem" data-item="0">音乐推荐</view><view class="tab-item {{ tab == 1 ? 'active' : '' }}" bindtap="changeItem" data-item="1">播放器</view><view class="tab-item {{ tab == 2 ? 'active' : '' }}" bindtap="changeItem" data-item="2">播放列表</view>
</view>
<view class="content"><swiper current="{{ item }}" bindchange="changeTab" style="height:{{windowHeight}}px"><swiper-item><!-- 音乐推荐 --><include src="info.wxml" /></swiper-item><swiper-item><!-- 播放器 --><include src="play.wxml" /></swiper-item><swiper-item><!-- 播放列表 --><include src="playlist.wxml" /></swiper-item></swiper>
</view>
<!-- 最下方音乐播放器 -->
<view class="player"><image class="player-cover" src="{{ play.coverImgUrl }}" data-item="1" bindtap="changeItem" /><view class="player-info"><view class="player-info-title" data-item="1" bindtap="changeItem">{{ play.title }}</view><view class="player-info-singer" data-item="1" bindtap="changeItem">{{ play.singer }}</view></view><view class="player-controls"><!-- 切换到播放列表 --><image src="/images/list.png" data-item="2" bindtap="changeItem" /><!-- 播放/暂停 --><image wx:if="{{ state == 'paused' }}" src="/images/play.png" bindtap="play" /><image wx:else src="/images/pause.png" bindtap="pause" /><!-- 下一曲 --><image src="/images/right.png" bindtap="next" /></view>
</view>
音乐推荐页
在pages/index/info.wxml文件中编写，
主要内容包括：轮播图、功能按钮列表和推荐歌曲列表，
具体代码如下：
<scroll-view scroll-top="{{scrollTop}}" style="height:{{windowHeight}}px" scroll-y="true" bindscroll="scroll" class="content-info"><!-- 轮播图 --><swiper class="content-info-slide" indicator-color="rgba(255,255,255,.5)" indicator-active-color="#fff" indicator-dots circular autoplay><swiper-item><image src="/images/banner_1.jpg" mode="aspectFill"/></swiper-item><swiper-item><image src="/images/banner_2.jpg" mode="aspectFill"/></swiper-item><swiper-item><image src="/images/banner_3.jpg" mode="aspectFill"/></swiper-item></swiper><!-- 功能按钮 --><view class="content-info-portal"><view><image src="/images/1.png" /><text>私人FM</text></view><view><image src="/images/2.png" /><text>每日歌曲推荐</text></view><view><image src="/images/3.png" /><text>云音乐新歌榜</text></view></view><!-- 推荐歌曲列表 --><view class="content-info-list"><view class="list-title">推荐歌曲</view><view class="list-inner"><view class="list-item"><image src="/images/1.jpg" /><view>lemon tree</view></view><view class="list-item"><image src="/images/2.jpg" /><view>NOW BOY</view></view><view class="list-item"><image src="/images/3.jpg" /><view>爱就一个字</view></view><view class="list-item"><image src="/images/1.jpg" /><view>白天不懂夜的黑</view></view><view class="list-item"><image src="/images/2.jpg" /><view>清明雨上</view></view><view class="list-item"><image src="/images/3.jpg" /><view>有何不可</view></view></view></view>
</scroll-view>播放器页面
在pages/index/play.wxml文件中编写，
内容为展示当前播放的音乐名称、歌手、封面和播放进度，
具体代码如下：
<view class="content-play"><!-- 音乐信息 --><view class="content-play-info"><text>{{ play.title }}</text><view>—— {{ play.singer }} ——</view></view><!-- 专辑封面 --><view class="content-play-cover"><image src="{{ play.coverImgUrl }}" style="animation-play-state:{{ state }}" /></view><!-- 播放进度和时间 --><view class="content-play-progress"><text>{{ play.currentTime }}</text><view><slider bindchanging="sliderChanging" bindchange="sliderChange" activeColor="#d33a31" block-size="12" backgroundColor="#dadada" value="{{ play.percent }}" /></view><text>{{ play.duration }}</text></view>
</view>播放列表
在pages/index/playlist.wxml文件中编写，
主要渲染音乐的播放列表，展示封面、音乐名称、歌手，
可点击进行播放。具体代码如下：
<scroll-view class="content-playlist" scroll-y><view class="playlist-item" wx:for="{{ playlist }}" wx:key="id" bindtap="change" data-index="{{ index }}"><image class="playlist-cover" src="{{ item.coverImgUrl }}" /><view class="playlist-info"><view class="playlist-info-title">{{ item.title }}</view><view class="playlist-info-singer">{{ item.singer }}</view></view><view class="playlist-controls"><text wx:if="{{ index == playIndex }}">正在播放</text></view></view>
</scroll-view>首页样式
因为整体页面就一个index.wxml文件，故样式文件也只有pages/index/index.wxss。
具体代码如下：
/**index.wxss**/
/* 标签页 */
.tab {background-color: #17181a;color: white;display: flex;flex-direction: row;
}.tab .tab-item {padding: 0 8vw;
}.tab .active {font-weight: bold;color: red;border-bottom: 2rpx solid red;
}.content {background-color: #17181a;
}/* 轮播图 */
.content-info-slide image {width: 100%;
}/* 功能按钮 */
.content-info-portal {display: flex;flex-direction: row;
}.content-info-portal view {width: 28vw;height: 10vh;color: white;margin: 3vh 4vw 1vh 4vw;text-align: center;
}.content-info-portal image {width: 16vw;height: 5vh;display: flex;margin: 0 auto;
}/* 推荐歌曲列表 */
.content-info-list {color: white;
}.content-info-list .list-title {font-weight: bold;font-size: 40rpx;margin-bottom: 2vh;margin-left:2vw;
}.list-inner {display: flex;flex-direction: row;flex-wrap: wrap;width: 100%;
}.list-inner .list-item {width: 29%;height: 30%;text-align: center;margin: 0 2vw;
}.list-inner .list-item image {height: 120px;width: 120px;
}/* 播放器 */
/* 播放器歌曲名称 歌手 */
.content-play {color: white;text-align: center;
}.content-play-info {margin-top: 2vh;margin-bottom: 4vh;
}.content-play-info text {font-size: 20px;
}.content-play-info view {color: #ccc;
}/* 歌曲专辑封面 */
.content-play-cover image {width: 70%;border-radius: 60% 60%;
}/* 歌曲进度 */
.content-play-progress {display: flex;flex-direction: row;margin-left:1vw;
}.content-play-progress text {width: 10%;
}.content-play-progress view {width: 78%;
}/* 播放列表 */
.content-playlist {color:white;
}.playlist-item {margin-left:2vw;margin-right:2vw;display: flex;flex-direction: row;padding-top:2vh;padding-bottom: 2vh;border-bottom: 1rpx solid rgb(172, 162, 162);
}.playlist-item .playlist-cover{width:20%;height:80px;
}.playlist-info {margin-top:2vh;width:40%;margin-left:2vw;
}.playlist-info .playlist-info-singer{color:rgb(172, 162, 162);
}.playlist-controls {margin-left:10%;width:20%;text-align: right;
}.playlist-controls text {line-height: 60px;color:#d35f31;
}/* 最下方播放器 */
.player {position: fixed;bottom:0;left:0;color:white;width:100%;height:80px;z-index: 999;display: flex;flex-direction: row;padding-top:2vh;background-color: rgba(68, 66, 66, 0.8);border-top:2px solid rgba(68, 66, 66, 0.8);
}.player .player-cover{width:10%;height:55%;margin-left:2vw;margin-right:2vw;
}.player-info {width:40%;
}.player-info .player-info-singer{color:rgb(172, 162, 162);
}.player-controls image {margin: 1vh 2vw;width:10vw;height: 5vh;
}首页脚本实现
在pages/index/index.js文件中编写。
具体代码如下：
// index.js
// 格式化时间
function formatTime(time) {var minute = Math.floor(time / 60) % 60;var second = Math.floor(time) % 60return (minute < 10 ? '0' + minute : minute) + ':' + (second < 10 ? '0' + second : second)
}Page({data: {item: 0,tab: 0,// 播放器列表playlist: [{id: 1,title: '! (也许是爱！) ',singer: '蔡妍',src: 'http://127.0.0.1/mini/music/1.mp3',coverImgUrl: '/images/1.jpg'}, {id: 2,title: '123木头人',singer: '黑Girl',src: 'http://127.0.0.1/mini/music/2.mp3',coverImgUrl: '/images/2.jpg'}, {id: 3,title: 'Bazzaya',singer: '蔡妍',src: 'http://127.0.0.1/mini/music/3.mp3',coverImgUrl: '/images/3.jpg'}, {id: 4,title: 'Fade',singer: 'Alan Walker',src: 'http://127.0.0.1/mini/music/4.mp3',coverImgUrl: '/images/4.jpg'}],// 记录音乐播放状态state: 'running',playIndex: 0,play: {currentTime: '00:00',duration: '00:00',percent: 0,title: '',singer: '',coverImgUrl: '/images/re_3.jpg',}},scrollTop: 0,// 标签栏标签切换事件changeItem: function (e) {this.setData({item: e.target.dataset.item})},// 设置tab的值changeTab: function (e) {this.setData({tab: e.detail.current})},// 定位数据scroll: function (event) {var that = this;that.setData({scrollTop: event.detail.scrollTop});},/*** 生命周期函数--监听页面加载*/onLoad(options) {var that = this;wx.getSystemInfo({success: function (res) {that.setData({windowHeight: res.windowHeight,windowWidth: res.windowWidth})}});},// 实现在页面初次渲染时，自动选择播放列表中的第1个曲目audioBam: null,onReady: function () {this.audioBam = wx.getBackgroundAudioManager()// 默认选择第1曲this.setMusic(0)// 播放失败检测this.audioBam.onError(() => {console.log('播放失败：' + this.audioBam.src)})// 播放完成自动换下一曲，监听音频自然播放结束的事件this.audioBam.onEnded(() => {this.next()})// 监听音频播放进度更新事件，获取音乐状态信息var updateTime = 0 // 记录上次更新的时间，用于限制1秒只能更新1次进度this.audioBam.onTimeUpdate(() => {var currentTime = parseInt(this.audioBam.currentTime)if (!this.sliderChangeLock && currentTime !== updateTime) {updateTime = currentTimethis.setData({'play.duration': formatTime(this.audioBam.duration || 0),'play.currentTime': formatTime(currentTime),'play.percent': currentTime / this.audioBam.duration * 100})}})},setMusic: function (index) {// 设置当前播放的曲目，在后面的步骤中实现var music = this.data.playlist[index]this.audioBam.src = music.srcthis.audioBam.title = music.titlethis.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,state: 'running'})},// 播放事件play: function () {this.audioBam.play()this.setData({state: 'running'})},// 暂停播放事件pause: function () {this.audioBam.pause()this.setData({state: 'paused'})},// 播放下一曲功能next: function () {var index = this.data.playIndex >= this.data.playlist.length - 1 ? 0 : this.data.playIndex + 1this.setMusic(index)},// 用于在用户操作slider组件时阻止播放进度自动更新，并显示用户选择的时间sliderChangeLock: false,sliderChanging: function (e) {var second = e.detail.value * this.audioBam.duration / 100this.sliderChangeLock = truethis.setData({'play.currentTime': formatTime(second),})},sliderChange: function (e) {var second = e.detail.value * this.audioBam.duration / 100// 调节音乐的播放进度this.audioBam.seek(second)// 在延迟1秒后允许播放进度自动更新setTimeout(() => {this.sliderChangeLock = false}, 1000)},// 播放列表点击播放事件change: function (e) {this.setMusic(e.currentTarget.dataset.index)}
})功能截图
总结
微信小程序常用API练习 - 音乐播放器小程序开发笔记
