微信小程序音乐播放器实例
效果展示
wxml
<view>
<text class="catalogText">最近添加</text>
<view class="photoList">
<view class="photoItem" bindtap="playSong" data-num="{{index}}" wx:for="{{songList}}">
<image class="musicImage" src="{{item.imageUrl}}"></image>
<text class="musicName">{{item.name}}</text>
<text class="musicSinger">{{item.singer}}</text>
</view>
</view>
</view>
<!--选择播放-->
<view class="groupSelector" bindtap="showHiddenList">
<text class="groupSelectorText">{{groupName}}</text>
<image src="../icon/下箭头.png" class="groupSelectorImage"></image>
</view>
<action-sheet hidden="{{listIsHidden}}" bindtap="sheetChange">
<block wx:for="{{sheetItems}}">
<action-sheet-item data-sheetItem="{{item}}">
{{item}}
</action-sheet-item>
</block>
<action-sheet-cancel class="cancel">取消</action-sheet-cancel>
</action-sheet>
<!--底部播放栏-->
<view class="player">
<view class="playerImageView">
<image class="playerImage" src="{{bottomPlayer.imageUrl}}"></image>
</view>
<text>{{bottomPlayer.name}}</text>
<block wx:if="{{playing==false}}">
<image src="../icon/播放.png" class="playButton" data-num="{{playSongNum}}" bindtap="playSong"></image>
</block>
<block wx:if="{{playing==true}}">
<image src="../icon/暂停.png" class="playButton" data-num="{{playSongNum}}" bindtap="pause"></image>
</block>
</view>
js
下面是js中除了生命周期函数之外的部分
var items=["播放列表","歌曲","歌手","专辑"];
var songList=[
{
dataUrl:"http://www.mvpdj.com/media/attachment/track/201910/20191001_4923325525d92e81e21e0c.mp3",
name:"Feel So Unity Ciao Adios",
singer:"Calvin Har",
imageUrl:"https://www.0dutv.com/upload/magic/244.jpg"
},{
dataUrl:"http://m10.music.126.net/20210128113631/cecab302f502fed02254f6c26b76f12f/ymusic/efdf/7b1b/8051/acf8cd8dfe558183e22e4f6a59da9b74.mp3",
name:"Pump This (Original Mix)",
singer:"Snails,Herobust",
imageUrl:"https://www.0dutv.com/upload/magic/251.jpg"
},{
dataUrl:"http://www.mvpdj.com/media/attachment/track/201907/20190723_8993094645d369a6fea902.mp3",
name:"Beast Mode (Extended Mix)",
singer:"Kura",
imageUrl:"https://www.0dutv.com/upload/magic/172.jpg"
},{
dataUrl:"http://www.mvpdj.com/media/attachment/track/201910/20191001_4923325525d92e81e21e0c.mp3",
name:"Feel So Unity Ciao Adios",
singer:"Calvin Harris",
imageUrl:"https://www.0dutv.com/upload/magic/256.jpg"
}
];
Page({
/**
* 页面的初始数据
*/
data: {
songList:songList,
//只有data里的数据才有wx:for
groupName:items[0],
playSongNum:0,
listIsHidden:true,
sheetItems:items,
playing:false,
bottomPlayer:{
dataUrl:"",
name:"",
singer:"",
imageUrl:""
}
},
playSong:function(e){
/*获取点击的歌曲*/
var num=e.currentTarget.dataset.num;
var res=this.data.songList[num];
var that=this;
this.setData({
bottomPlayer:res,
playing:true,
playSongNum:num
});
/*播放*/
wx.playBackgroundAudio({
dataUrl:res.dataUrl,
name:res.name,
singer:res.singer,
imageUrl:res.imageUrl,
success:function(res){
that.setData({
playing:true
})
}
})
},
pause:function(){
var that=this;
wx.pauseBackgroundAudio({
success: (res) => {
that.setData({
playing:false
});
},
})
},
sheetChange:function(){
this.setData({
listIsHidden:!this.data.listIsHidden.num
});
},
showHiddenList:function(){
this.setData({
listIsHidden:!this.data.listIsHidden
});
},
})
wxss
.catalogText{
font-size: 28rpx;
line-height: 30rpx;
}
.photoList{
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
}
.photoItem{
width: 280rpx;
display: flex;
flex-direction: column;
padding: 5rpx 0;
}
.musicImage{
width: 280rpx;
height: 280rpx;
border-radius: 10rpx;
}
.musicName{
font-size: 24rpx;
line-height: 32rpx;
white-space: nowrap;
text-overflow: ellipsis;
/* 文本溢出时显示...overflow也要设置才有用 */
overflow: hidden;
}.musicSinger{
font-size:24rpx;
line-height: 32rpx;
color: rgb(159, 160, 163);
}
.groupSelector{
display: flex;
flex-direction: row;
justify-content: center;
margin: 10rpx 0;
}
.groupSelectorText{
font-size: 28rpx;
}
.groupSelectorImage{
width: 40rpx;
height: 40rpx;
}
.player{
position: fixed;
bottom: 0;
width: 100%;
height: 200rpx;
background-color: rgb(223, 223, 223);
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.playerImageView{
width: 75rpx;
height: 75rpx;
padding-left: 30rpx;
}
.playerImage{
width: 100rpx;
height: 100rpx;
border-radius: 30rpx;
}
.playButton{
width: 80rpx;
height: 80rpx;
padding-right: 30rpx;
}