微信小程序：音乐播放器(附源码)
效果图：
代码实现：
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 + 1
this. 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>私人FMtext>
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"
}