微信小程序如何制作音乐播放器

这篇文章主要介绍“微信小程序如何制作音乐播放器”，在日常操作中，相信很多人在微信小程序如何制作音乐播放器问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”微信小程序如何制作音乐播放器”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
　　这个页面分为3个部分：顶部信息栏(歌曲名/专辑名)，中间的唱片图，以及底下的控制按钮。
　　首先是信息栏：

{{playingMusic.name}}

*{{item.name}}

复制代码
　　这部分很简单，与我们前面写过的类似，多个歌手之间用“*”分隔。格式文件为：
.song-info {
width:100%;
padding:30rpx;
box-sizing:border-box;
text-align:center;
}
.song-title {
display:block;
width:100%;
color:#fff;
font-size:36rpx;
line-height:60rpx;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
.song-subtitle {
display:block;
width:100%;
font-size:28rpx;
line-height:40rpx;
color:rgba(255,255,255,.6);
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}复制代码
　　然后是中间的图片，这部分我们以动画形式表现，让唱片一直旋转，先看布局文件：

“cd-gan”是唱片部分里白色的播放杆部分，“cd-inner”是唱片部分，在这里为它添加表示唱片的黑色背景，然后在里门用小一圈的“cd-img”来加载我们获取的网络图片。最后为整个唱片添加动画“cd-animation”。这些工作全部由格式文件完成。
.cd-info {
position: relative;
width: 100%;
text-align: center;
padding-top: 120rpx;
}

.cd-gan {
position: absolute;
left: 50%;
margin-top: -80rpx;
margin-left: -150rpx;
display: block;
width: 300rpx;
height: 200rpx;
background: url(‘../../resources/images/cd_g.png’);
background-size: cover;
z-index: 10;
}

.cd-inner {
position: relative;
display: inline-block;
z-index: 4;
height: 500rpx;
width: 500rpx;
background: url(‘../../resources/images/cd_b.png’);
background-size: cover;
text-align: center;
padding-top: 100rpx;
box-sizing: border-box;
}

.cd-animation {
-webkit-animation: circle 10s infinite linear;
animation: circle 10s infinite linear;
}

.cd-img {
display: inline-block;
width: 300rpx;
height: 300rpx;
border-radius: 50%;
}

@keyframes circle {
0% {
transform: rotate(0deg);
}

100% {
transform: rotate(360deg);
}
}复制代码
　　这里面大多数的代码相信大家已经很熟悉了，重点看一下“cd-animation”这一部分，这里加载了动画“circle”并设置了动画时长与无限循环，这样就实现了在音乐播放时，唱片一直旋转的效果。“circle”动画我们使用关键帧keyframes来实现。
　　完成这两部分后我们以一个view来包裹它们，确定它在页面的位置。

{{playingMusic.name}}

*{{item.name}}

.main-box {
position: absolute;
top: 0;
bottom: 308rpx;
z-index: 3;
width: 100%;
background: rgba(0, 0, 0, 0.2);
}复制代码
　　接着我们完成底下的操作部分。

{{currTimeStr}}

{{musicTimeStr}}

复制代码
　　操作控制部分由最上边的进度条部分“slider-box”和底下的操作按钮“mucis-ctr”组成。进度条我们使用slider组件，两段用两个text组件来显示当前播放时间与总时长。操作按钮部分，首先是播放模式的按钮，根据playType的值，改变顺序/随机/单曲的播放模式并对应加载不同的图片。然后是3个按钮，分别表示前一首/播放/下一首。最后是显示播放列表的按钮。
　　格式文件为：
.slider-box {
box-sizing: border-box;
padding: 20rpx 130rpx;
}

.slider-text {
position: absolute;
display: block;
width: 100rpx;
height: 40rpx;
line-height: 40rpx;
font-size: 24rpx;
color: #fff;
}

.st-l {
left: 60rpx;
}

.st-r {
top: 20rpx;
right: 40rpx;
text-align: right;
}

.slider-inner {
width: 100%;
}
.ctre-box {
height: 308rpx;
position: absolute;
bottom: 0;
z-index: 3;
width: 100%;
background: rgba(0, 0, 0, 0.2);
}

.music-ctr {
position: relative;
padding: 20rpx 120rpx;
}

.music-sort {
position: absolute;
left: 20rpx;
width: 108rpx;
height: 108rpx;
}

.ms-loop {
background: url(“../../resources/images/play_icn_loop.png”);
background-size: cover;
}

.ms-one {
background: url(“../../resources/images/play_icn_one.png”);
background-size: cover;
}

.ms-shuffle {
background: url(“../../resources/images/play_icn_shuffle.png”);
background-size: cover;
}

.music-list-btn {
position: absolute;
top: 36rpx;
right: 20rpx;
width: 108rpx;
height: 108rpx;
background: url(“..免费云主机域名/../resources/images/play_icn_src.png”);
background-size: cover;
}

.mc-inner {
text-align: center;
}

.mci-icon {
display: inline-block;
width: 142rpx;
height: 142rpx;
}

.mci-prev {
background: url(“../../resources/images/play_btn_prev.png”);
background-size: cover;
}

.mci-play {
background: url(“../../resources/images/play_btn_play.png”);
background-size: cover;
}

.mci-pause {
background: url(“../../resources/images/play_btn_pause.png”);
background-size: cover;
}

.mci-next {
background: url(“../../resources/images/play_btn_next.png”);
background-size: cover;
}复制代码
　　最后写一下播放列表的布局：

播放列表(185)
清空

关闭
复制代码
　　格式文件为：
.play-list {
position: absolute;
top: 20%;
bottom: 0;
left: 0;
width: 100%;
z-index: 99;
background: rgba(255, 255, 255, 0.95);
}

.play-list-header {
line-height: 88rpx;
font-size: 32rpx;
text-align: center;
border-bottom: 2rpx solid rgba(0, 0, 0, 0.1);
}

.play-list-clear {
position: absolute;
right: 30rpx;
font-size: 28rpx;
color: rgba(0, 0, 0, 0.6);
}

.play-list-bottom {
position: absolute;
width: 100%;
bottom: 0;
height: 100rpx;
line-height: 100rpx;
text-align: center;
font-size: 32rpx;
border-top: 2rpx solid rgba(0, 0, 0, 0.1);
}

.play-list-inner {
position: absolute;
top: 90rpx;
bottom: 102rpx;
width: 100%;
overflow-x: hidden;
overflow-y: auto;
padding-left: 20rpx;
}

.play-item {
position: relative;
widows: 100%;
box-sizing: border-box;
padding-right: 90rpx;
height: 88rpx;
line-height: 88rpx;
font-size: 30rpx;
border-bottom: 2rpx solid rgba(0, 0, 0, 0.1);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}复制代码
　　这里使用“z-index: 99;background: rgba(255, 255, 255, 0.95);”使播放列表覆盖部分音乐播放页面且背景半透明。
　　最后我们使用一个view来为整个页面加载背景，这个背景为我们获取的图片加上模糊效果。最后用一个view包裹所有布局。

…

复制代码
　　使用格式文件添加模糊效果：
.paly-view {
display: block;
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}

.blur {
filter: blur(80rpx);
}

.bg {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-size: cover;
background-position: bottom center;
}复制代码
　　最后我们加载数据：
var app = getApp()

Page({
data: {
playList: [],
playIndex: 0,
showPlayList: true,
playingMusic: {},
musicTime: 0,
currTime: 0,
musicTimeStr: 0,
currTimeStr: 0,
isPlay: false,
playInv: 0,
playPro: ”,
playType: 1
},
onLoad: function (options) {
// 页面初始化 options为页面跳转所带来的参数
var self = this;
var list = app.globalData.playList;
var playingMusic = null;
if (list.length) {
var index = app.globalData.playIndex;
index = (list.length – 1
playingMusic = list[index];
this.setData({
playList: list,
playIndex: index,
playingMusic: playingMusic
});
}
wx.playBackgroundAudio({
dataUrl: list[index].url,
title: list[index].title,
coverImgUrl: list[index].img,
success: function () {
},
fail: function () {
console.log(‘播放失败!’);
}
});
},
changePlayType: function (e) {
var dataSet = e.currentTarget.dataset;
if (dataSet.type == 1) {
this.setData({
playType: 2
});
}
if (dataSet.type == 2) {
this.setData({
playType: 0
});
}
if (dataSet.type == 0) {
this.setData({
playType: 1
});
}
},
closePlayList: function (e) {
this.setData({
showPlayList: true
})
},
showPlayList: function (e) {
this.setData({
showPlayList: false
})
},
//三个按钮的点击事件
pauseMusic: function () {
},
playNextMusic: function () {
},
playPreMusic:function(){
},
})到此，关于“微信小程序如何制作音乐播放器”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注百云主机网站，小编会继续努力为大家带来更多实用的文章！