⼩程序开发———⾳乐播放器⽬录
⼀⼩程序主体功能介绍
本⼩程序主要实现，⾳乐的播放、暂停，下⼀曲的切换，以及播放列表和当前播放歌曲的详细信息查看等。⼆常⽤组件和API介绍
1.⾳频API
1.1 介绍
创建⾳频时需要先创建⼀个对象实例，从⽽引⽤该对象的⽅法和属性。
var ateInnerAudioContext()
1.2 常⽤属性⽅法
属性
src:⾳频资源的地址；
autoplay：是否⾃动播放，默认false；
loop： 是否循环播放，默认为false；
startTime: 开始播放的位置，默认为0；
currentTime: 当前播放的位置；
duration: ⾳频的长度；
paused：当前暂停或停⽌的状态；
⽅法
play(): 播放；
stop(): 停⽌，再播放重头开始；
pause(): 暂停，再播放从当前位置开始；
seek():  跳到指定的位置；
onError(): ⾳频播放错误事件；
onEnded(): ⾳频⾃然播放结束事件；
onPlay(): ⾳频播放事件；
onTimeUpdate(): ⾳频播放进度更新事件；
2.常⽤组件
2.1 swiper组件
介绍
swiper组件是滑块视图容器，经常⽤于实现轮播图，在⾳乐播放器⼩程序中可以实现标签页的切换。
属性
属性类型说明
indicator-dots Boolean是否显⽰页⾯的指⽰点，默认为false
indicator-color Color指⽰点的颜⾊
indicator-active-
Color选中的指⽰点颜⾊
color
autoplay Boolean是否⾃动切换，默认为false
current Number当前所在滑块的index，默认为0
current-item-id String当前所在滑块的item-id
interval Number⾃动切换时间间隔（ms）
duration Number滑动动画时长（ms）
bindchange EventHandle current改变时会触发change事件
circular Boolean是否采⽤衔接滑动，默认false
代码使⽤
<swiper current="1">
<swiper-item >0</swiper-item>
<swiper-item >1</swiper-item>
<swiper-item >2</swiper-item>
</swiper>
2.2 include代码引⽤
介绍
当⼀个wxml⽂件中代码过多，或wxml中有部分相同的代码时，可以将他们分离开，⽤include进⾏引⼊。
代码使⽤
<include src="header.wxml"/>
<view>body</view>
<include src="footer.wxml" />
2.3 scroll-view组件
介绍
scroll-view组件⽤于实现可滚动视图区域。⼀般来说，当页⾯⾼度超出了显⽰区域的⾼度时，先设置外层容器⾼度，使其低于内部容器⾼度，然后在外层容器样式中设置滚动⽅向即可。
属性
属性说明
scroll-x允许横向滚动，默认为false
scroll-y允许纵向滚动，默认为false
scroll-top设置竖向滚动条的位置
scroll-left设置横向滚动条的位置
bindscrolltoupper滚动到顶部/左边触发的事件
htmlborder
bindscrolltolower滚动到底部/右边触发的事件
代码使⽤
<scroll-view scroll-x  scroll-y  bindscroll="scroll">
<view  ></view>
</scroll-view>
在.js页⾯中可以添加scroll处理函数，来查看具体数值
scroll:function(e){
console.log(e.detail)
}
2.4 slider组件
介绍
slider组件是⼩程序表单组件中的⼀种，⽤于滑动选择某⼀个值，在本项⽬中将⽤来实现播放器的进度条
属性
属性说明min最⼩值，默认为0
max最⼤值，默认为100
step步长，取值⼤于0
value当前取值，默认为0
activeColor已选择的颜⾊，默认为#1aad19 backgroundColor背景条颜⾊，默认为#e9e9e9
block-size滑块的⼤⼩
block-color滑块的颜⾊，默认为#ffffff
show-value是否显⽰当前value，默认为false bindchange完成⼀次拖动后触发的事件bindchanging拖动过程中触发的事件
三整体布局
1. 数据定义
1.1 路径
pages/index/index.js  ⽂件的data对象定义基础数据playlist
1.2 数据
data: {
item:0,
tab:0,
// 播放列表
playlist:[{
id:1,
title:"纪念",
singer:"雷⼼⾬",
src:"/images/1.mp3",
coverImgUrl:"/images/cover.jpg"    },{
id:2,
title:"雪落下的声⾳",
singer:"郁可唯",
src:"/images/2.mp3",
coverImgUrl:"/images/cover2.jpg"
},{
id:3,
title:"只要平凡",
singer:"张杰",
src:"/images/3.mp3",
coverImgUrl:"/images/cover3.jpg"    }
,{
id:4,
title:"我会很勇敢",
singer:"张雅莉",
src:"/images/4.mp3",
coverImgUrl:"/images/cover4.jpg"    } ],
state:"paused",
/
/ 播放的索引值
playIndex:0,
//设置的默认值
play:{
// 当前时间
currentTime:'00.00',
// 总时间
duration:'00.00',
// 播放进度
percent:0,
title:'',
singer:'',
coverImgUrl:"/images/cover.jpg",    }
},
2. 主体页⾯
2.1 布局页⾯index.wxml
<!--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"></include>
</swiper-item>
<swiper-item >
<include src="play.wxml"></include>
</swiper-item>
<swiper-item>
<include src="playlist.wxml"></include>
</swiper-item>
</swiper>
</view>
<!-- 底部播放器 -->
<view class="player">
<image class="player-cover"  src="{{verImgUrl}}"></image>
<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/play-1.jpg" bindtap="changePage" data-page="2"></image>
<!-- 播放或暂停 -->
<image wx:if="{{state=='paused'}}" src="/images/play-2.jpg"
bindtap="play"></image>
<image wx:else  src="/images/play-4.jpg"  bindtap="pause"></image>
<!-- 下⼀曲 -->
<image src="/images/play-3.jpg" bindtap="next"></image>
</view>
</view>
2.2 样式部分
page{
display: flex;
flex-direction: column;
background-color: #c8f5fd;
color: rgb(22, 17, 13);
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{

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。