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


这篇文章主要介绍“微信小程序如何制作音乐播放器”,在日常操作中,相信很多人在微信小程序如何制作音乐播放器问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”微信小程序如何制作音乐播放器”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!
  这个页面分为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)
清空




{{item.name}}

关闭
复制代码
  格式文件为:
.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(){
},
})到此,关于“微信小程序如何制作音乐播放器”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注百云主机网站,小编会继续努力为大家带来更多实用的文章!

相关推荐: vue如何实现原生下拉刷新

这篇文章给大家分享的是有关vue如何实现原生下拉刷新的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。文字样式html代码 下拉刷新 上拉刷新 js代码css代码 我这边用的是scss 如果下拉刷新用动画就用这个css样式图片的话我用的…

免责声明:本站发布的图片视频文字,以转载和分享为主,文章观点不代表本站立场,本站不承担相关法律责任;如果涉及侵权请联系邮箱:360163164@qq.com举报,并提供相关证据,经查实将立刻删除涉嫌侵权内容。

(0)
打赏 微信扫一扫 微信扫一扫
上一篇 01/09 10:04
下一篇 01/09 10:04

相关推荐