效果图：
代码实现：
index.js代码：
Page({/*** 页面的初始数据*/data: {item:0,tab:0,// 播放器列表数据playlist:[{id:1,title:"晴天",singer:'周杰伦',src:'http://localhost:3000/1.mp3',converImgUrl:'../images/yhm.png'},{id:2,title:"反方向的钟",singer:'周杰伦',src:'http://localhost:3000/2.mp3',converImgUrl:'../images/yhm.png'},{id:3,title:"兰亭序",singer:'周杰伦',src:'http://localhost:3000/3.mp3',converImgUrl:'../images/yhm.png'},{id:4,title:"青花瓷",singer:'周杰伦',src:'http://localhost:3000/4.mp3',converImgUrl:'../images/yhm.png'},{id:5,title:"本草纲目",singer:'周杰伦',src:'http://localhost:3000/4.mp3',converImgUrl:'../images/yhm.png'},{id:6,title:"爱在西元前",singer:'周杰伦',src:'http://localhost:3000/4.mp3',converImgUrl:'../images/yhm.png'},{id:7,title:"花海",singer:'周杰伦',src:'http://localhost:3000/4.mp3',converImgUrl:'../images/yhm.png'},{id:8,title:"半岛铁盒",singer:'周杰伦',src:'http://localhost:3000/4.mp3',converImgUrl:'../images/yhm.png'},{id:9,title:"轨迹",singer:'周杰伦',src:'http://localhost:3000/4.mp3',converImgUrl:'../images/yhm.png'},{id:10,title:"搁浅",singer:'周杰伦',src:'http://localhost:3000/4.mp3',converImgUrl:'../images/yhm.png'}],state:'paused',playIndex:0,play:{currentTime:'00:00',duration:'00:00',percent:0,title:'',singer:'',// converImgUrl:'../images/cover.jpg'coverImgUrl:'../images/yhm.png'}},audioCtx:null,changeItem(e){this.setData({item : e.target.dataset.item})},changeTab(e){this.setData({tab:e.detail.current})},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {this.audioCtx = wx.createInnerAudioContext();this.setMusic(0);},setMusic(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: 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 + 1this. setMusic(index)if (this .data.state == 'running') {this.play()}},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
})
index.wxml页面：
<!-- 顶部 -->
<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"><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}}" /><view class="player-info"><view class="player-info-title">{{play.title}}</view><view class="player-info-singer">{{play.singer}}</view></view><view class="player-controls"><!--切换到播放列表--><image src="../images/01.png" bindtap="changePage" data-page="2" /><!--播放或暂停--><image wx:if="{{state == 'paused'}}" src="../images/02.png" bindtap="play" /><image wx:else src="../images/02stop.png" bindtap="pause" /><!--下一曲--><image src="../images/03.png" bindtap="next" /></view>
</view>
info.wxml页面：
<!-- 轮播图 -->
<scroll-view class="content-info" scroll-y><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.jpg"/></swiper-item><swiper-item><image src="../images/banner.jpg"/></swiper-item><swiper-item><image src="../images/banner.jpg"/></swiper-item></swiper><!-- 功能按钮 --><view class="content-info-portal"><view><image src="../images/04.png"/><text>私人FM</text></view><view><image src="../images/05.png"/><text>每日歌曲推荐</text></view><view><image src="../images/06.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/mjz.png"/><view>稻香</view></view><view class="list-item"><image src="../images/qlx.png"/><view>七里香</view></view><view class="list-item"><image src="../images/syydxb.png"/><view>夜曲</view></view><view class="list-item"><image src="../images/mjz.png"/><view>花海</view></view><view class="list-item"><image src="../images/ylxb.png"/><view>一路向北</view></view><view class="list-item"><image src="../images/yhm.png"/><view>以父之名</view></view></view></view>
</scroll-view>
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}}" sty1e="animation-play-state:{{state}}" /></view><!--显示播放进度和时间--><view class="content-play-progress"><text>{{play.currentTime}}</text><view><slider bindchange="sliderChange" activeColor="#d33a31" block-size="12" backgroundColor="#dadada" value="{{play. percent}}" /></view> <text>{{play.duration}}</text></view>
</view>
playlist.wxml页面：
<scroll-view cclass="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.converImgUrl}}" /><view class="playlist-info"><view class="playlist-info-title">{{item.title}}</view><view cclass="playlist-info-singer">{{item.singer}}</view></view><view class="playlist-controls"><text wx:if="{{index==playIndex}}">正在播放</text></view></view>
</scroll-view>
index.wxss页面：
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;
}
.content {flex: 1;
}
.content > swiper{height: 100%;
}
.player{background: #222;border-top:1px solid #252525;height: 112rpx;
}
.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%;
}/* 功能按钮 */
.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;
}/* 热门音乐 */
.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;
}
/*播放器*/
.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-progress{display: flex;align-items: center;margin:0 35rpx;font-size: 9pt; text-align: center;
}
.content-play-progress > view {flex: 1;
}
/*显示专辑页面样式*/
.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: flex;margin: 0 35rpx;font-size: 9pt;text-align: center;
}
.content-play-progress > view {flex: 1;
}/* 底部播放器 */
.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;
}
.content-playlist{height: 100%;
}
/* 播放列表 */
.playlist-item {display: flex;align-items: center;border-bottom: 1rpx solid #333 ;height: 112rpx;
}
.playlist-cover {width: 20rpx;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;
}
index.json
{"navigationBarBackgroundColor": "#fff","navigationBarTitleText": "音乐","navigationBarTextStyle": "black"
}
