微信小程序音乐播放列表

前言

需求来了：现需要一个选择音乐的列表，因为数据较多采取异步加载，需要有试听功能。稍加思索作出如下页面（样式简陋大家仅供参考哈）。

api参考微信开放文档：https://developers.weixin.qq.com/miniprogram/dev/api/media/audio/AudioContext.html

一、页面部分

首页实现又上角的音乐播放暂停按钮：

创建一个圆形的小音乐图标定位到页面的右上角用css动画让他旋转起来暂停效果我们用css的animation-play-state来实现paused表示动画已暂停running表示动画正在播放。（具体样式参考下方）

<view class="circle" style="border:3px solid rgba(0,0,0,0.15);position:fixed;right:5px;top:3px;z-index:298"><view class='xb xb-allc circle' style='width:34px;height:34px;background:rgba(0,0,0,0.65);'><image class="xb imgrotate_common" mode="aspectFill" style="width:11px;height:23px;animation-play-state:{{palycover?'running':'paused'}}" bindtap='coverbind'src="https://sxzimgs.oss-cn-shanghai.aliyuncs.com/yingxiao/page/6156ea6c-9ca5-11e9-9a54-00163e04cc20.png"></image></view></view>

这里的抽屉效果我们采用css的transition加js实现
主体列表实现

  <view wx:for="{{muscie}}" wx:key="index"class="{{index < muscie.length-1 && 'BB-1-e6'}} FS-16_r transition4 line-20_r h45 bs-bx ofH" data-index="{{index}}"data-item="{{item}}" bindtap="select" style="{{selectIndex == index?parse.height(item.length):''}}"><view class="dis_f ai_c jc_sb h45">{{item.value}}<image wx:if="{{item.subset}}" style="width:32rpx;height:18rpx;"src="https://sxzimgs.oss-cn-shanghai.aliyuncs.com/yingxiao/page/d20ce6f4-7b41-11eb-a847-00163e04cc20.png"></image><image wx:if="{{!item.subset && musice_uuid==item.value}}"src="https://sxzimgs.oss-cn-shanghai.aliyuncs.com/yingxiao/page/a792d5c4-7bcc-11eb-a847-00163e04cc20.png"style="width:32rpx;height:22rpx;"></image></view><block wx:if="{{selectIndex == index}}"><view wx:for="{{item.subset}}" data-item="{{subsetItem}}" catchtap="selectMusice" hover-class="weui-cell_active"class="dis_f ai_c jc_sb h45 FC-gray2" wx:for-item="subsetItem" wx:key="index">{{subsetItem.name}}<image wx:if="{{musice_uuid==subsetItem.uuid}}"src="https://sxzimgs.oss-cn-shanghai.aliyuncs.com/yingxiao/page/a792d5c4-7bcc-11eb-a847-00163e04cc20.png"style="width:32rpx;height:22rpx;"></image></view></block></view>

在wxml页面写一个wxs用于改变高度：

<wxs module="parse">module.exports = {height: function (length) {var style = ''var num = 90 * length + 90style += "height:" + num + "rpx;"return style}}
</wxs>

部分样式参考：

.transition4 {webkit-transform: translateZ(0);-moz-transform: translateZ(0);-ms-transform: translateZ(0);-o-transform: translateZ(0);transform: translateZ(0);transition: all .3s;
}
.FS-16_r {font-size: 32rpx!important;
}
.line-20_r {line-height: 40rpx;
}
.ofH {overflow: hidden;
}
.BB-1-e6 {border-bottom: 1px solid #E6E6E6;
}
.h45 {height: 90rpx;
}
@-webkit-keyframes changeright{       0%{-webkit-transform:rotate(0deg);}50%{-webkit-transform:rotate(180deg);}100%{-webkit-transform:rotate(360deg);}
}
.imgrotate_common{-webkit-animation:changeright 6s linear infinite;
}

二、js部分

这里我们首先再onLoad 里判断进入此页面前是否已经选择好音乐，如果已经选好则展开相应列表并播放音乐（参考下方onLoad 部分）。
因为这里采取的是异步请求的方式所以列表数组页面加载时并无数据，我们这里在用户展开相应列表时获取数据（参考下方select()和getMusicList()部分），如果无需异步请求数据则省略getMusicList的请求部分。
选择音乐时把数据存储到上个页面，这里需判断是否选择的是正在播放的音乐，如果是则暂停播放否则播放相应音乐（参考下方selectMusice()部分）
当然这里一定要在页面销毁和隐藏时停止音乐播放。

代码参考：

  /*** 页面的初始数据*/data: {muscie: [{value: '网络流行',type: 'wangluo',subset: []},{value: '节日庆典',type: 'jieri',subset: []},{value: '中外乐器',type: 'yueqi',subset: []},{value: '欢快儿童',type: 'ertong',subset: []},{value: '其他音乐',type: 'other',subset: []},], // 音乐列表palycover: false, // 播放状态selectIndex: null,  // 选中音乐类型indexmusice_uuid: '' // 音乐id},onLoad: function (options) {let form = $.parentData().form// 创建内部 audio 上下文 InnerAudioContext 对象。this.InnerAudioContext = wx.createInnerAudioContext()this.setData({musice_uuid: form.musice.uuid || null})form.musice.category && this.getMusicList(form.musice.category, form.selectIndex, form.musice.url)},/*** 活动背景音乐列表*/getMusicList(qcategory = "", index, url) {let {muscie} = this.datalet filter = muscie.filter((item) => {return item.type === qcategory})[0].subset.length// 选中为当前展开列表停止请求if (filter > 0) {this.setData({selectIndex: index,})return}$.get("/activity/music/list", {qcategory}, (res) => {muscie.map(item => {if (item.type === qcategory) {item.subset = res.dataitem.length = res.data.length}})url && this.play_bgm(url)this.setData({muscie,palycover: url ? true : this.data.palycover,selectIndex: index,})})},/*** 展开列表*/select(e) {let {index,item} = $.data(e)let {selectIndex,} = this.dataif (selectIndex == index) {index = null}this.getMusicList(item.type, index)},/*** 选择音乐*/selectMusice(e) {let musice_uuid = $.data(e).item.uuid$.parent().form.musice = $.data(e).item$.parent().form.selectIndex = this.data.selectIndex// console.log(JSON.stringify($.data(e).item))if (this.data.musice_uuid === musice_uuid) {this.coverbind()} else {this.play_bgm($.data(e).item.url)this.setData({palycover: true,})}this.setData({musice_uuid})},// 暂停音乐coverbind() {let InnerAudioContext = this.InnerAudioContextif (this.data.palycover == true) {InnerAudioContext.pause()this.setData({palycover: false})} else {InnerAudioContext.play()this.setData({palycover: true})}},// 播放音乐play_bgm(src) {let InnerAudioContext = this.InnerAudioContextInnerAudioContext.autoplay = trueInnerAudioContext.src = srcInnerAudioContext.onPlay(() => {})InnerAudioContext.onStop(() => {})InnerAudioContext.onEnded(() => {InnerAudioContext.play()})InnerAudioContext.onError((res) => {})},stop_audio() {if (this.InnerAudioContext) {let InnerAudioContext = this.InnerAudioContextInnerAudioContext.stop()}},onHide() {this.stop_audio()},onUnload() {this.stop_audio()},